-
07
Jan简单来说MIP是由百度推出的一套移动网页开放性标准，直白点说就是百度为了进一步提高用户体验进而推出的一系列规范标准，站长参与MIP改造计划能够与百度共同获得一定的收益。 - 上海网站制作 , 上海高端网站建设
简单来说MIP是由百度推出的一套移动网页开放性标准，直白点说就是百度为了进一步提高用户体验进而推出的一系列规范标准，站长参与MIP改造计划能够与百度共同获得一定的收益。
百度为什么这么大力推MIP？只是因为速度？MIP或AMP页面速度很快，确实是秒开。Google工程师在10月初的SMX大会上透露过，AMP页面的下载时间中位数是0.7秒。人眨眼的时间是0.3-0.4秒。非AMP页面下载时间中位数是22秒。百度MIP页面碰到的比较少，但确实见到过几个，速度也很快，不过没有百度官方数据。但设计良好的移动版本也可以把页面做得很小，再加上CDN，速度也可以大大提高，达到MIP水平也不是不可能。而且移动SEO这两年是热门话题，站长们优化移动版本已经有一定经验了。那么为什么百度这么大力推MIP？只是为了速度吗？MIP项目负责人高磊的回答提到一个重要的考虑角度：生态。虽然百度推动移动SEO很长时间了，各个城市组织SEO们开研讨会，但网站移动化的进程并不尽如人意，很大网站还是不知道该怎么做移动SEO。移动友好有时候也是个不太容易解释得清楚的问题。所以百度的想法是，不如另起炉灶看看效果，推动MIP，只要采用了MIP，天生就是移动友好的。
从目前看来站长朋友改造MIP站点除了获得收录排序等潜在优势外，可以解决绝大部分站点因加载慢、展现慢等劣势。虽然现在大部分站点解决了PC站点的加载速度，但因移动端的特性很多站点在移动端的全局加载并非能够达到最佳状态，那么通过改造MIP Cache就能够缓存你的页面资源！让你免费使用与百度搜索引擎一样的CDN，你说是不是够叼？
上海网站建设浅谈mip制作改造前期准备和注意事项:
你可以选择直接将原先的移动站点直接改成MIP站，也可以单独再做一套MIP站点与移动站并存。复杂的页面暂不建议MIP改造，目前对资讯、图文类支持已较好，若功能较为复杂的建议自定义组件或等待MIP项目小组开发。
改造前期准备和注意事项
1.首先你必须得有移动站点（当然你也可以完全重新开发MIP站）；
2.你可以选择直接将原先的移动站点直接改成MIP站，也可以单独在做一套MIP站点与移动站并存。
3.复杂的页面暂不建议MIP改造，目前支持资讯、图文类支持已较好，若功能较为复杂的建议自定义组件或等待MIP项目小组开发。
4.改造需具备一定的html知识，改造MIP教程请按照教程来，特别注意大小写，建议全局小写。
改造需具备一定的html知识，改造MIP教程请按照教程来，特别注意大小写，建议全局小写。
我们从一个html页面的上下顺序一步步改造，只要按照本文章内的一步步来，即可完成MIP改造。
1. Doctype改造
1.1 打开你的模板或代码文件看第一行，将<! DOCTYPE ***>改为<!DOCTYPE html>
2. <Html>标签改造
2.1 完成第一步后，继续修改下一行代码，将： <html xmlns="http://www.w3.org/1999/xhtml">或：<html> 改成：<html mip>注意全部小写
3. Head部分改造
3.1 <head>标签必须是完全小写。
3.2 页面的编码必须是utf-8，修改声明为：<meta charset="utf-8">
3.3 页面中加入<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1">
3.4 页面中加入MIP专用样式文件< link rel="stylesheet" type="text/css" href=">https://mipcache.bdstatic.com/static/v1/mip.css" >
3.5 这里需要告诉搜索引擎改页面对应的标准html页面地址，如果存在则标识<link rel="canonical" href=">https://www.baidu.com"> 其中href值修改成为与当前mip页面相对应的标准页面（移动页）url地址。如果只有mip页面没有相对应的标准页面则标识为：<link rel="canonical" href=">https://www.baidu.com"> 其中的href值为当前页面地址。详细说明
4. Body内改造
4.1 首先<body>标签必须是小写的；
4.2 替换<img>, <style>, <frame>, <form>,< input>, <textarea>, <select>, <option>标签为对应MIP组件标签，具体见官网文档。
4.3 引用MIP-JS 运行环境 <script src= ">https://mipcache.bdstatic.com/static/v1/mip.js"></script>放在页面尾部。
上海网站建设浅谈mip制作5. 使用MIP Cache注意事项
5.1 一般Cache图片、样式、脚本，做完上述4步后，修改资源地址为相对地址或合法绝对地址（以校验工具为准）；
5.2 Cache的内容需要更新需要通过MIP数据提交中的更新数据接口，把更新的url链接推送过去，等待百度更新。
6. 其他组件使用
6.1 除了上述这些需求外，一部分站点可能需要用到组件，官网文档包含了目前支持的所有组件，本文简单举例说明一下使用百度统计该如何实现：
6.2 查找原有百度统计工具查看统计JS代码(可全局查找 var _hmt 关键字)获取token（hm.js?之后的编码），在页面底部，所有script前放入代码：<mip-stats-baidu token="22090d4a309827eb62bc1335b2b28f11（网站统计token值）"></mip-stats-baidu>
6.3 去除原有百度统计工具查看统计JS代码，删除整段js.
MIP模板开发
1、创建 HTML 文件【在 <html> 标签中增加 mip 属性标识、 编码为 utf-8 、 添加 meta-viewport，用于移动端展现。】2、 添加 MIP 运行环境【在 HTML 代码中，添加 MIP 依赖的 mip.js 和 mip.css】
3、添加 MIP 关联标签【 <link rel="miphtml"> 和 <link rel="canonical"> 主要用于告知搜索引擎页面间的关系。】
4、添加样式 【出于速度考虑，建议內联使用 CSS 样式。所有样式写在 <style mip-custom></style> 中，注意：style 标签仅允许出现一次。】
5、替换禁用 HTML 标签 【注意：MIP 十分关注页面速度，也因此禁用了一些引起拖慢速度的 HTML 标签（禁用列表）。】
6、使用 MIP 组件 【警告：出于对代码质量和性能的考虑，MIP 页中不允许自定义 JavaScript 代码。在使用组件时，请注意阅读组件文档，查看组件是否依赖所需脚本。如果依赖，请在 mip.js 之后引入脚本。】
7、预览 【开发完成后，可以使用 MIP 校验工具 保证代码规范。】
常见标签替换表
替换成
备注
<img
<mip-img
<style
<style mip-custom
在head内style只能出现一次，请注意合并
script
不替换
Script标签被列为禁止使用。需要JS部分可看看是否有组件支持。
link
不替换
不允许使用link标签进行样式表的加载
a
不替换
但不可以href="javascript:"，target必须设置为_blank
frame
原则禁止使用
Form
删除该标签
禁止使用
input, textareaa, select, option
禁止使用
响应式设计与MIP是否有矛盾？MIP与AMP很少的一个区别是，AMP与原来的移动页面是不同URL的两套页面，并且一一对应，AMP页面用meta标签指定对应的原移动页面，移动页面也指定对应的AMP页面。MIP允许不存在对应的移动页面，或者说，MIP页面就是自己的对应移动页面。因此，响应式设计与MIP可能出现潜在矛盾。如果响应式设计的页面直接使用MIP标准，指定自身就是自己的原移动页面，没有独立分开的MIP和移动版两套页面，那么这个响应式设计在PC上怎么处理？MIP本身是移动标准，而响应式设计又是应该同时适用于PC及移动的。高磊确认，这确实是个矛盾。所以，响应式设计目前的做法还是要把MIP和移动版做成两套URL，和AMP一样。
- 8285 4851@qq.com
- 166-021-05077
