如何用百度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 lang="en"> 改成:<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://c.mipcdn.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://c.mipcdn.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.

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/535941.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/535941.shtml
英文地址,請注明出處:http://en.pswp.cn/news/535941.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

JAVA知識基礎(一):數據類型

在我們學習一門編程語言時&#xff0c;最先要了解的就是數據類型&#xff0c;而數據類型又都是抽象的概念&#xff0c;初學者理解起來比較困難&#xff0c;所以我們往往是先應用再理解&#xff0c;但是在本篇文章我決定用先理解再應用的方式嘗試一下&#xff0c;試試效果。 1、…

百度MIP移動頁面加速——不只是CDN

MIP 是用 CDN 做加速的么&#xff1f;準確答案是&#xff1a;是&#xff0c;但不只是。 MIP 全稱 Mobile Instant Pages&#xff0c;移動網頁加速器&#xff0c;是百度提出的頁面加速解決方案。MIP 從前端渲染和頁面網絡傳輸兩方面進行優化&#xff0c;杜絕頁面渲染中的阻塞問…

JAVA知識基礎(二):基本語法

本篇主要介紹JAVA的運算符、循環結構以及條件結構。 1、JAVA運算符 計算機的最基本用途之一就是執行數學運算&#xff0c;作為一門計算機語言的Java也提供了一套豐富的運算符來操縱變量。 JAVA運算符可以大致概括為幾類&#xff1a;算術運算符、關系運算符、位運算符、邏輯運…

JAVA知識基礎(三):修飾符

JAVA中根據修飾對象的不同可以分為類修飾符、方法修飾符、變量修飾符三類&#xff0c;其中每種修飾符又可以單獨分成兩類&#xff1a;訪問修飾符和非訪問修飾符。為了便于理解&#xff0c;本文以訪問和非訪問的角度展開。 1、訪問修飾符 訪問修飾符有四個&#xff1a;public、…

百度推出新技術 MIP,網頁加載更快,廣告呢?

MIP 項目在 2016 年年初正式發布&#xff0c;幫助移動頁面加速&#xff08;原理&#xff09;。內測數據表明&#xff0c;MIP 頁面在 1s 內加載完成。現在已經有十多家網站加入 MIP 項目&#xff0c;有更多的網站正在加入中。在MIP收到的反饋中&#xff0c;大部分都提到了廣告的…

JAVA知識基礎(四):深入理解static關鍵字

1、static存在的主要意義 static的主要意義是在于創建獨立于具體對象的域變量或者方法。以致于即使沒有創建對象&#xff0c;也能使用屬性和調用方法&#xff01; static關鍵字還有一個比較關鍵的作用就是 用來形成靜態代碼塊以優化程序性能。static塊可以置于類中的任何地方…

MIP改造常見問題二十問

在MIP推出后&#xff0c;我們收到了很多站長的疑問和顧慮。我們將所有疑問和顧慮歸納為以下二十個問題&#xff0c;希望對大家理解 MIP 有幫助。 1、MIP 化后對其他搜索引擎抓取收錄以及 SEO 的影響如何&#xff1f; 答&#xff1a;在原頁面 MIP 化&#xff0c;不會影響其它搜…

Nginx(零):背景

我們今天開始對Nginx的學習&#xff0c;本來是打算第一篇就是基礎知識介紹的&#xff0c;但是我感覺在學習一個新知識之前總應該知道&#xff0c;我們為什么要學習它&#xff0c;學習它的意義何在吧&#xff01;所以我加了背景這一篇作為Nginx開始學習的標志。 1、Nginx的誕生…

Nginx(一):概念基礎

上一篇我們介紹了Nginx的背景&#xff0c;現在我們就要開始正式對Nginx的學習了。本篇我們將對Nginx的基本定義進行介紹&#xff0c;了解Nginx到底是什么。然后我們會介紹Nginx最基本的三個概念&#xff1a;反向代理、負載均衡、動靜分離。 1、Nginx是什么 Nginx(“engine x”…

MIP 官方發布 v1穩定版本

近期&#xff0c;MIP 官方發布了 MIP 系列文件的全新 v1 版本&#xff0c;建議開發者盡快完成升級。 一、 我是開發者&#xff0c;如何升級版本&#xff1f; 對于 MIP 頁面開發者來說&#xff0c;* 只需替換線上引用的 MIP 文件為 v1 版本 *&#xff0c;就可以完成升級。所有…

