如何用百度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.mzph.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;必须通过严格的接口控制…