大厂技术 高级前端 Node进阶
点击上方 程序员成长指北,关注公众号
回复1,加入高级Node交流群
前言
前几天面试baidu的时候,面试官问:你都知道什么meta
标签?用处是什么?尽可能多的说出来。我:嗯…… 嗯…… 我一般都自动生成… 面试官:……
后来俺找资料好好学了下,再看了taobao和头条的网页才知道:meta标签用处可大得很呐!今天就来浅浅总结一下。
顺便感叹一下字节这块适配做的是真的蛮好
概览
meta标签一般放在整个html
页面的head
部分,在MDN
中对他这样定义:
meta是文档级元数据元素,用来表示那些不能由其它 HTML 元相关元素(
<base>
、<link>
,<script>
、<style>
或<title>
)之一表示的任何元数据。
是不是感觉看起来很抽象?说白了就是为了传达信息。
先看看meta
元素定义的元数据的类型:
如果设置了
name
属性,meta
元素提供的是文档级别的元数据,应用于整个页面。如果设置了
http-equiv
属性,meta
元素则是编译指令,提供的信息与类似命名的 HTTP 头部相同。如果设置了
charset
属性,meta
元素是一个字符集声明,告诉文档使用哪种字符编码。如果设置了
itemprop
属性,meta
元素提供用户定义的元数据。
name属性
name
和content
一起使用,前者表示要表示的元数据的名称
,后者是元数据的值
。
author
用来表示网页的作者的名字,例如某个组织或者机构。
<meta name="author" content="aaa@mail.abc.com">
复制代码
description
是一段简短而精确的、对页面内容的描述。以头条和taobao的description
标签为例:
![8f1711653906ce99abea4992b8f0d417.png](https://i-blog.csdnimg.cn/blog_migrate/97c208f3ebb3798b5c639353b71accbb.png)
![7cfa41b7583e306059221a64e8a5d6d4.png](https://i-blog.csdnimg.cn/blog_migrate/130671def44f15a335adb792b12a78d1.png)
keywords
与页面内容相关的关键词,使用逗号分隔。某些搜索引擎在遇到这些关键字时,会用这些关键字对文档进行分类。还是以头条和taobao为例
![7e945ef1e3b0d55ec6893a765d31161f.png](https://i-blog.csdnimg.cn/blog_migrate/32b648715154d63b590dcfd02725bea6.png)
![81719cfbddd0f18264f97516feccf53e.png](https://i-blog.csdnimg.cn/blog_migrate/a1226f9ccd8d1d6619cb180bc21652f3.png)
viewpoint
为 viewport(视口)的初始大小提供指示。目前仅用于移动设备。
可能你也发现了,我们在vscode
中自动生成html
的代码片段时,会自动生成:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
复制代码
width
用来设置 viewport 的宽度为设备宽度;
initial-scale
为设备宽度与 viewport 大小之间的缩放比例。
![1211cada081cdf714cf20d1c87538b3a.png](https://i-blog.csdnimg.cn/blog_migrate/d7e75ca176a137e3b2f7765bee821085.png)
robots
表示爬虫对此页面的处理行为,或者说,应当遵守的规则,是用来做搜索引擎抓取的。
它的content
可以为:
all
:搜索引擎将索引此网页,并继续通过此网页的链接索引文件将被检索none
:搜索引擎讲忽略此网页index
:搜索引擎索引此网页follow
:搜索引擎继续通过此网页的链接索引搜索其它的网页
renderer
用来指定双核浏览器的渲染方式,比如360浏览器,我们可以通过这个设置来指定360浏览器的渲染方式
<meta name="renderer" content="webkit"> //默认webkit内核
<meta name="renderer" content="ie-comp"> //默认IE兼容模式
<meta name="renderer" content="ie-stand"> //默认IE标准模式
复制代码
http-equiv
http-equiv
也是和content
一起使用,前者表示要表示的元数据的名称
,后者是元数据的值
。
http-equiv
所有允许的值都是特定 HTTP 头部的名称,
X-UA-Compatible
我们最常见的http-equiv
值可能就是X-UA-Compatible
了,它常常长这个样子:
![d3b29180012212d0f08384c9a865ec70.png](https://i-blog.csdnimg.cn/blog_migrate/3f7d5cc70164a174c02d4a3f4cf50430.png)
它是用来是做IE浏览器适配的。
IE=edge
告诉浏览器,以当前浏览器支持的最新版本来渲染,IE9就以IE9版本来渲染。
chrome=1
告诉浏览器,如果当前IE浏览器安装了Google Chrome Frame
插件,就以chrome内核来渲染页面。
像上图这种两者都存在的情况:如果有chrome插件,就以chrome内核渲染,如果没有,就以当前浏览器支持的最高版本渲染。
另外,这个属性支持的范围是IE8-IE11
你可能注意到了,如果在我们的http
头部中也设置了这个属性,并且和meta
中设置的有冲突,那么哪一个优先呢?答案是:开发者偏好(meta
元素)优先于Web服务器设置(HTTP头)。
content-type
用来声明文档类型和字符集
![960879fdd3c23f87f85c04a05a30adcc.png](https://i-blog.csdnimg.cn/blog_migrate/5a72f01941c8075d17eed7c0c4796269.png)
x-dns-prefetch-control
一般来说,HTML页面中的a标签会自动启用DNS提前解析来提升网站性能,但是在使用https协议的网站中失效了,我们可以设置:
![4ca9ebe67b652e5586628fe7e7312d67.png](https://i-blog.csdnimg.cn/blog_migrate/f6dabdc90ddf71742db2c7794fd96ea6.png)
来打开dns对a标签的提前解析
cache-control、Pragma、Expires
和缓存相关的设置,但是遗憾的是这些往往不生效,我们一般都通过http headers
来设置缓存策略
总结
常用了就是这些啦~实际使用时还有很多新的需要学习,这就需要俺们平时多看看其他网站是怎么设置meta
的~ 一起加油叭
关于本文
作者:花椰菜菜
https://juejin.cn/post/7089271039842058253
Node 社群
我组建了一个氛围特别好的 Node.js 社群,里面有很多 Node.js小伙伴,如果你对Node.js学习感兴趣的话(后续有计划也可以),我们可以一起进行Node.js相关的交流、学习、共建。下方加 考拉 好友回复「Node」即可。
如果你觉得这篇内容对你有帮助,我想请你帮我2个小忙:
1. 点个「在看」,让更多人也能看到这篇文章2. 订阅官方博客 www.inode.club 让我们一起成长
点赞和在看就是最大的支持