冠富商务通中文社区

标题: 百度MIP幕后揭秘 附MIP站点快速改造教程 [打印本页]
作者: mlin    时间: 2017-1-9 22:47
标题: 百度MIP幕后揭秘 附MIP站点快速改造教程
前两周去杭州参加了百度的一个沙龙活动，主题是百度MIP和Google AMP。从最近百度和Google的动作看，他们对MIP或AMP（技术上，这两个是一回事）都在大力推广，力度出乎很多SEO的预料。
沙龙上有个对谈环节，参加的有百度MIP项目负责人高磊，携程流量和SEO负责人安琦，九狐科技CEO飞鹰正义，和我。沙龙前，我们几个人一起吃饭，聊的也主要是MIP的事。下面总结一些台上及私下了解到的关于百度MIP的信息。

Google AMP近况

沙龙上我主要介绍了一些Google AMP的发展情况。
Google第一次公布AMP项目是去年（2015年）10月。和很多Google的小项目一样，当时并没有引起太大注意。我自己根本不记得有这么个东西，直到2016年2月，Google在新闻搜索的顶部轮播图中返回AMP结果，我才注意到有这么个东西。一般来说，进入搜索结果的东西，不得不关注了。
不过还是没引起太大重视，至少我没重视，因为当时的AMP只限于新闻页面，只限于轮播图中。我也不可能做新闻网站，不大关心。
2016年8月，Google公布AMP将应用于所有类型的页面和搜索，不再限于新闻。这时才真正引起很多SEO们的关注。公布这个消息时，AMP页面还没有出现在真实用户的普通搜索中，但Google给了一个demo地址，在demo上搜索是能看到AMP页面的样子的。我在8月16号的Google AMP帖子中有demo抓图。
本来以为从demo到实际上线要过一段比较长的时间，没想到9月20号开始，AMP页面全面出现在搜索结果中。现在用手机在Google搜索，已经可以大量看到AMP页面，如下图，第二个结果，是我这个博客上的AMP页面，描述前面有个闪电标志和AMP字样：

Google前不久取消了移动友好页面的Mobile Friendly标志，看来是为了给AMP标志让路。
据Google AMP官方博客10月7号帖子介绍，已经有70万域名使用AMP页面，Google索引了6亿AMP页面。现在应该更多了。
我在参加沙龙前随机搜索了大概30个关键词，80%的关键词在前两页出现AMP页面，而前两页结果中有差不多10%的AMP页面，这个比例应该超出了AMP页面占所有页面的比例，也就是说，AMP页面在移动搜索中排名表现高于平均。
虽然一般网站移动流量主要还是来自非AMP页面，但有网站报道，新发布的页面，来自AMP页面的流量是非AMP页面的两倍。Google介绍了一些案例网站，使用AMP后效益很大：
这些数字挺吓人的，不是个位数增长，最低都是20%。
另外，Google开始用AMP页面替换APP内容。Google用了2年时间研究索引APP中的内容，教APP开发人员怎样有利于Google索引APP中的内容，并且在搜索结果中返回APP内容挺长时间了。现在，如果网站有AMP和APP两个版本的相同的内容，Google将返回AMP内容，而不是APP内容。
百度为什么不采用AMP?

AMP其实是个开源项目，并不是Google专用。百度从Google公布AMP就很关注，也认为是移动搜索的正确方向，而且还与Google AMP项目组保持着很紧密的联系。那么百度为什么不直接采用AMP项目标准呢？
正如我在第一篇介绍AMP的帖子中最后说的，估计百度不支持AMP，因为AMP页面需要调用官网的JS库，就技术上说，这根本不是事，但政策上就是个大地雷了。
当然，我没猜到结局，没想到百度另起炉灶，做了一个和AMP一样的东西，从协议及技术层面看，百度MIP和Google AMP是完全一样的。但和Google没关系，这在非技术风险上就大大降低了。有不少站长大概觉得百度MIP就是抄袭AMP嘛，也可以这样说，但还真不是百度那么想抄。
百度为什么这么大力推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，天生就是移动友好的。
主流CMS的MIP插件什么时候出来？

Google AMP之所以这么快被站长接受，短时间大量AMP页面出现，和主流CMS系统的AMP插件已经开发出来有很大关系。像携程这种公司，要采用MIP，显然要自己开发。但对我这种个人站长以及中小企业网站来说，用现成插件还是第一选项。毕竟，数量巨大的网站就是那几个有限的开源CMS做的，官方插件出来，没必要自己费力费时。
目前百度MIP的状况是，很大站长在观望，花时间做MIP值不值得？效益有多大？百度搜索这方面呢，因为没有足够的MIP页面，在搜索结果中无法充分展现MIP的优势。站长在搜索结果中很少看到MIP页面，就更要观望……
如果MIP插件出来，几分钟就做好MIP页面了，站长们何乐而不为呢。那么百度为什么还没有自己开发，或者请人开发，几个主要CMS的MIP插件呢？
除了时间、人员等方面的原因，还有一个大家可能不容易想到的原因：百度MIP与Google AMP部门有良好沟通，双方有计划互相支持对方标准，站长们MIP和AMP做一个就行了，做了AMP，百度也索引来用，做了MIP，Google也索引来用。技术层面，双方谈得很顺利，因为MIP和AMP就是一回事，剩下的是商业和政策层面，需要高层定夺了。所以，MIP团队暂缓插件的开发，希望双方互相承认对方标准，那就不用MIP插件了。
MIP是百度移动排名的一个因素吗？

Google说，AMP并不是排名因素，但从搜索结果看，AMP显然间接影响了排名，因为AMP页面速度比普通页面快得多，而打开速度确定是排名因素。
MIP是百度移动搜索的一个排名因素吗？高磊明确回答，MIP会直接影响排名。
响应式设计与MIP是否有矛盾？

