整理的最详细Html里<head>的 <meta> 标签标签集合

最近对网站进行优化,对一些常用的一些meta属性进行了规划和注释。

其中包括了搜索引擎缩略图,富媒体,OG协议,百度自动收录代码,360自动收录代码等等

基本涵盖了所有需要的功能


<!-- 使用 HTML5 doctype,不区分大小写 -->    
<!DOCTYPE html>    
<html>    
<head>    
<!-- 声明文档使用的字符编码 -->    
<meta charset="utf-8">    
<!-- 优先使用 IE 最新版本和 Chrome -->    
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">    
<!--      
* X-UA-Compatible最好紧跟在head之后,之前不要有任何不标准的标签。    
* 模式Edge 模式告诉 IE 以最高级模式渲染文档,也就是任何 IE 版本都以当前版本所支持的最高级标准模式渲染    
-->    
<!-- 定义页面标题 -->    
<title>「米物智能鼠标垫」评测下小米旗下生态链无线充电电竞鼠标垫 - 蓝卡</title>    
<!--      
* 首页title应该采用网站名称与关键词的组合方式;    
* 所包含的关键词热度越高越好,总指数不应太低;    
* 最长不超过30个汉字,且越短越好;    
* 重要关键词放在开头的靠前位置;    
* 一般建议用英文“,”号,下划线“_"做分隔符,也可以用“|”。    
-->    
<!-- 定义页面最早发布时间-->    
<meta property="article:published_time" content="2015-06-09T10:40:00 +08:00" />    
<!--      
* 内容格式要求符合ISO8601规范的UTC格式    
* 标准格式应当是“YYYY-MM-DDTHH:MM:SS+时区    
* 该字段必选    
* 建议放置在文章标题下方    
-->    
<!-- 定义页面最后修改发布时间-->    
<meta property=”article:modified_time” content=”2015-06-09T10:40:00 +08:00″ />    
<!--      
* 参考published_time的标准    
-->    
<!-- 定义页面类型符合OG协议中的文章作品类型 -->    
<meta property="og:type" content="article"/>    
<!--   
    
* article文章类型 
    
* product商品类型      
* video视频类型    
* audio音频类型    
* website普通网页    
 -->    
<!-- 搜索引擎优化页面描述 -->    
<meta name="description" content="对鼠标垫基本不怎么讲究,目前使用的是某房企赠送的,或者买电脑赠送的DELL、罗技鼠标垫,再好点无非就是用赛睿、雷蛇之流,有段时间对小米的铝合金鼠标垫比较中毒,再往后对黑莓皮质鼠标垫有购买的冲动,..." />    
<!--      
* 每个网页都应有一个不超过 150 个字    
* 准确反映网页内容的描述标签    
 -->    
<!-- 搜索引擎优化页面关键词 -->    
<meta name="keywords" content="米物鼠标垫,小米鼠标垫,鼠标垫,小米,米家,米物" />    
<!--      
* 每个网页应具有描述该网页内容的一组唯一的关键字    
* 允许多个关键字,中间用逗号,隔开。    
 -->    
<!-- 定义网页搜索引擎索引方式 -->    
<meta name="robots" content="index,follow" />    
<!--      
* robotterms是一组使用英文逗号「,」分割的值,通常有如下几种取值:none,noindex,nofollow,all,index和follow。    
* index:告诉搜索引擎抓取这个页面    
* follow:告诉搜索引擎可以从这个页面上找到链接,然后继续访问抓取下去。    
* noindex:告诉搜索引擎不允许抓取这个页面    
* nofollow:告诉搜索引擎不允许从此页找到链接、拒绝其继续访问。    
* 常见组合:可以抓取本页,而且可以顺着本页继续索引别的链接:"index,follow" 简便的写法: "all"  简便的写法:"all"    
 -->    
<!-- 指定权威页面,使得搜索引擎收录更准确。 -->    
<link rel="canonical" href="https://www.lanka.cn/shubiaodian_2374.html" />    
<!--      
* 增加页面权重,利于排名    
* 用于www域名和不加www域名的权重和收录    
* canonical标签就是告诉搜索引擎哪个页面是权威页面    
* Canonical链接标签只能作用于同一个域名所在的网址    
* 该链接标签可用于定义相对地址,也可用于定义绝对地址。但为了保险起见,建议使用绝对地址。    
* 一个网页链向了有canonical标签的页面,会被当作像301转向到这一页的canonical页。    
* 不能跨域名指向,也就是不能指向不同的域名,这点要谨记。    
 -->    
<!-- 链接到层次结构中的顶级资源 -->    
<link rel="index" href="https://www.lanka.cn/" title="蓝卡首页">    
<!--      
* 建议放网站首页地址    
 -->    
