详解

1、元数据和<meta>

元数据是描述以提供关于其余数据的数据，在<meta>中，html document是被描述的数据，meta标签中包括的数据是描述html document的元数据。这些元数据不会在页面中展现，可是会被机器解析。<meta>标签是为了指定页面的描述，关键词，做者，最后一次修改等元数据，也就是说meta标签就是为了让文档的元数据有个安身之所，meta标签是盛放document元数据的地方。

2、 标签属性

1. charset

1) 做用：指定HTML文档的字符编码，通常使用UTF-8

2) 值：character_set

3) 例子：<meta charset="UTF-8">

4) 注意：html5和html4.01在定义charset的时候有所不一样

• HTML 4.01: <meta http-equiv="content-type" content="text/html; charset=UTF-8">
• HTML5: <meta charset="UTF-8">

2. content

1) 做用：给出与http-equiv或name属性相关的值

2) 值：text

3) 例子：<meta name="description" content="Free Web tutorials on HTML and CSS">

4) 注意：若是定义了name或http-equiv属性，则必须定义content属性。 若是没有定义这些内容属性，则不能定义内容属性。

3. http-equiv

1) 做用：为content属性的信息/值提供HTTP header

2) content-type（已过期）
设定页面使用的字符集

<meta http-equiv="content-type" content="text/html; charset='UTF-8'">(非html5)

3) content-language（已过期）
设定主页制做使用的文字语言

<meta http-equiv="content-language" content="zh-CN">

4) Pragma
禁止浏览器从本地计算机的缓存中访问页面内容

＜meta http-equiv="Pragma" content="no-cache"＞

5) expires
指定网页在缓存中的过时时间，一旦网页过时，必须到服务器上从新调阅，时间格式必须是GMT

<meta http-equiv="expires" content="0">
<meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">

6) cache-control
指定请求和响应遵循的缓存机制。共有如下几种用法：

• no-cache: 先发送请求，与服务器确认该资源是否被更改，若是未被更改，则使用缓存。
• no-store: 不容许缓存，每次都要去服务器上，下载完整的响应。（安全措施）
• public : 缓存全部响应，但并不是必须。由于max-age也能够作到相同效果
• private : 只为单个用户缓存，所以不容许任何中继进行缓存。（好比说CDN就不容许缓存private的响应）
• max-age : 表示当前请求开始，该响应在多久内能被缓存和重用，而不去服务器从新请求。例如：max-age=60表示响应能够再缓存和重用 60 秒。

7) refresh
该指令指定：

• 若是content属性只包含一个正整数，则表示该页面从新加载的秒数。
• 若是content属性包含一个正整数，后跟字符串'; url ='，那么表示当前页面XX秒后重定向到另外一个有效的URL。

<meta http-equiv="refresh" content="2；URL=http://www.github.com/"> //意思是2秒后跳转到github

8) X-UA-Compatible
用于告知浏览器以何种版原本渲染页面。

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> //指定IE和Chrome使用最新版本渲染当前页面

4. name

1) 做用：元数据名

2) keywords
为搜索引擎定义keywords关键词

<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

3) description
网页具体内容描述

<meta name="description" content="Free Web tutorials on HTML and CSS">

4) author
定义网页做者

<meta name="author" content="John Doe">

5) refresh
每n秒更新document

<meta http-equiv="refresh" content="30">//每30秒更新document

6) viewport
设置viewport，使您的网站在全部设备上看起来不错viewport详解

<meta name="viewport" content="width=device-width, initial-scale=1.0">
//content="with=device-width"表示网页宽度更随屏幕宽度
//initial-scale=1.0 设置浏览器首次加载页面时的初始缩放级别

7) application-name
定义在网页中运行的应用程序的名称

8) generator
用于标明网页是什么软件作的

9) revisit-after
若是页面不是常常更新，为了减轻搜索引擎爬虫对服务器带来的压力，能够设置一个爬虫的重访时间。若是重访时间太短，爬虫将按它们定义的默认时间来访问。举例：

<meta name="revisit-after" content="7 days" >

10) renderer
renderer是为双核浏览器准备的，用于指定双核浏览器默认以何种方式渲染页面。好比说360浏览器。举例：

<meta name="renderer" content="webkit"> //默认webkit内核
<meta name="renderer" content="ie-comp"> //默认IE兼容模式
<meta name="renderer" content="ie-stand"> //默认IE标准模式

11) robots
robots用来告诉爬虫页面是否须要索引

5. schema

1) 做用：定义 content 属性值的格式

2) 例子： <meta name="revised" content="2017-11-27" scheme="YYYY-MM-DD" >

3) 注意：html5不支持

有关元数据名的具体信息详见https://www.metatags.org/meta_name_keywords

3、 和Open Graph protocol

1. Open Graph protocol介绍

The Open Graph protocol enables any web page to become a rich object in a social graph. For instance, this is used on Facebook to allow any web page to have the same functionality as any other object on Facebook.

Open Graph Protocol使得任何网页成为一个社交网络的“富媒体”对象，好比在Facebook上使用这个功能来容许任何网页与Facebook上的任何其余对象具备相同的功能。
如图：来源于

2. Open Graph protocol元数据

1) og:title
定义内容标题。 它与代码中的传统meta title具备类似的用途。 事实上，若是Facebook在你的页面上没有找到og:title标签，它就会使用meta title。

<meta property=”og:title” content=”Your eye-catching title here” />

2) og:url
定义即将分享的页面的规范url

<meta property=”og:url” content=”http://www.yourdomain.com” />

3) og:type
这是你如何描述你分享的对象的类型：博客文章，视频，图片，或其余。

<meta property=”og:type” content=”website” />

4) og:description
这个元数据描述符与HTML中的meta description很是类似。 这是描述内容的地方，但不是它显示在搜索引擎结果页上，而是显示在Facebook上的连接标题下方。
不像通常的元描述标签，它不会影响你的搜索引擎优化。og:description不限于字符数，但最好使用大约200个字母。 在某些状况下，根据连接/标题/域名，Facebook最多可显示300个字符，但建议200。

<meta property=”og:description” content=”Your entertaining and descriptive copy here, if your meta description is good, use it.” />

5) og:image
在共享网页时显示的图片。

<meta property=”og:image” content=”http://www.yourdomain.com/image-name.jpg” />

7) og:locale
定义语言，默认美式英语

8) og:site_name
若是您正在共享的页面（对象）是更大的网络的一部分

9) og:audio or og:video
添加额外的音频或视频文件

10) fb:app_id
用于连接Facebook应用程序（例如，FB评论）与对象

3. twitter cards

open graph protocal来源于https://blog.kissmetrics.com/open-graph-meta-tags/