| 专注SEO、SEM、百度排名、快速提升权重、关键字优化、网络推广，seo莫然可以分享移动手机端SEO知识!免费提供网站优化诊断。 |
| 专注SEO、SEM、百度排名、快速提升权重、关键字优化、网络推广，seo莫然可以分享移动手机端SEO知识!免费提供网站优化诊断。 |
| 莫然博客是山东省最主流，最具人气的莫然seo博客频道。专注SEO、SEM、百度排名、快速提升权重、关键字优化、网络推广，seo莫然可以分享移动手机端SEO知识!免费提供网站优化诊断。 |
MIP（MobileInstantPages-移动网页加速器）主要用于移动端页面加速。
这篇文档将带你快速创建一个MIP页面。
1.创建HTML文件
首先创建一个标准的HTML文件，注意：
•在<html>标签中增加mip属性标识。
•编码为utf-8。
•添加meta-viewport，用于移动端展现。
<!DOCTYPEhtml>
<htmlmip>
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width,minimum-scale=1,initial-scale=1">
<title>HelloWorld</title>
</head>
<body>
<h1>HelloWorld!</h1>
</body>
</html>
2.添加MIP运行环境
在HTML代码中，添加MIP依赖的mip.js和mip.css。
<!DOCTYPEhtml>
<htmlmip>
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width,minimum-scale=1,initial-scale=1">
<linkrel="stylesheet"type="text/css"href="https://c.mipcdn.com/static/v1/mip.css">
<title>HelloWorld</title>
</head>
<body>
<h1>HelloWorld!</h1>
<scriptsrc="https://c.mipcdn.com/static/v1/mip.js"></script>
</body>
</html>
3.添加MIP关联标签
<linkrel="miphtml">和<linkrel="canonical">主要用于告知搜索引擎页面间的关系。添加关联标签后，MIP页的会继承原页面(移动端)的点击权重，同时MIP页将作为搜索引擎的首选导流页面。
使用规则：
•<linkrel="miphtml">在移动端页面（H5）使用，指向对应内容的MIP页，方便搜索引擎发现对应的MIP页。
•<linkrel="canonical">在MIP页中使用，指向内容对应的移动端页面（H5）。
•若没有移动端页面（H5），则指向内容对应的PC页。
•若直接在原链接修改MIP，则Canonical指向当前URL。
<!DOCTYPEhtml>
<htmlmip>
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width,minimum-scale=1,initial-scale=1">
<linkrel="stylesheet"type="text/css"href="https://c.mipcdn.com/static/v1/mip.css">
<!--canonical中的链接优先填写对应内容的移动端页面（H5）地址-->
<linkrel="canonical"href="https://www.example.com/your/path.html">
<title>HelloWorld</title>
</head>
<body>
<h1>HelloWorld!</h1>
<scriptsrc="https://c.mipcdn.com/static/v1/mip.js"></script>
</body>
</html>
4.添加样式
出于速度考虑，建议內联使用CSS样式。所有样式写在<stylemip-custom></style>中，注意：style标签仅允许出现一次。
<!DOCTYPEhtml>
<htmlmip>
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width,minimum-scale=1,initial-scale=1">
<linkrel="stylesheet"type="text/css"href="https://c.mipcdn.com/static/v1/mip.css">
<!--canonical中的链接优先填写对应内容的移动端页面（H5）地址-->
<linkrel="canonical"href="https://www.example.com/your/path.html">
<title>HelloWorld</title>
<stylemip-custom>
h1{color:red;}
</style>
</head>
<body>
<h1>HelloWorld!</h1>
<scriptsrc="https://c.mipcdn.com/static/v1/mip.js"></script>
</body>
</html>
5.替换禁用HTML标签
注意：MIP十分关注页面速度，也因此禁用了一些引起拖慢速度的HTML标签（禁用列表）。例如，<img>标签会引起浏览器的repaint和reflow，为了避免这些，MIP提供了替代标签<mip-img>，详见<mip-img>使用文档。
<!DOCTYPEhtml>
<htmlmip>
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width,minimum-scale=1,initial-scale=1">
<linkrel="stylesheet"type="text/css"href="https://c.mipcdn.com/static/v1/mip.css">
<!--canonical中的链接优先填写对应内容的移动端页面（H5）地址-->
<linkrel="canonical"href="https://www.example.com/your/path.html">
<title>HelloWorld</title>
<stylemip-custom>
h1{color:red;}
</style>
</head>
<body>
<h1>HelloWorld!</h1>
<mip-imglayout="responsive"width="350"height="263"src="https://www.mipengine.org/static/img/mip_logo_3b722d7.png"alt="MIPLOGO"></mip-img>
<scriptsrc="https://c.mipcdn.com/static/v1/mip.js"></script>
</body>
</html>
6.使用MIP组件
警告：出于对代码质量和性能的考虑，MIP页中不允许自定义JavaScript代码。
在一个合法的MIP页面中，所有的交互通过引入MIP组件实现。MIP组件可以理解为封装了JS的自定义HTML标签。上一步中的<mip-img>也是一个MIP组件，点击这里查看更多组件。
我们以分享组件为例，根据分享组件文档，组件对应的HTML标签为<mip-share>，需要依赖https://c.mipcdn.com/static/v1/mip-share/mip-share.js脚本，用在页面里就是这样：
<!DOCTYPEhtml>
<htmlmip>
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width,minimum-scale=1,initial-scale=1">
<linkrel="stylesheet"type="text/css"href="https://c.mipcdn.com/static/v1/mip.css">
<!--canonical中的链接优先填写对应内容的移动端页面（H5）地址-->
<linkrel="canonical"href="https://www.example.com/your/path.html">
<title>HelloWorld</title>
<stylemip-custom>
h1{color:red;}
</style>
</head>
<body>
<h1>HelloWorld!</h1>
<mip-imglayout="responsive"width="350"height="263"src="https://www.mipengine.org/static/img/mip_logo_3b722d7.png"alt="MIPLOGO"></mip-img>
<mip-sharetitle="分享：我的第一个MIP页面"></mip-share>
<scriptsrc="https://c.mipcdn.com/static/v1/mip.js"></script>
<scriptsrc="https://c.mipcdn.com/static/v1/mip-share/mip-share.js"></script>
</body>
</html>
在使用组件时，请注意阅读组件文档，查看组件是否依赖所需脚本。如果依赖，请在mip.js之后引入脚本。
7.预览
开发完成后，可以使用MIP校验工具保证代码规范。
提示：校验代码，使用MIP校验工具。
预览线上URL异步打开效果，使用MIP预览工具。
MIP页文件可以直接运行，你可以选择如下方式，像预览普通HTML站点一样预览MIP-HTML页面：
•直接在浏览器中打开（由于XMLHTTPRequests失败可能会导致某些元素预览失败）。
•在本地部署一个服务，如Apache，Nginx等。
•使用MIP-CLI辅助预览，使用方法见MIP博客：开发教程一。
8.起飞
到目前为止，你已经创建好了一个MIP页面。这个页面有图、有文、能分享，可以在浏览器中运行。
进阶的内容，请参考：
•MIP-HTML规范
•组件布局
•MIP加速原理
•扩展组件开发规范
| 莫然博客是山东省最主流，最具人气的莫然seo博客频道。专注SEO、SEM、百度排名、快速提升权重、关键字优化、网络推广，seo莫然可以分享移动手机端SEO知识!免费提供网站优化诊断。 |
发表评论
额 本文暂时没人评论 来添加一个吧