HTMl综合各大网站谈谈Meta标签和meta property=og标签含义

看看国内一些网站头部meta的设置：

1.天猫首页

<meta charset="utf-8"/>
<meta name="renderer" content="webkit"/>
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<meta name="spm-id" content="875.7931836/B"/>
<meta name="format-detection" content="telephone=no">
<meta name="format-detection" content="date=no">
<meta name="format-detection" content="address=no">
<meta name="keywords" content="商城,网上购物,网购,进口食品,美容护理,母婴玩具,家用电器,手机数码,家居生活,服饰内衣,营养保健,钟表珠宝,饰品箱包,汽车生活,图书音像,礼品卡"/>
<meta name="description" content="天猫，中国线上购物的地标网站，亚洲超大的综合性购物平台，拥有10万多品牌商家。每日发布大量国内外商品！正品网购，上天猫！天猫千万大牌正品,品类全，一站购，支付安全，退换无忧！理想生活上天猫!"/>
<meta property="og:title" content="天猫">
<meta property="og:type" content="website">
<meta property="og:url" content=" https://www.tmall.com/">
<meta property="og:image" content=" https://img.alicdn.com/tfs/TB1MaLKRXXXXXaWXFXXXXXXXXXX-480-260.png">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />

2。京东首页

<meta charset="UTF-8">
<meta name="description" content="京东JD.COM-专业的综合网上购物商城，为您提供正品低价的购物选择、优质便捷的服务体验。商品来自全球数十万品牌商家，囊括家电、手机、电脑、服装、居家、母婴、美妆、个护、食品、生鲜等丰富品类，满足各种购物需求。" />
<meta name="Keywords" content="网上购物,网上商城,家电,手机,电脑,服装,居家,母婴,美妆,个护,食品,生鲜,京东" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="renderer" content="webkit" />
<meta name="google-site-verification" content="4vmYcfLX0KWi82fvht-HAux15inXSVGVQ0tnUZqsdqE" />

3.优酷首页

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="data-spm" content="a2ha1">
    <meta name="title" content="优酷-这世界很酷" />
    <meta name="keywords" content="视频,视频分享,视频搜索,视频播放" />
    <meta name="description" content="视频服务平台,提供视频播放,视频发布,视频搜索,视频分享" />
    <meta name="google-site-verification" content="F2zYXuMVH2X76NeYEdAiGokv0QFtgOB1ZgCSZPglQbs" />           
    <meta name='aplus-auto-exp-visible' content='0.6'>
    <meta name='aplus-auto-exp-duration' content='400'>
    <meta name='aplus-auto-exp' content='[{"logkey":"/yt/show.index.module",
    "tag":"a","filter":"data-spm","props":["data-spm","data-scm","data-trackinfo"]},                {"logkey":"/yt/webshow.index.module","tag":"div","filter":"name=m_pos","props":["id"]}]'>
    <meta name='aplus-auto-clk' content='[{"logkey":"/yt/click.index.module","cssSelector":"body a","props":["data-spm","data-scm","data-trackinfo","mid"]}]'>

4.网易首页

<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<meta name="google-site-verification" content="PXunD38D6Oui1T44OkAPSLyQtFUloFi5plez040mUOc" />
<meta name="baidu-site-verification" content="oiT8OEfzes" />
<meta name="360-site-verification" content="527ad00f66a93c31134d6a20b2246950" />
<meta name="shenma-site-verification" content="12c2d7067c72735f0bd75c8dcd26b0d8_1509937417"/>
<meta name="sogou_site_verification" content="tCLG1xJc76"/>
<meta name="model_url" content="http://www.163.com/special/0077rt/index.html" />
<title>网易</title>
<base target="_blank" />
<meta name="Keywords" content="网易,邮箱,游戏,新闻,体育,娱乐,女性,亚运,论坛,短信,数码,汽车,手机,财经,科技,相册" />
<meta name="Description" content="网易是中国领先的互联网技术公司，为用户提供免费邮箱、游戏、搜索引擎服务，开设新闻、娱乐、体育等30多个内容频道，及博客、视频、论坛等互动交流，网聚人的力量。" />
<meta name="robots" content="index, follow" />
<meta name="googlebot" content="index, follow" />

5.搜狐首页

<meta name="Keywords" content="搜狐,门户网站,新媒体,网络媒体,新闻,财经,体育,娱乐,时尚,汽车,房产,科技,图片,论坛,微博,博客,视频,电影,电视剧"/>
<meta name="Description" content="搜狐网为用户提供24小时不间断的最新资讯，及搜索、邮件等网络服务。内容包括全球热点事件、突发新闻、时事评论、热播影视剧、体育赛事、行业动态、生活服务信息，以及论坛、博客、微博、我的搜狐等互动空间。" />
<meta name="shenma-site-verification" content="1237e4d02a3d8d73e96cbd97b699e9c3_1504254750">
<meta name="data-spm" content="smpc">
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>
<meta name="renderer" content="webkit"> 
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1" />

通过一些主流网站对于meta的设置，可以看到常用的有，X-UA-Compatible、keywords、description。
对于正在写web端的，可以根据项目情况参考以上meta设置的方法
 

meta设置的方法，标签的属性

meta标签有两个属性： http-equiv和name。我将对这两个属性进行简单整理。

1、http-equiv

用法：<meta http-equiv="参数" content="参数描述" />

