mip改造详解 mip模板开发教程
百度MIP在刚刚推出的时候遭到了很多业内人士的质疑和否定,两年过去了,事实证明百度mip移动网页加速器的价值得到了体现,绝大多数网站在使用了mip技术之后都获得了丰厚的收益,那么MIP到底是如何给网站带来直接的收益呢?
众所周知,mip站点的打开速度是极快的,一旦mip改造成功,在搜索结果页出现了MIP闪电图标,那么网页都是秒开,mip站点相对普通移动网页的排名更有优势,一个MIP站点如果基础工作做好了,基本上可以做到秒排名。效果如下图所示:
熊掌号收录的mip效果
常规MIP网页的收录效果
mip站点在收录和排名上具有得天独厚的优势,这点已经毋庸置疑了,如果你也想让你的站点在搜索引擎上更容易获取排名,那么我们就需要改造现有网页为MIP页面,或者重新开发一套MIP模板与现有移动站点并存。下面,我们先来改造mip吧!改造mip需具备一定的HTML识别能力,复杂的页面不建议进行MIP改造。那么我就开始吧:
MIP改造
2、MIP改造教程(mip官方博客)
常规修改的几个点:在<html>标签中加入mip属性、添加meta标签(meta-viewport)、替换百度指定的JS和CSS文件、添加Canonical 标签、图片替换为mip专用标签。
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 校验工具 保证代码规范。】