Google SEO – AMP框架分析以及接入指南！

写在前面：网站接入AMP有啥好处？
AMP框架是谷歌推出的一款全新的HTML标准，网页采用HTML-AMP格式可以：规范源码、精简代码、自带谷歌CDN、网页加载速度提升4倍等。采用AMP框架不会直接影响站点的SEO排名，但是会直接提升用户体验、搜索引擎印象，间接提升网站在搜索结果页的排名提升。Google 发布 AMP 的同年，百度发布了 MIP 框架，并也成为了影响百度排名的因素。
Ps：网站接入AMP后，谷歌站长平台会自动识别并推送相关通知，直接搜索结果展现闪电符号。而百度站长平台需要单独进行MIP/AMP验证（类似HTTPS认证），验证通过后，搜索结果展现闪电符号。接入MIP只对百度排名有用，接入AMP对百度、谷歌都有效果！

“AMP站点”搜索结果：

“MIP站点”搜索结果：

一、Google – AMP 框架分析：

1.谷歌AMP框架、百度MIP框架是什么？

AMP（Accelerated Mobile Pages – 加速移动页面）是 Google 推出的一种为静态内容构建 Web 页面，提供可靠和快速的渲染，加快移动页面加载的速度，提高用户的浏览体验。
MIP（Mobile Instant Pages – 移动网页加速器）是百度推出的一套应用于移动网页的开放性技术标准，充分借鉴了 AMP，被很多开发者看作是国内版 AMP。

2.谷歌AMP框架技术分析！

AMP HTML是HTML的一个子集！
作为HTML的一个子集，它对通过HTML提供的全套标记和功能施加了一些限制，但它不需要开发新的渲染引擎：现有的用户代理可以像所有其他HTML一样呈现AMP HTML。
AMP站点被搜索结果展现、然后用户点击打开后展现的页面是从谷歌缓存获取的AMP页面。与MIP站点不同的是：AMP站点打开后会明显观察到网页顶部的AMP页面特有导航条：

点击顶部导航条右侧的“链接”标志符号可以显示当前AMP页面对应的源站链接（非AMP页面）点击可访问源站：

AMP 和 MIP 都是由三个部分组成，前者由 AMP HTML、AMP runtime、AMP cache 组成，后者由 MIP-HTML、MIP-JS、MIP-Cache 组成。
AMP HTML 上，它只允许使用有限的标签，如body、article这些标签可直接使用，但如script、frame和frameset这样的标签是被限制或禁止使用的，MIP 中也如此。而如 img 或 video 这样的标签不能直接使用，需要替换成别的标签才能使用，如在 AMP 中需要替换成amp-img，在mip中替换成mip-img。
AMP runtime 是完全用 JavaScript 来实现的，是由引入它的 AMP 文件来启动的，它的主要作用是负责协调资源的加载时机和优先级，插入 AMP 组件，并为 AMP HTML 引入 runtime 验证等调试功能。而 MIP-JS 用于管理资源的加载，并支持 MIP 标签的使用，从而确保页面快速的渲染。
AMP cache 提供了第三方的缓存，这样从 Google 搜索进入 AMP 网页就可以做到预加载甚至预渲染。AMP-Cache 给所有符合规范的 MIP 页面提供 CDN 缓存服务，主动提高页面的加载速度。
具体的前端页面制作规范请参考官方文档：https://www.ampproject.org/zh_cn/docs/

AMP十个优化技术（不限于）：

1. 只允许异步的Script装载；
2. 静态计算资源的布局大小；
3. 不允许扩展机制阻止页面生成；
4. 关键路径中不允许第三方脚本；
5. CSS通过直接嵌入，并且有大小限制；
6. 字体下载优化；
7. 最小化样式重新计算；
8. 只运行GPU加速的动画；
9. 资源装载的优先级管理；
10. 预装载于急速显示。

补充说明：如果直接用AMP站点做移动站，没有对应的源对应站，就不用添加。
AMP的运作原理：https://www.ampproject.org/zh_cn/learn/about-how/

二、Google – AMP 接入指南：

1.AMP站点 独立域名的选择：

写在前面：通过分析市场现有网站CMS系统接入AMP框架原理，可以将实现方案分为两大类。其中一大解决方案是通过判断用户终端UA(User Agent)的方式来展现AMP站点，另一大解决方案是通过给AMP站点绑定单独的独立域名来展现AMP站点。

解决方案一：

在网站域名不变的情况下，基于判断用户UA(User Agent)来实现 MIP 页面，同时也实现了网站移动端页面的建设。
即，用户访问我们的站点时，通过判断用户UA，来识别用户访问终端是手机还是电脑。手机就呈现AMP站点，电脑就呈现普通HTML页面。
前提：一个站点需要对应两套前端模版！一套为普通HTML模版、一套为AMP框架模版！当用户访问我们的站点时，页面通过判断用户UA来识别终端。终端为电脑，页面调用原有的普通HTML模版、终端为移动，页面调用AMP框架模版。好处：不用单独给AMP页面设置对应的独立域名，不用添加前面提到的标签属性来强调amp站和源站的对应关系。

解决方案二：

第二种方案就是给站点的AMP站单独绑定对应的独立域名！
即，一个站点要绑定至少两个域名！例如：www.******.com、amp.******.com。
需求：用户访问www开头的域名（原有域名）的时候，页面调用原有普通HTML模版；用户访问amp开头（amp域名）的时候，页面调用对应的AMP框架模版。

补充：考虑到域名权重继承、市场现有AMP站点的实现方案，推荐AMP站点采用“原域名/amp/”的链接格式。举个例子，原本站点链接为：www.******.com，AMP站点可以设置为：www.******.com/amp/ 。用户访问www.******.com显示源站，访问www.******.com/amp/ 显示AMP站。有人会问，那搜索引擎不会把原来的www站也展示出来吗？答案是不会的，源站和新AMP站添加上面介绍的对应关系后，谷歌搜索引擎会自动识别，过几天站长就可以在谷歌站长平台看到AMP页面的提示了，当用户搜索相关关键词时，谷歌会优先将AMP域名展现出来（优待展现+闪电标记）。

2.AMP站点 前端模版的制作：

AMP和MIP页面的前端校验规则是越来越严格！所以AMP模版制作的过程必须严格遵守AMP框架接入规范：https://www.ampproject.org/zh_cn/docs/fundamentals/spec

• 仅允许异步脚本
• 静态确定所有资源的大小
• 不让扩展机制阻塞渲染
• 将所有第三方 JavaScript 保存在非关键路径下
• 所有 CSS 都必须内嵌并具有大小限值
• 字体触发必须高效
• 最大程度减少样式重新计算次数
• 仅运行 GPU 加速的动画
• 设定资源加载的优先级
• 瞬时加载网页

AMP框架具体编码规范请参阅：
https://www.ampproject.org/zh_cn/docs/
由于AMP站点时谷歌搜索引擎自动识别，不用去站长平台单独提交验证！所以对于源码的要求貌似没有百度MIP校验严格~但是还是建议前端在编写amp页面代码时常去校验平台校验代码是否符合AMP开发规范！
AMP 验证工具：https://validator.ampproject.org/
AMP 测试工具：https://search.google.com/test/amp
常见的AMP验证错误解决方案：
https://www.ampproject.org/zh_cn/docs/troubleshooting/validation_errors