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

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_40916042/article/details/88387367

看看国内一些网站头部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就能从页面上提取最有效的信息并呈现给用户。

 

 

展开阅读全文

没有更多推荐了,返回首页