前面的文章中我们陆续讲了什么是MIP,及MIP的浸染,本日连续谈谈MIP的干系话题。
那么,如何使手机站网页合乎MIP网页规范,可紧张从以下几个方面改造:
一、头部利用规范
页面起始标签利用 <!doctype html> 。
<html> 标签必写且唯一,同时必须存在 mip 属性,即:<html mip> 。
<head> 标签必写且唯一,其父元素必须是 <html> 标签。
<body> 标签必写且唯一,其父元素必须是 <html> 标签。
必须在 <head> 标签中包含字符集声明 <meta charset=\公众utf-8\"大众> ,不区分大小写,同时页面字符集必须利用 UTF-8 。
必须在 <head> 标签中包含 viewport 设置标签 <meta name=\"大众viewport\"大众 content=\公众width=device-width,initial-scale=1\"大众> ,个中 initial-scale=1 ,同时推举包含 minimum-scale=1 。
必须在 <head> 标签中包含 <link rel=\公众stylesheet\"大众 type=\"大众text/css\"大众 href=\"大众https://c.mipcdn.com/static/v1/mip.css\"大众> 。
必须在 <head> 标签中包含 <link rel=\"大众canonical\公众 href=\"大众http(s)://example.com\公众> 。
必须在 <body> 标签中包含 <script src=\"大众https://c.mipcdn.com/static/v1/mip.js\"大众></script> ,如果包含在 <head> 标签中则须增加 async 属性。
二、给页面添加json数据示例:
<script type=\"大众application/ld+json\"大众>{
\"大众@context\"大众: \"大众https://ziyuan.baidu.com/contexts/cambrian.jsonld\"大众,
\"大众@id\"大众: \公众http://m.0460.com/view/204254.html\公众,
\"大众appid\公众: \"大众1597528186091083\"大众,
\"大众title\公众:\公众0460网站之家移动版\"大众,
\公众description\"大众: \公众网站百科移动版为您分享:如何自动同步头条号、微信"大众年夜众号、爱奇艺号的文章到百家号?进入百家号个人中央页面,点击页面左侧工具栏下的“内容助手”。\"大众,
\"大众pubDate\公众: \公众2018-05-01T16:46:00\"大众
}</script>
三、可以根据页面实际情形,利用MIP办法,在页面中添加关注按钮。让用户在浏览您的页面时,通过关注按钮成为您的粉丝。(可选)提示:MIP页面添加关注代码后,无法即时看到效果,当搜索结果页涌现闪电标识时,即可查看关注组件效果。
添加关注功能代码(强烈推举)
引入熊掌号MIP组件的SDK
<script src=\"大众https://c.mipcdn.com/extensions/platform/v1/mip-cambrian/mip-cambrian.js\公众></script>
在页面mip.js代码<script src=\"大众https://c.mipcdn.com/static/v1/mip.js\"大众></script>之后、</body>标签前添加代码
利用熊掌号MIP组件
<mip-cambrian site-id=\公众1597528186091083\"大众></mip-cambrian>
在页面<body>标签后添加代码
把稳:site-id为熊掌号唯一ID,请勿做任何修正,否则无法正常展现。
建议:紧挨<body>标签添加,能够得到更好的体验。
四、页面元素利用规范(大部分可选)MIP-HTML 禁止利用对页面性能以及安全有较大影响的标签,同时也规定了元素的利用办法。
标签利用范围备注
<img>禁止利用需更换为 <mip-img>
<video>禁止利用需更换为 <mip-video>
<audio>禁止利用需更换为 <mip-audio>
<iframe>禁止利用需更换为 <mip-iframe>
<form>禁止利用需更换为 <mip-form>
<frame>禁止利用
<frameset>禁止利用
<object>禁止利用
<param>禁止利用
<applet>禁止利用
<embed>禁止利用
<script>限定利用禁止利用 <script> 不包括以下两种场景:
src 属性存在
type 必须 text/javascript 、application/javascript 或 type 不存在(即没有 type 属性)
src 必须是 https 或 // 开头
src 必须是 MIP 域名,否则禁止利用
如果在 <head> 中,必须加 async 属性
src 属性不存在
type 必须是 application/json 或 application/ld+json
script 不逼迫大小写,不区分单双引号
script 父节点不能是 template
<style>更换为 <style mip-custom>只能在 <head> 标签中利用一次
<svg>许可利用
<button>许可利用
<link>许可利用
<link> 必须在 <head> 中
必须存在 rel=\"大众miphtml\公众 或 rel=\"大众canonical\"大众 的 <link> 标签
拥有 rel=\"大众miphtml\公众 或 rel=\"大众canonical\"大众 的标签之间或自身不能重复
如果 rel=\"大众miphtml\"大众 或 rel=\"大众canonical\"大众 ,则 href 必须以 https 、http 或 // 开头
如果非 rel=\"大众miphtml\"大众 或 rel=\"大众canonical\公众 ,则 href 必须以非 / 开头(除 //)
注:支持引入外链 CSS
<a>许可利用
href 属性必填,同时其值不可以 href=\公众javascript:\"大众
MIP 页之间跳转推举利用 <a data-type=\"大众mip\公众>
<source>许可利用其父元素必须是 <mip-video>、<mip-audio>、<picutre>,其他均不可
<base>许可利用
不能存在多个
必须在 <head> 标签中
属性必须存在 target 或 href 属性之一
target 必须为 _top 、_self 或 _blank
href 必须 /
input elements许可利用
包括: <select> 、<option> 、 <textarea> 、<input>
父元素必须是 <mip-form>
<source> 的 src 必须存在且非 / 开头的相对路径
自定义标签
mip-img
属性必填备注
src否属性非空
srcset否属性非空
把稳:mip-img 必须存在 src 或 srcset 属性之一
mip-pix
属性必填备注
src是src 必须因此 http(s) 或 // 开头的地址
mip-video
属性必填备注
src是对付不包含 <source> 后代节点的 <mip-video> 标签,src 属性是逼迫的
mip-carousel
属性必填备注
width是width 是 1-4 位的数字
height是height 是 1-4 位的数字
mip-iframe
属性必填备注
width是width 是 1-4 位的数字
height是height 是 1-4 位的数字
mip-appdl
属性必填备注
tpl是值为 imageText 或 noneImg
src是如果 tpl 为 imageText ,src 必须为 http(s) 开头,其他场景无限制
texttip是非空
mip-audio
属性必填备注
src是非相对路径,即 / 开头的路径
mip-stats-bidu
属性必填备注
token是非空
mip-form
属性必填备注
method否值为 get 或 post
url是必须是 http(s) 或 // 开头的地址
mip-link
属性必填备注
href是值为非 javascript:
mip-ad && mip-embed
属性必填备注
type是-
mip-vd-baidu
属性必填备注
src是src 必须是 http(s) 或 // 开头
title是非空
poster是非空
template
属性必填备注
type是-
HTML 属性
MIP-HTML 中所有 on 开头的属性都不许可利用,如:onclick,onmouseover 。
MIP-HTML 中许可利用 on 属性。
MIP-HTML 中不许可利用 style 属性。
自定义样式利用规范
出于性能考虑,HTML 中不许可利用内联 style ,所有样式只能放到 <head> 的 <style> 标签里。
精确
<head>
<style mip-custom>
p { color: #00f;}
</style>
</head>
<body>
<p>Hello World!</p>
</body>
缺点
<p style=\公众color:#00f;\"大众>Hello World!</p>
MIP网页规范检测工具MIP页面会有严格的规范校验,不许可存在任何校验不通过的问题存在。
好了,页面整改完成后,可通过官方供应的MIP网页规范检测工具去检测一下了。
MIP网页规范检测工具网址:https://www.mipengine.org/validator/validate
当然,也可通过百度熊掌号供应的在线检测工具进行检测。
如果网页仍有不合规范之处,也不用焦急,按照提示一步步修正就可以了。更多MIP方面的问题互换,可通过文章底部给我留言,我将逐一答复,祝您建站愉快!