<!-- 定义og协议样式的当前页面标题”  -->    
<meta property="og:title" content="「米物智能鼠标垫」评测下小米旗下生态链无线充电电竞鼠标垫" />    
<!--      
* 建议与title一致    
 -->    
<!-- 定义og协议样式的当前页面描述” -->    
<meta property="og:description" content="对鼠标垫基本不怎么讲究,目前使用的是某房企赠送的,或者买电脑赠送的DELL、罗技鼠标垫,再好点无非就是用赛睿、雷蛇之流,有段时间对小米的铝合金鼠标垫比较中毒,再往后对黑莓皮质鼠标垫有购买的冲动,..." />    
<!--    
* 建议与title一致    
 -->    
<!-- 定义og协议页面所在网站名称” -->    
<meta property="og:site_name" content="蓝卡" />    
<!--    
* 网站名称    
 -->    
<!--定义og协议页面地址”  -->    
<meta property="og:url" content="https://www.lanka.cn/shubiaodian_2374.html" />    
<!--    
* 当前页面的ur地址    
 -->    
<!--定义og协议当前略缩图地址”  -->    
<meta property="og:image" content="https://www.lanka.cn/usr/uploads/2019/01/571586853.jpg" />    
<!--    
* 当前页面的文章图片的地址    
* 系统会根据之前的网址缓存图片,除非网址更改,否则不会更新图片。    
 -->    
<!--定义og协议当前略缩图地址”  -->    
<meta property="og:image:secure_url" content="https://www.lanka.cn/usr/uploads/2019/01/571586853.jpg" />    
<!--    
* 图片的 https:// 网址 (非本地)    
 -->    
<!--定义og协议当前略缩图类型”  -->    
<meta property="og:image:type" content="image/png">    
<!--    
* 图片的 MIME 类型。image/jpeg、image/gif 或 image/png 中的一个    
 -->    
<!--定义og协议当前略缩图的宽度和高度”  -->    
<meta property="og:image:width" content="200">    
<meta property="og:image:height" content="500">    
<!--    
* 以像素为单位的图片宽度。指定图片的高度和宽度,确保图片在第一次分享时正确加载。    
 -->    
<!--定义文章的作者”  -->    
<meta property="article:author" content="蓝卡">    
<!--    
* 文章的作者,或者编辑名字,或原始出处    
 -->    
<!--定义页面Tag”  -->    
<meta property="article:tag" content="蓝卡,兰卡,lanka,科技媒体,科技产品,移动互联网" />    
<!--    
* 网上没找到相关介绍,我理解为文章的标签,所以调用的是关键词    
* 我采用的是逗号分隔,理论上是每一个标签重复一次。    
 -->    
<!-- 网页作者 -->    
<meta name="author" content="蓝卡" />     
<!--    
* 标注网页的制作者    
* 该文章的撰写者    
 -->    
<!-- 定义页面MAP/MIP地址 -->    
<link rel="amphtml" href="https://www.lanka.cn/amp/shubiaodian.html">    
<link rel="miphtml" href="https://www.lanka.cn/mip/shubiaodian.html">    
<!--    
* 谷歌AMP和百度MIP    
* 加速的移动页面    
* 建议优先支持百度的MIP    
 -->    
<!--  H5手Q分享通用接口-->    
<meta itemprop="name" content="「米物智能鼠标垫」评测下小米旗下生态链无线充电电竞鼠标垫">    
<!--    
* 手机Q的分享标题    
 -->    
<meta itemprop="description" content="对鼠标垫基本不怎么讲究,目前使用的是某房企赠送的,或者买电脑赠送的DELL、罗技鼠标垫,再好点无非就是用赛睿、雷蛇之流,有段时间对小米的铝合金鼠标垫比较中毒,再往后对黑莓皮质鼠标垫有购买的冲动,...">    
<!--    
* 手机Q的分享简介    
 -->    
<meta itemprop="image" content="https://www.lanka.cn/usr/uploads/2019/01/571586853.jpg">    
<!--    
* 手机Q的分享缩略图    
 -->    
<!--  RSS订阅源-->    
<link rel="alternate" type="application/rss+xml" title="蓝卡的订阅" href="https://www.lanka.cn/feed/"/>    
<!-- 设置支持终端 定义网页适合在移动设备和PC上进行浏览 -->    
<!--    
*  PC站:<meta name="applicable-device" content="pc">    
*  手机站:<meta name="applicable-device" content="mobile" />    
*  响应式网页可标识:<meta name="applicable-device"content="pc,mobile">    
 -->    
<!-- 主要用于PC-手机页的对应关系 -->    
<meta name="mobile-agent"content="format=[wml|xhtml|html5]; url=url">    
<!-- 
    
*  [wml|xhtml|html5]根据手机页的协议语言,选择其中一种;    
*  url="url" 后者代表当前PC页所对应的手机页URL,两者必须是一一对应关系。    
 -->    
