最近对网站进行优化，对一些常用的一些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="/usr/uploads/2019/01/571586853.jpg" />
<!--
* 当前页面的文章图片的地址
* 系统会根据之前的网址缓存图片，除非网址更改，否则不会更新图片。
-->
<!--定义og协议当前略缩图地址” -->
<meta property="og:image:secure_url" content="/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="/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": ["/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>
评论已关闭