前面的文章中我们陆续讲了什么是MIP,及MIP的浸染,本日连续谈谈MIP的干系话题。

那么,如何使手机站网页合乎MIP网页规范,可紧张从以下几个方面改造:

一、头部利用规范

页面起始标签利用 <!doctype html> 。

miphtml规范MIP教程若何使手机站网页相符MIP网页规范 React
(图片来自网络侵删)

<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方面的问题互换,可通过文章底部给我留言,我将逐一答复,祝您建站愉快!