百度MIP适配实例

MIP,全称Mobile Instant
Pages(移动端即时页面),是百度生产的一套移动端网页开放技术标准。网站活动端页面总结MIP改造,能落实页面缓存,从而达到运动网页加速效果。

百度官方已经明朗表示,应用了MIP的运动网站,将在百度搜索引擎拿到更高权重。

在马那瓜沙龙的实地盛况中,Zac大神对百度工程师提出了非常中肯的题目,“百度MIP到底会不会影响名次”,现场沉寂几秒中后响起了雷鸣般的掌声,对此,百度工程师也一目明白的代表:“百度MIP会影响排行”。我想那一点是独具SEO从业者最想要听到的呢,这一次百度工程师表态很坚决,他代表:”普通网页是因而蜘蛛抓取速度来鉴定网页速度的,而有了MIP后,MIP本身就网站速度快的表明。“假诺您想提升活动端的网站打开速度,那么在MIP技术还尚无完全普及的时候抢占MIP先机,将会事半功倍。

近期网上能找到的MIP改造的实例至极少,所以将大家公司网站
1145集团信用http://www.1145.cn)
的一些MIP改造拿出来跟我们享用,希望能给希望举办MIP改造的站长提供一些救助。

此次举办MIP适配的是
1145公司信用的子站点:食品药品安全。HTML站点URL为 http://www.1145.cn/cfda/ ,MIP站URL规则为http://www.1145.cn/cfda/mip/ 。从Meta看,此站点为PC,Mobile自适应站。

<meta name="applicable-device" content="pc,mobile">

  

在html站点,插足以下代码,通知百度蜘蛛页面对应的mip页URL。

<link rel="miphtml" href="http://www.1145.cn/cfda/mip/">

  

在mip站点,出席一下代码与html站点对应:

<link rel="canonical" href="http://www.1145.cn/cfda/">

  

MIP站点的通用的html结构:

<!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://mipcache.bdstatic.com/static/v1/mip.css">
<!--对应的非mip页面URL-->
<link rel="canonical" href="http://www.1145.cn/cfda/">
<title>食品药品安全数据 - 1145.cn</title>
<style mip-custom>
<!--CSS放到这里,mip标准不允许引入外部css-->
</style>
</head>
<body>
页面正文内容
<!--mip 运行环境,必须引入-->
<script src="https://mipcache.bdstatic.com/static/v1/mip.js"></script>
</body>
</html>

  

只顾多少个基本要领:

  • 在<html>标签中加进mip标识
  • 编码为 utf-8
  • 添加meta-viewport,用于移动端表现
  • 譬如引入MIP运行条件,包括CSS,以及JS
  • mip不同意引入除mip css以外的表面css,必须把css都写到页面<style
    mip-custom>内部

在页面正文内容中,和我们日常做网页模版没有什么样界别。注意以下几点:

  • 官方提议用<mip-link>标签代替本来的价签(如今可以保存^lt;a>标签)且href值必须是完好路径,不能够用相对路径。

    <a href="http://www.1145.cn/cfda/mip/category/10">国家食品安全监督抽检(合格产品)</a>
    
  •  

    标签比如用<mip-img>标签代替,而且必须有</mip-img>关闭符。<mip-img>必须设置图片的width和height。详情:https://www.mipengine.org/doc/3-widget/2-inner-widget/img-widget.html

  • div,p,span,table等为主HTML标签都得以一贯动用。不要采纳javascript,因为MIP不允许引用外部javascript,所以大家常用的jquery,bootstrap都不可能用。
    MIP页面的结尾目的是加快,所以我们理应尽可能采纳最中央的html代码。

办好模版之后,可以在官网的MIP校验工具检测一下我们做的沙盘。https://www.mipengine.org/validator/validate

图片 1

屏幕快照 2017-05-09 8.55.57 PM.png

注意:MIP页面最后表现给移动端用户并不是大家直接在浏览器打开的效率,因为用户访问的实际上是从百度找寻结果点击过来的,是从百度mip缓存服务器显示你的页面,所以假若要预览您的页面,需要从 https://www.mipengine.org/validator/preview 输入你的mip的url,举行预览。除了您自己,基本不会有人直接访问你的mip的url。比如百度找寻关键词:
百度
mip,排在第一位的mipengine.org,假设在活动端点开结果,打开的实际上是这多少个url: http://m.baidu.com/mip/c/s/www.mipengine.org/article/5-reasons-to-try-mip.html ,而不是mip页面的实际url http://www.mipengine.org/article/5-reasons-to-try-mip.html

为此用户最后见到的MIP页面的url规则是
http://m.baidu.com/mip/c/s/***************

因为MIP页面是从百度的缓存服务器读取显示给用户,所以速度特别快。假如您的MIP页面发成了改动,必须从百度站长平台后台,刷新你改改了的MIP页面。你可以把百度MIP想象成永可是期的CDN,必须手动刷新。

相关文章