meta标签简介

meta 标签的概念

元数据（metadata）提供有关页面的元信息。元数据不会显示在页面上，但是对于机器是可读的。
meta 元素常被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。标签始终位于 head 元素中。
元数据总是以 键/值 对的形式被成对传递的。

meta 的作用

1. meta 里的数据是供机器解读的，告诉机器该如何解析这个页面。
2. 可以添加服务器发送到浏览器的 http 头部内容。

meta 的属性

标签的属性定义了与文档相关联的 键/值 对。

charset 属性

HTML5中新添加的，用于定义字符集。尽量写在第一行，不然可能会产生乱码。

content 属性

当 meta 有 http-equiv 或 name 属性时，一定要有 content 属性对其进行说明。

http-equiv 属性

http-equiv 属性是添加http头部内容的。该属性为 键/值 对提供了键名。并指示服务器在发送实际的文档之前先在要传送给浏览器的 MIME 文档头部包含该 键/值 对。

1. content-type：设定网页类型，设置字符集，适用于旧的HTML版本，推荐使用charset属性。

2. X-UA-Compatible：浏览器采取何种版本渲染当前页面，一般都设置为最新模式。

3. refresh：重定向页面，content 中的数字表示秒数，如果没有url，表示刷新页面；有url，表示5秒后重定向至新的网址。

4. cache-control

   • 指定请求和响应遵循的缓存机制

     content 参数：

     • no-cache：浏览器和缓存服务器都不应该缓存页面信息。
     • no-store：请求和响应的信息都不应该被存储在对方的磁盘系统中。
     • public：缓存所有相应。
     • private：只为单个用户缓存。
     • maxage：表示当前请求开始，该响应在多久内能被缓存和重用，而不去服务器重新请求。数字代表秒数。例如：max-age=60 表示响应可以再缓存和重用 60 秒。

   • 禁止百度自动转码：禁止当前页面在移动端浏览时，被百度自动转码，不过不保证100%禁止。

5. pragma：cache模式，禁止缓存，无法脱机浏览。

6. expires：网页到期时间，过期后必须到服务器上重新传输。必须使用 GMT 时间格式，或直接设为0。

name 属性

name 属性是供浏览器进行解析。没有指定具体的值，通常情况下，可以自由使用对自己和源文档的读者来说富有意义的名称。前提是浏览器能够解析写进去的name属性才可以，不然就是没有意义的。

1. renderer：这个meta标签的意思就是告诉浏览器，用webkit内核进行解析，当然前提是浏览器有webkit内核才可以。这个 renderer 是在360浏览器里说明的。360浏览器meta文档说明

2. generator：网站的制作软件。
3. copyright：网站的版权信息。
4. revisit-after：网站重访天数。

SEO 优化部分的 meta

robots

定义网页搜索引擎爬虫的索引方式，告诉爬虫哪些页面需要索引，哪些不需要索引。

content 参数：

• all：默认值，等价于index + follow。
• index：索引此网页。
• follow：继续通过此网页的链接索引搜索其它的网页。
• noindex：不索引此网页。
• nofollow：不继续通过此网页的链接索引搜索其它的网页。
• none：等价于noindex + nofollow。

其它

移动端常用的 meta

viewport

viewport 主要是影响移动端页面布局的

content 参数：

• width：viewport 宽度，数值 device-width
• height：viewport 高度，数值 device-height
• initial-scale：初始缩放比例，取值 0.0-10.0
• maximum-scale：最大缩放比例，取值 0.0-10.0
• minimum-scale：最小缩放比例，取值 0.0-10.0
• user-scalable：是否允许用户缩放，数值 yes / no

其它

各浏览器平台的 meta

IE

Google Chrome

360 浏览器

UC 手机浏览器

QQ 手机浏览器

Apple 的 IOS