<!-- 添加 网站浏览器收藏图标 -->    
<link rel=”icon” href=”/favicon.ico” mce_href=”/favicon.ico” type=”image/x-icon”>    
<link rel=”shortcut icon” href=”/favicon.ico” mce_href=”/favicon.ico” type=”image/x-icon”>    
<!-- 添加 360好搜的自动收录代码 -->    
<script>(function(){    
var src = (document.location.protocol == "http:") ? "http://js.passport.qihucdn.com/11.0.1.js?9862c7e7419e4873108655952bce5b43":"https://jspassport.ssl.qhimg.com/11.0.1.js?9862c7e7419e4873108655952bce5b43";    
document.write('<script src="' + src + '" id="sozz"><\/script>');    
})();    
</script>    
<!-- 添加 百度搜索的自动收录代码 -->    
<script>    
(function(){    
var bp = document.createElement('script');    
var curProtocol = window.location.protocol.split(':')[0];    
if (curProtocol === 'https'){    
bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';    
}    
else{    
bp.src = 'http://push.zhanzhang.baidu.com/push.js';    
}    
var s = document.getElementsByTagName("script")[0];    
s.parentNode.insertBefore(bp, s);    
})();    
</script>    
<!-- ~~~~~~~~~~以下为移动端页面新增~~~~~~~~~~ -->    
<!-- 为移动设备添加 viewport,content 参数 -->    
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">     
<!--    
*  优化移动浏览器的显示    
*  width` viewport 宽度(数值/device-width)    
*  height` viewport 高度(数值/device-height)    
*  initial-scale` 初始缩放比例    
*  maximum-scale` 最大缩放比例    
*  minimum-scale` 最小缩放比例    
*  user-scalable` 是否允许用户缩放(yes/no)    
*  缩放比例默认为1,不允许手动缩放    
*  如果不是响应式网站,不要使用initial-scale或者禁用缩放。    
 -->    
<!-- 定义禁止搜索引擎转码 -->    
<meta http-equiv="Cache-Control" content="no-siteapp" />    
<meta http-equiv="Cache-Control" content="no-transform" />    
<!-- 为百度搜索引擎增加的熊掌号 -->    
<script type="application/ld+json">    
{    
"@context": "https://ziyuan.baidu.com/contexts/cambrian.jsonld",    
"@id": "https://www.lanka.cn/shubiaodian_2374.html",    
"appid": "1583665895892177",    
"title": "「米物智能鼠标垫」评测下小米旗下生态链无线充电电竞鼠标垫",    
"images": ["https://www.lanka.cn/usr/uploads/2019/01/571586853.jpg"],    
"description": "对鼠标垫基本不怎么讲究,目前使用的是某房企赠送的,或者买电脑赠送的DELL、罗技鼠标垫,再好点无非就是用赛睿、雷蛇之流,有段时间对小米的铝合金鼠标垫比较中毒,再往后对黑莓皮质鼠标垫有购买的冲动,...",    
"pubDate": "2019-01-09T00:26:00"    
}    
</script>    
<!--    
*  ID一定要修改,自己注册熊掌ID可解决    
*  pubDate的日期和时间一定使用T进行分割    
 -->    