百度MIP頁規范詳解 —— canonical標簽

百度 MIP 的規范要求必須添加強制性標簽 canonical&#xff0c;不然 MIP 校驗工具 會報錯&#xff1a; 強制性標簽 <link rel"/^(canonical)$/"> 缺失或錯誤 這個標簽怎么寫&#xff1f;又是干什么用的呢&#xff1f; ** 簡單來說&#xff0c;canonical 標簽…

Nginx(二):安裝、配置、常用命令

1、Nginx在Linux操作系統中的安裝 這里簡單介紹一下nginx的安裝了 1.1、前期準備 在安裝nginx之前我們要提前準擺好它的編譯工具以及庫文件&#xff1a;zlib、poenssl。 還有有讓Nginx支持Rewrite功能的PCRE. 安裝的途徑有很多可以參考&#xff1a;https://www.runoob.com/lin…

JAVA知識基礎(五):深入理解final關鍵字

1.final 關鍵字 final關鍵字主要用在三個地方&#xff1a;變量、方法、類。 final修飾變量&#xff1a;final修飾一個類時&#xff0c;表明這個類不能被繼承。final修飾方法&#xff1a;final修飾方法&#xff0c;方法不可以重寫&#xff0c;但是可以被子類訪問 【前提&#…

CMS模板應用調研問卷

截止目前&#xff0c;已經有數十家網站與我們合作&#xff0c;進行了MIP化改造&#xff0c;在搜索結果頁也能看到“閃電標”的出現。除了改造方面的問題&#xff0c;MIP項目組被問到最多的就是&#xff1a;我用了wordpress&#xff0c;我用了織夢cms&#xff0c;怎么改MIP呢&am…

Nginx(三):反向代理

我們本篇將通過兩個實例進行對Nginx反向代理的學習。 1、概念基礎 反向代理&#xff0c;其實客戶端對代理是無感知的&#xff0c;因為客戶端不需要任何配置就是可以訪問。我們只需要將請求發送到反向代理服務器上&#xff0c;有反向代理服務器去選擇目標服務器獲取數據后&…

VIP站長大會(北京站)常見問題解答

功能支持問題 1. react 能否和 MIP 結合使用&#xff0c;如果暫時不能以后是否有考慮&#xff1f;是否會和其他 JavaScript 框架 (比如 Angular ) 結合 ? 目前暫無計劃支持。 2. MIP 頁是否支持自定義 cookie? 實現 登錄、統計、廣告等功能 ? <mip-cookie>組件正在…

Nginx(四):負載均衡Load balancing

1、概念基礎 Load balancing&#xff0c;即負載均衡&#xff0c;是一種計算機技術&#xff0c;用來在多個計算機&#xff08;計算機集群&#xff09;、網絡連接、CPU、磁盤驅動器或其他資源中分配負載&#xff0c;以達到最優化資源使用、最大化吞吐率、最小化響應時間、同時避…

JAVA知識基礎(六):抽象

1.概述 抽象類、抽象方法以及接口&#xff0c;這三個知識點是每個程序員必備的基礎&#xff0c;無論是在實際編程的時候&#xff0c;還是在面試的時候&#xff0c;都會出現這類問題&#xff0c;面試官很可能就會問你&#xff0c;interface和abstract的區別 當父類知道子類應該…

MIP開發教程(三) 使用MIP-CLI工具調試組件

一 . 在 mip-extensions 倉庫中創建新的組件二 . 預覽調試組件 三 . 在 MIP 頁中引用自己編寫的 MIP 組件 四 . 組件提交到 GitHub 倉庫時需要進行校驗 站長開發的非通用組件&#xff0c;使用 組件上線平臺 提交&#xff0c;上線后代碼位于 GitHub/mip-extension-platform 倉…

JAVA知識基礎(七):封裝

1.概述 封裝&#xff08;Encapsulation&#xff09;是指一種將抽象性函式接口的實現細節部分包裝、隱藏起來的方法。 封裝可以被認為是一個保護屏障&#xff0c;防止該類的代碼和數據被外部類定義的代碼隨機訪問。 要訪問該類的代碼和數據&#xff0c;必須通過嚴格的接口控制…