移动端改造MIP的流程

MIP是Mobile Instant Pages的首字母缩写,意为移动网页加速器,是百度官方针对移动端搜索引擎开发的一套开放性技术标准,是百度在搜索引擎技术上紧跟谷歌的一次开发,更是移动端搜索引擎用户体验的提升。

MIP是否对SEO有效果?这个问题在去年就被众多大咖拿出来讨论了,总的来说有利有弊,但是利大于弊,且必然是发展的趋势。


今天我们来说一下传统移动端网站如何改造成MIP网站?


1、移动端html头标签中增加一个mip属性标识

<html mip>


2、添加MIP依赖的CSS/JS

 <link rel="stylesheet" type="text/css" href="https://c.mipcdn.com/static/v1/mip.css">
<script src="https://c.mipcdn.com/static/v1/mip.js"></script>


3、添加MIP关联标签

<link rel="miphtml"> 和 <link rel="canonical"> 主要用于告知搜索引擎页面间的关系。添加关联标签后,MIP 页的会继承 原页面(移动端) 的点击权重,同时 MIP 页 将作为搜索引擎的首选导流页面。

使用规则:

  • <link rel="miphtml"> 在移动端页面(H5)使用,指向对应内容的 MIP 页,方便搜索引擎发现对应的 MIP 页。

  • <link rel="canonical"> 在 MIP 页中使用,指向内容对应的移动端页面(H5)。

  • 若没有移动端页面(H5),则指向内容对应的 PC 页。

  • 若直接在原链接修改 MIP,则 Canonical 指向当前 URL 。

<!DOCTYPE html><html mip>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
        <link rel="stylesheet" type="text/css" href="https://c.mipcdn.com/static/v1/mip.css">
        <!-- canonical 中的链接优先填写对应内容的移动端页面(H5)地址 -->
        <link rel="canonical" href="https://www.example.com/your/path.html">
        <title>Hello World</title>
    </head>
    <body>
        <h1>Hello World!</h1>
        <script src="https://c.mipcdn.com/static/v1/mip.js"></script>
    </body></html>


4、添加样式

出于速度考虑,建议內联使用 CSS 样式。所有样式写在 <style mip-custom></style> 中,注意:style 标签仅允许出现一次。

<!DOCTYPE html><html mip>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
        <link rel="stylesheet" type="text/css" href="https://c.mipcdn.com/static/v1/mip.css">
        <!-- canonical 中的链接优先填写对应内容的移动端页面(H5)地址 -->
        <link rel="canonical" href="https://www.example.com/your/path.html">
        <title>Hello World</title>
        <style mip-custom>
            h1 { color: red;}        </style>
    </head>
    <body>
        <h1>Hello World!</h1>
        <script src="https://c.mipcdn.com/static/v1/mip.js"></script>
    </body></html>

5、替换禁用的HTML标签【主要工作量】

https://www.mipengine.org/doc/2-tech/1-mip-html.html


6、使用MIP组件,比如幻灯,回到顶部,表单等


7、验证代码是否符合规范


QQ图片20180809114205.png


本文 暂无 评论

Top
在线咨询 ×

站长QQ:366131726

扫描添加客服微信

工作时间:早8:00 - 晚11:00