百度SEO

怎么创建一个MIP页面

发布日期:2017-01-20

访问次数:149次

在上一篇文章我们详细介绍了什么是MIP,这篇文章我们就来详细介绍下,怎么创建1个MIP页面?这是一篇新手指南文章,教你如何把自己的网站改成符合MIP规范的网站。

1.创建HTML文件

在创建HTML文件的时候,需要注意以下3个条件,只有满足这3个条件,才是合格规范的HTML文件。

(1)在HTML标签中,必须增加mip标志,也就是<html mip>。

(2)网页的编码必须是UTF-8的,如果是gbk编码的,必须转变成utf8编码才可以,形式为<meta charset="UTF-8">。

(3)在head里必须增加meta-viewport,以便于移动端展现,形式为<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">。

2.添加MIP运行环境

添加MIP运行环境,也就是在HTML代码中添加MIP-JS和MIP-CSS,添加MIP依赖的mip.js和mip.css。这些代码添加在head文件里,代码如下:

<link rel="stylesheet" type="text/css" href="https://mipcache.bdstatic.com/static/v1/mip.css">

<script src="https://mipcache.bdstatic.com/static/mipmain-v1.1.2.js" ></script>

3.添加MIP关联标签

一个是miphtml标签,形式为<link rel="miphtml">,miphtml是告诉搜索引擎,,这张是MIP页面;另一个是canonical,形式为<link rel="canonical">,这个是告诉搜索引擎,这张页面的规范网址。添加关联标签后,MIP页的会继承原页面(移动端)的点击权重,同时MIP页将作为搜索引擎的首选导流页面。

<link rel="miphtml">和<link rel="canonical">都必须是放在head标签中。

4.添加样式

所有的css必须写在HTML中,不能调用,而且style标签的样式是<style mip-custom>开始,</style>结束,这是主要是考虑加载速度的原因,所以使用了内联css样式。

所有的css样式,都必须写在<style mip-custom></style>中,而且需要注意的是,style标签仅允许出现一次。

5.替换禁用HTML标签

在MIP中,有些标签是不能用的,如img标签,如果是禁用的标签怎么办?当然可以用其他的标签来替换了。刚刚说的img标签,我们就可以用<mip-img>来替换,形式为:<mip-img src="/templets/main/images/toptel.png" alt="咨询电话" /></mip-img>,需要注意的是,一定要使用绝对地址。

6.使用MIP组件

在MIP中,不能出现其他的js,所以说,只能用MIP组件去完成js效果,我相信以后的MIP会开发越来越多的MIP组件,去支持js需要实现的效果。

7.预览

完成以上6步的话,我们就需要检查我们的网站是不是符合MIP规范了,开发完之后,一点要使用MIP校验工具保证代码规范,如果你代码规范之后,检测后的结果是SUCCESS → 验证成功,完全符合MIP规范。

到这一步,MIP页面算是开发完成了,本博客首页就是完全规范的MIP页面,大家如果还是不会的,可以参考本博客的代码,相信你也一点可以制作做一个规范的MIP页面。

本文标签:mip

上一篇:长尾关键词该如何优化排名

下一篇:MIP对百度关键词排名有没有效果