您現在的位置: 網站首頁 / seo優化 / 正文

如何用MIP快速搭建體驗友好的移動頁面

作者: admin 發布: 2017-1-2 22:19:2 分類: seo優化 閱讀: 次 查看評論

  在讀這篇文章之前,請確定你已經了解MIP定義及加速原理。如果不確定的話,可以到MIP官網了解。文章內容來自MIP博客。

  改造前期準備和注意事項:

  你可以選擇直接將原先的移動站點直接改成MIP站,也可以單獨再做一套MIP站點與移動站并存。

  復雜的頁面暫不建議MIP改造,目前對資訊、圖文類支持已較好,若功能較為復雜的建議自定義組件或等待MIP項目小組開發。

  改造需具備一定的html知識,改造MIP教程請按照教程來,特別注意大小寫,建議全局小寫。

  我們從一個html頁面的上下順序一步步改造,只要按照本文章內的一步步來,即可完成MIP改造。

  1. Doctype改造

  1.1 打開你的模板或代碼文件看第一行,將<! DOCTYPE ***>改為<!DOCTYPE html>

  2. <Html>標簽改造

  2.1 完成第一步后,繼續修改下一行代碼,將: <html xmlns="http://www.w3.org/1999/xhtml">或:<html> 改成:<html mip>注意全部小寫

  3. Head部分改造

  3.1 <head>標簽必須是完全小寫。

  3.2 頁面的編碼必須是utf-8,修改聲明為:<meta charset="utf-8">

  3.3 頁面中加入<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1">

  3.4 頁面中加入MIP專用樣式文件< link rel="stylesheet" type="text/css" href="https://mipcache.bdstatic.com/static/v1/mip.css" >

  3.5 這里需要告訴搜索引擎改頁面對應的標準html頁面地址,如果存在則標識<link rel="canonical" href="https://www.baidu.com"> 其中href值修改成為與當前mip頁面相對應的標準頁面(移動頁)url地址。如果只有mip頁面沒有相對應的標準頁面則標識為:<link rel="canonical" href="https://www.baidu.com"> 其中的href值為當前頁面地址。詳細說明

  4. Body內改造

  4.1 首先<body>標簽必須是小寫的;

  4.2 替換<img>, <style>, <frame>, <form>,< input>, <textarea>, <select>, <option>標簽為對應MIP組件標簽,具體見官網文檔。

  4.3 引用MIP-JS 運行環境 <script src= "https://mipcache.bdstatic.com/static/v1/mip.js"></script>放在頁面尾部。

  5. 使用MIP Cache注意事項

  5.1 一般Cache圖片、樣式、腳本,做完上述4步后,修改資源地址為相對地址或合法絕對地址(以校驗工具為準);

  5.2 Cache的內容需要更新需要通過MIP數據提交中的更新數據接口,把更新的url鏈接推送過去,等待百度更新。

  6. 其他組件使用

  6.1 除了上述這些需求外,一部分站點可能需要用到組件,官網文檔包含了目前支持的所有組件,本文簡單舉例說明一下使用百度統計該如何實現:

  6.2 查找原有百度統計工具查看統計JS代碼(可全局查找 var _hmt 關鍵字)獲取token(hm.js?之后的編碼),在頁面底部,所有script前放入代碼:<mip-stats-baidu token="22090d4a309827eb62bc1335b2b28f11(網站統計token值)"></mip-stats-baidu>

  6.3 去除原有百度統計工具查看統計JS代碼,刪除整段js.

  更多教程參考,可查看:

  •   [MIP新手指南]https://www.mipengine.org/doc/00-mip-101.html

  •   [MIP 完整demo]https://www.mipengine.org/doc/01-mip-demo.html

  •   [canonical使用說明]http://www.cnblogs.com/mipengine/p/canonical_link.html

  站點在MIP改造中遇到任何問題,歡迎前往站長社區:MIP專區進行提問解惑。

  來源:SEO自學網 轉載注明出處!

<< 上一篇下一篇 >>   本文關鍵詞: 百度MIP  

評論列表:

站長SEO學院
第一節:百度搜索引擎工作原理
第二節:建設對搜索引擎友好的站點
第三節:如何進行網站內容建設
第四節:整體優化、結構優化、網頁優化
第五節:移動搜索-明確移動搜索優化標準
百度SEO資料文檔
百度搜索引擎優化指南2.0
百度移動搜索優化指南2.0
網站分析白皮書(站長版)
移動站點該如何優化
建設對百度友好的站點
百度搜索引擎網頁質量白皮書
石榴算法-綠蘿算法-冰桶算法
新搜索時代下的優化策略
更多百度SEO資料文檔
站長推薦
DIV+CSS布局實例教程-Web標準
網站SEO優化常見問題匯總
SEO優化推廣方案該如何寫
SEO優化方案步驟
影響網站關鍵詞排名因素總結
影響谷歌搜索引擎排名的因素調查
手機移動端站點適配優化
最近發表
網站收藏
以太坊经典暴涨 陕西快乐十分app 内蒙古时时彩开奖号码 百宝彩票陕西快乐十分 广西快乐十分今天开奖表 今日内蒙古快三走势图 四川时时app下载手机版 我要白小姐四期期准 广东快乐十分钟开奖直播 现场快乐十分开奖结果查询 黑龙江时时购买平台