meta标签详解

发表于   |     |   次阅读

简介

The <meta> tag provides metadata about the HTML document. Metadata will not be displayed on the page, but will be machine parsable.
关键词metadata，中文名叫元数据，是用于描述数据的数据。它不会显示在页面上，但是机器却可以识别。
meta标签常用于定义页面的说明，关键字，最后修改日期，和其它的元数据。这些元数据将服务于浏览器（如何布局或重载页面），搜索引擎和其它网络服务。

属性

  1. name属性
    name属性主要用于描述网页，比如网页的关键词，叙述等。与之对应的属性值为content，content中的内容是对name填入类型的具体描述，便于搜索引擎抓取。<meta name="参数"content="具体的描述">

    name属性共有以下几种参数：

    • keywords(关键字) :用于告诉搜索引擎，你网页的关键字。

    • description(网站内容的描述) : 用于告诉搜索引擎，你网站的主要内容。

    • viewport(移动端的窗口) : 用于指定在移动设备上页面的布局视口如何设置

    • robots(定义搜索引擎爬虫的索引方式) :用来告诉爬虫哪些页面需要索引，哪些页面不需要索引。content的参数有all,none,index,noindex,follow,nofollow。默认是all。 具体参数含义如下：

      1. all : 搜索引擎将索引此网页与继续通过此网页的链接索引，等价于index，follow。
      2. none : 搜索引擎将忽略此网页，等价于noindex，nofollow。
      3. index : 搜索引擎索引此网页。
      4. noindex : 搜索引擎不索引此网页。
      5. follow : 搜索引擎继续通过此网页的链接索引搜索其它的网页。
      6. nofollow: 搜索引擎不继续通过此网页的链接索引搜索其它的网页。

    • author(作者) :用于标注网页作者

    • generator :用以说明生成工具，可以废弃

    • copyright(版权) :用于标注版权信息

    • revisit-after(搜索引擎爬虫重访时间) :如果页面不是经常更新，为了减轻搜索引擎爬虫对服务器带来的压力，可以设置一个爬虫的重访时间。如果重访时间过短，爬虫将按它们定义的默认时间来访问

    • renderer(双核浏览器渲染方式) :renderer是为双核浏览器准备的，用于指定双核浏览器默认以何种方式渲染页面。

    • 在过去，搜索引擎是靠meta标签，如标题（title）、描述（description）甚至关键字（keywords）来索引网页页面的。某些网站已经开始滥用它们了，在页面中塞满众多著名的关键词，目的在于获得一个更好的搜索结果。Google在2009年就宣布在搜索算法中不再使用元关键词或者描述来得出排名（Ranking）了。但是百度中文搜索引擎算法则是考虑关键词标签作为算法的一个重要因素。

    • 一个人在点击你的链接之前是会在搜索结果中先看到页面的描述，这个也说明，应该添加上meta描述，方便用户去阅读而不仅仅是为了方便网络机器人去查找。

  2. http-equiv属性
    http-equiv属性可用于模拟一个 HTTP 响应头。把 content 属性连接到一个 HTTP 头部
    <meta http-equiv="参数" content="具体的描述">

    http-equiv属性主要有以下几种参数:

  • content-Type(设定网页字符集，推荐使用HTML5的方式):用于设定网页字符集，便于浏览器解析与渲染页面
    <meta charset="utf-8"> //HTML5的方式

  • X-UA-Compatible(浏览器采取何种版本渲染当前页面)：IE8的专用标记,是用来指定Internet Explorer 8 浏览器模拟某个特定版本IE浏览器的渲染方式，以此来解决IE浏览器的兼容问题。
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>

    Google开发了一个Google Chrome Frame「Google Chrome 浏览器内嵌框架 – GCF,使用GCF可以让用户的IE浏览器外观不变，但用户在浏览网页时实际上使用的是Chrome的内核，并且支持Windows XP及以上系统的IE6/7/8。

    所以上段代码可解释为：如果安装了GCF，则使用GCF来渲染页面「”chrome=1”」，如果没有安装GCF，则使用最高版本的IE内核进行渲染「”IE=edge”」。

    在w3.org的html5验证工具会报错，需要针对三种主流服务器在服务器端配置http equiv规则:

    1. apache服务器
      确保 mod_headers 和 mod_setenvif 是available的，然后在httpd.conf「新版Apache的配置文件是 apache2.conf」或者在.htaccess中加入以下规则：

      mod_setenvif.c>
      1
      2
      3
      4
      5
      <IfModule mod_headers.c>
      BrowserMatch chromeframe gcf
      Header append X-UA-Compatible "chrome=1" env=gcf
      </IfModule >
      </IfModule >

    2. Windows Server在IIS7或者更高版本的服务器
      只需要修改web.config文件,添加如下信息即可:

      1
      2
      3
      4
      5
      6
      7
      8
      <system.webServer>
      <httpProtocol>
      <customHeaders>
      <add name = "X-UA-Compatible" value = "chrome=1" />
      </customHeaders>
      </httpProtocol>
      </system.webServer>
      </configuration>

    3. 在Nginx服务器中，只需要找到 ginxconf ginx.conf并编辑，在server { }区域里（最好是闭合符前面起一行）添加下列代码即可:
      add_header "X-UA-Compatible" "IE=Edge, chrome=1";

  • cache-control(指定请求和响应遵循的缓存机制):
    1. 用法1：指导浏览器如何缓存某个响应以及缓存多长时间
      content具体参数如下：
      1. no-cache: 先发送请求，与服务器确认该资源是否被更改，如果未被更改，则使用缓存。
      2. no-store: 不允许缓存，每次都要去服务器上，下载完整的响应。（安全措施）
      3. public : 缓存所有响应，但并非必须。因为max-age也可以做到相同效果
      4. private : 只为单个用户缓存，因此不允许任何中继进行缓存。（比如说CDN就不允许缓存private的响应）
      5. maxage : 表示当前请求开始，该响应在多久内能被缓存和重用，而不去服务器重新请求。例如：max-age=60表示响应可以再缓存和重用 60 秒。
    2. 用法2：禁止百度自动转码
      用于禁止当前页面在移动端浏览时，被百度自动转码。虽然百度的本意是好的，但是转码效果很多时候却不尽人意。所以可以在head中加入下列代码，就可以避免百度自动转码了
      <meta http-equiv="Cache-Control" content="no-siteapp" />

  • expires(网页到期时间): 用于设定网页的到期时间，过期后网页必须到服务器上重新传输

  • refresh(自动刷新并指向某页面): 网页将在设定的时间内，自动刷新并调向设定的网址

  • Set-Cookie(cookie设定): 如果网页过期。那么这个网页存在本地的cookies也会被自动删除

使用社交媒体（Open Graph、Twitter Cards 和 Schema.org）

随着社交网络的不断发展，meta标签被赋予新的功能,用了meta property=og标签，就是你同意了网页内容可以被其他社会化网站引用等，目前这种协议被SNS网站如Fackbook、renren采用。
Facebook的Open Graph允许你指定你的内容如何在用户时间表上显示。这些标签可以让你检查你的数据是使用Insights如何共享在Facebook上。

1
2
3
<meta property="og:title" content="The best site" />
<meta property="og:image" content="link_to_image" />
<meta property="og:description" content="description goes here" />

与Open Graph相似的还有Twitter的Twitter cards(使用name=”twitter:title”或者name=”twitter:url”)以及Google+使用的Schema.org(使用itemscope和itemprop)。Open Graph已变得非常受欢迎，所以大多数社交网络默认都是Open Graph。

借鉴文章：

http://www.w3cplus.com/css/meta-tags-html-basics-best-practices.html
http://www.tuicool.com/articles/A7j2QjF
http://www.cnblogs.com/wangjz1991/p/5326224.html