MIP与AMP很少的一个区别是，AMP与原来的移动页面是不同URL的两套页面，并且一一对应，AMP页面用meta标签指定对应的原移动页面，移动页面也指定对应的AMP页面。MIP允许不存在对应的移动页面，或者说，MIP页面就是自己的对应移动页面。
因此，响应式设计与MIP可能出现潜在矛盾。如果响应式设计的页面直接使用MIP标准，指定自身就是自己的原移动页面，没有独立分开的MIP和移动版两套页面，那么这个响应式设计在PC上怎么处理？MIP本身是移动标准，而响应式设计又是应该同时适用于PC及移动的。
高磊确认，这确实是个矛盾。所以，响应式设计目前的做法还是要把MIP和移动版做成两套URL，和AMP一样。
附：如何快速改造一个MIP站点？入门篇
文/飞鹰正义 本名翁新宝
在进行改造前我们再来回顾一下MIP是什么？能带来哪些收益？
简单来说MIP是由百度推出的一套移动网页开放性标准，直白点说就是百度为了进一步提高用户体验进而推出的一系列规范标准，站长参与MIP改造计划能够与百度共同获得一定的收益。
从目前看来站长朋友改造MIP站点除了获得收录排序等潜在优势外，可以解决绝大部分站点因加载慢、展现慢等劣势。虽然现在大部分站点解决了PC站点的加载速度，但因移动端的特性很多站点在移动端的全局加载并非能够达到最佳状态，那么通过改造MIP Cache就能够缓存你的页面资源！让你免费使用与百度搜索引擎一样的CDN，你说是不是够叼？
言归正传，我们来快速的改造，将原本的移动站点改造成为MIP站点。
一、  改造前期准备和注意事项
1.首先你必须得有移动站点（当然你也可以完全重新开发MIP站）；
2.你可以选择直接将原先的移动站点直接改成MIP站，也可以单独在做一套MIP站点与移动站并存。
3.复杂的页面暂不建议MIP改造，目前支持资讯、图文类支持已较好，若功能较为复杂的建议自定义组件或等待MIP项目小组开发。
4.改造需具备一定的html知识，改造MIP教程请按照教程来，特别注意大小写，建议全局小写。
二、 详细改造流程
我们从一个html页面的上下顺序一步步改造，只要按照本文章内的一步步来，即可完成Mip改造。
1. Doctype改造
1.1打开你的模板或代码文件看第一行，不出意外的话是这么一句：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
也有可能是这么一句：
<!DOCTYPEhtml>
无论是那句记住第一句一定是：<!DOCTYPEhtml>
2. <Html>标签改造
2.1 完成第一步后，代码往下看，将：
<htmlxmlns="http://www.w3.org/1999/xhtml">
或：<htmllang="en">
直接改成：<html mip> 注意大小写
3.Head部分改造
3.1 <head>标签必须是完全小写。
3.2 页面的编码必须是utf-8，修改声明为：<metacharset="utf-8">
3.3页面中加入<metaname="viewport"content="width=device-width,minimum-scale=1,initial-scale=1">
3.4   页面中加入MIP专用样式文件< linkrel="stylesheet" type="text/css"href="https://mipcache.bdstatic.com/static/mipmain-v0.0.1.css" >
3.5   这里需要告诉搜索引擎改页面对应的标准html页面地址，如果存在则标识<linkrel="standardhtml" href="https://www.baidu.com"> 其中href值https://www.baidu.com修改成为与当前mip页面相对应的标准页面（移动页）url地址。如果只有mip页面没有相对应的标准页面则标识为：<linkrel="standardhtml" href="https://www.baidu.com"> 其中的href值为当前页面地址。
4.Body内改造
4.1首先<body>标签必须是小写的；
4.2加入MIP专用JS文件：<script src="https://mipcache.bdstatic.com/static/mipmain-v0.0.1.js"></script>
4.3   常见标签替换表



替换成
备注
<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

禁止使用


5.使用MIP Cache注意事项
5.1一般Cache图片、样式、脚本，做完上述4步后，建议修改资源地址为相对地址；
5.2Cache的内容需要更新需要通过MIP数据提交中的更新数据接口，把更新的url链接推送过去，等待百度更新。
三、其他注意事项
3.1 本文旨在快速将移动站点改造成MIP站点，部分遗漏部分功能详细见https://www.mipengine.org。
3.2 除了上述这些需求外，一部分站点可能需要用到组件，里面包含了目前来说支持的一部分组件，后续我在继续讲解组件的使用方法，因对js引用的限制，我简单举例说明一下使用百度统计该如何实现：
3.2.1 引用https://mipcache.bdstatic.com/static/v0.1/mip-stats-bidu.js 放在</body>前。
3.2.2 去百度统计工具查看统计JS代码

3.2.3 获取画框部分token，在js引用代码前放入代码：<mip-stats-bidutoken="02890d4a309827eb62bc3335b2b28f7f"></mip-stats-bidu>并将token值换成你统计代码内的token值。
3.3 上述步骤做完mip站点改造基本结束，我们在mip页面标识了标准页面的地址，同样为了加速收录我们也需要在我们标准移动页面标识该页面相对应的mip页面，代码如下：<linkrel="standardhtml" href="改成该页面对应的mip页面地址">
3.4 最后我们做完了mip页面建议大家都做一下数据推送，会有意想不到的效果！
注：相关网站建设技巧阅读请移步到建站教程频道。



欢迎光临 冠富商务通中文社区 (http://gu1vhwx.nat.ipyingshe.com/news/) Powered by Discuz! 3.0