http-equiv属性主要有以下几个参数：
1、Content-Type：用来设定网页字符集，说明网页制作使用的文字和语言，浏览器会据此调用相应的字符集，又如英文是ISO-8859-1字符集，还有BIG5、utf-8、shift-Jis、Euc、Koi8-2等字符集；。举例：

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />   //旧的HTML，不推荐
<meta charset="UTF-8" >   //HTML5设定网页字符集的方式

2、X-UA-Compatible：用于告知浏览器以何种版本渲染当前页面。举例：

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />   //优先使用IE最新版本和Chrome

3、pragma：禁止浏览器从本地计算机的缓存中访问页面内容。举例：

<meta http-equiv="Pragma" content="no-cache" />  

4、refresh：让网页在一定的时间内刷新自己，或者在多长时间后跳转到其他网页。举例：

 <meta http-equiv="refresh" content="30" >   //30s后刷新自己
 <meta http-equiv="Refresh" contect="n;url=http://yourlink">定时让网页在指定的时间n内，跳转到页面http://yourlink；

5、expires：指定网页的过期时间，过期后必须重新请求服务器。举例：

 <meta http-equiv="Expires" contect="Mon,12 May 2001 00:20:00 GMT">可以用于设定网页的到期时间，一旦过期则必须到服务器上重新调用。需要注意的是必须使用GMT时间格式；

6、Cache-Control：避免百度打开网页时可能会对其进行转码（比如贴广告等）。举例：

<meta http-equiv="Cache-Control" content="no-siteapp" />   //先发送请求，与服务器确认该资源是否被更改，未被更改则使用缓存

7.Pragma：用于设定禁止浏览器从本地机的缓存中调阅页面内容，设定后一旦离开网页就无法从Cache中再调出；

<meta http-equiv="Pragma" contect="no-cache">

 

以上就是对http-equiv的常用参数的介绍。http-equiv的参数还有很多，不常用，写在这里只是为了提醒自己http-equiv可以实现什么，具体需要时再详细研究。

2、name

用法：<meta name="参数" content="参数描述" />

name属性主要用于描述网页，如网页关键字、叙述等。用于SEO优化。

1、keywords：用户告诉搜索引擎你的网页关键字是什么，看各大网站就知道用处。举例：

<meta name="keywords" content="博客，前端，meta" />

2、description：网站内容描述，用来告诉搜索引擎你网站的主要内容。举例：

<meta name="description" content="前端博客知识分享" />

3、author：标注网页的作者。举例：

<meta name="author" content="Caroline，xx@xxxx.com" />

4、viewport：用于移动端显示网页，将网页宽度设置为视口宽度，并且可以设置缩放比例、是否允许用户缩放等。举例：

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"> //用户不能缩放

这个属性较为复杂，我另写了一篇博客进行整理，详见viewport用法。

5、renderer:双核浏览器的渲染方式，用于指定双核浏览器默认以何种方式渲染页面。举例：

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

6、referrer：Referrer Policy规定了五种Referrer策略：No Referrer、No Referrer When Downgrade、Origin Only、Origin When Cross-origin、Unsafe URL；其实我前段时间无意中用了一次；我用网络图片后首次打开页面总是加载不了！显示“403”；后来发现用<meta name="referrer" content="no-referrer" />设置在头部就解决了！

no-referrer   任何情况下都不发送referer

no-referrer-when-downgrade   //在同等安全等级下（例如https页面请求https地址），发送referer，但当请求方低于发送方（例如https页面请求http地址），不发送referer

origin  //仅仅发送origin，即protocal+host

origin-when-cross-origin  //跨域时发送origin

same-origin   //当双方origin相同时发送

strict-origin  //当双方origin相同且安全等级相同时发送

unfafe-url   //任何情况下都显示完整的referer
举例：

<meta name="referrer" content="no-referrer|origin|no-referrer-when-downgrade|origin-when-crossorigin|unsafe-url" />

7、robots(机器人向导)

说明：robots用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。

content的参数有all,none,index,noindex,follow,nofollow。默认是all。

举例：

1	<meta name="robots" content="none">

具体参数如下：

信息参数为all：文件将被检索，且页面上的链接可以被查询；

信息参数为none：文件将不被检索，且页面上的链接不可以被查询；

信息参数为index：文件将被检索；

信息参数为follow：页面上的链接可以被查询；

信息参数为noindex：文件将不被检索，但页面上的链接可以被查询；

信息参数为nofollow：文件将被检索，但页面上的链接不可以被查询

其他：

<meta name="format-detection" content="telephone=no" /> //忽略数字自动识别为电话号码
<meta name="format-detection" content="email=no" /> //忽略识别邮箱
<meta name="revisit-after" content="7days">revisit-after代表网站重访,7days代表7天，依此类推。
<meta name="copyright" content="信息参数">meta标签的copyright的信息参数，代表说明网站版权信息。
<meta name="generator" content="信息参数"/>meta标签的generator的信息参数，代表说明网站的采用的什么软件制作。

3.Meta Property=og；

Meta Property=og标签是什么呢?
og是一种新的HTTP头部标记，即Open Graph Protocol：

The Open Graph Protocol enables any web page to become a rich object in a social graph.+ n3 }

即这种协议可以让网页成为一个“富媒体对象”。
用了Meta Property=og标签，就是你同意了网页内容可以被其他社会化网站引用等，目前这种协议被SNS网站如Fackbook、renren采用。
SNS已经成为网络上的一大热门应用，优质的内容通过分享在好友间迅速传播。为了提高站外内容的传播效率，2010年F8会议上Facebook公布 了一套开放内容协议(Open Graph Protocol)，任何网页只要遵守该协议，SNS就能从页面上提取最有效的信息并呈现给用户。