<!-- ~~~~~~~~~~针对IOS设备优化开始~~~~~~~~~~ -->    
<!-- 关闭移动端手机号码识别(iOS) -->    
<meta name="format-detection" content="telephone=no">    
<!-- 添加到主屏后的标题( -->    
<meta name="apple-mobile-web-app-title" content="蓝卡">    
<!--    
*  填写网站名称    
*  添加到主屏后的标题    
*  Web App添加到桌面名字    
 -->    
<!-- 是否启用 WebApp 全屏模式 -->    
<meta name="apple-mobile-web-app-capable" content="yes"/>    
<!--    
*  删除苹果默认的工具栏和菜单栏    
 -->    
<!-- 添加智能 App 广告条 Smart App Banner(iOS 6+ Safari) -->    
<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">    
<!-- 设置苹果工具栏颜色 -->    
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>    
<!--    
*  设置状态栏的背景颜色,只有在 启用 WebApp 全屏模式有效    
*  default 默认值。    
*  black 状态栏背景是黑色。    
*  black-translucent 状态栏背景是黑色半透明。    
*  如果设置为 default 或 black ,网页内容从状态栏底部开始。    
*  如果设置为 black-translucent ,网页内容充满整个屏幕,顶部会被状态栏遮挡。    
 -->    
<!-- 添加图标到主屏幕的图标-->    
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="/lanka/images/icon-57.png">    
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/lanka/images/icon-72.png">    
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="/lanka/images/icon-76.png">    
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/lanka/images/icon-114.png">    
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="/lanka/images/icon-120.png">    
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/lanka/images/icon-144.png">    
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="/lanka/images/icon-152.png">    
<!--    
*  iPhone 和 iTouch,默认 57x57 像素,必须有 
    
 -->    
<!--iOS启动画面-->    
<link rel="apple-touch-startup-image" sizes="2048x1496" href="/lanka/images/icon-2048x1496.png" media="screen and (min-device-width: 1025px) and (max-device-width: 2048px) and (orientation:landscape) and (-webkit-min-device-pixel-ratio: 2)">    
<link rel="apple-touch-startup-image" sizes="1536x2008" href="/lanka/images/icon-1536x2008.png" media="screen and (min-device-width: 1025px) and (max-device-width: 2048px) and (orientation:portrait) and (-webkit-min-device-pixel-ratio: 2)">    
<link rel="apple-touch-startup-image" sizes="1024x748" href="/lanka/images/icon-1024x748.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)">    
<link rel="apple-touch-startup-image" sizes="768x1004" href="/lanka/images/icon-768x1004.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)">    
<link rel="apple-touch-startup-image" sizes="640x920" href="/lanka/images/icon-640x920.png" media="screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)">    
<link rel="apple-touch-startup-image" sizes="320x460" href="/lanka/images/icon-320x460.png" media="screen and (max-device-width: 320)">    
<!--    
*  是用于WebApp,如果没有启用webAPP和全屏模式,启动画面可以去掉    
*  目前IOS有很多分辨率,例如 320x480 640x960 640x1136理论上面已经做了判断,可以满足需求    
 -->    
<!--iOS Web APP中点击链接跳转到Safari 浏览器新标签页的问题-->    
<script type="text/javascript">    
if(("standalone" in window.navigator) && window.navigator.standalone){    
var noddy, remotes = false;    
document.addEventListener('click', function(event) {    
noddy = event.target;    
while(noddy.nodeName !== "A" && noddy.nodeName !== "HTML") {    
noddy = noddy.parentNode;    
}    
if('href' in noddy && noddy.href.indexOf('http') !== -1 && (noddy.href.indexOf(document.location.host) !== -1 || remotes))    
{    
event.preventDefault();    
document.location.href = noddy.href;    
}    
},false);    
}    
</script>    
<!--    
*  搭配添加到主屏、全屏幕代码会非常像一个APP    
*  主要解决点击链接后用默认浏览器访问的问题    
*  每个页面都需要加这个代码    
 -->    
<!-- ~~~~~~~~~~针对IOS设备优化结束~~~~~~~~~~ -->    
<!-- ~~~~~~~~~~针对手机浏览器优化开始~~~~~~~~~~ -->    
<!--QQ浏览器相关设置-->    
<!-- QQ强制竖屏 -->    
<meta name="x5-orientation" content="portrait">    
<!-- QQ强制全屏 -->    
<meta name="x5-fullscreen" content="true">    
<!-- QQ应用模式 -->    
<meta name="x5-page-mode" content="app">    
<!--UC浏览器相关设置 -->        
<!-- UC强制竖屏 -->    
<meta name="screen-orientation" content="portrait">    
<!-- UC强制全屏 -->    
<meta name="full-screen" content="yes">    
<!-- UC应用模式 -->    
<meta name="browsermode" content="application">    
<!-- ~~~~~~~~~~针对手机浏览器优化结束~~~~~~~~~~ -->    
<!-- ~~~~~~~~~~针对Windows 8优化开始~~~~~~~~~~ -->    
<!-- windows phone 点击无高光 -->    
<meta name="msapplication-tap-highlight" content="no">    
<!-- Windows 8 磁贴颜色 -->    
<meta name="msapplication-TileColor" content="#000"/>     
<!--    
*  添加到主屏后 设置状态栏的背景颜色    
<!-- Windows 8 磁贴图标 -->    
<meta name="msapplication-TileImage" content="/Win8.png"/>     
<!--    
*  添加到主屏后的图标    
 -->    
<!-- ~~~~~~~~~~针对Windows 8优化结束~~~~~~~~~~ -->    
<!-- ~~~~~~~~~~针对Android优化开始~~~~~~~~~~ -->    
<!-- 添加到主屏后的图标(Android) -->    
<link rel="icon" sizes="192x192" href="/Android.png">    
<link rel="icon" type="image/png" href="/Android.png">     
<!-- 添加到主屏后-启用 WebApp 全屏模式(Android) -->    
<meta name="mobile-web-app-capable" content="yes">    
<!-- 关闭移动端邮箱识别(Android) -->    
<meta name="format-detection" content="email=no">    
<!-- Android Lollipop 中的 Chrome 39 增加 theme-color meta 标签,用来控制选项卡颜色。 -->    
<meta name="theme-color" content="#db5945">    
<!-- ~~~~~~~~~~针对Android优化结束~~~~~~~~~~ -->    
</head>    
<body>    
</body>    
</html>