Google SEO - AMP框架分析以及接入指南!-厦门SEO

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

“AMP站点”搜索结果:
Google SEO - AMP框架分析以及接入指南!-厦门SEO
“MIP站点”搜索结果:
Google SEO - AMP框架分析以及接入指南!-厦门SEO

一、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页面特有导航条:
Google SEO - AMP框架分析以及接入指南!-厦门SEO
点击顶部导航条右侧的“链接”标志符号可以显示当前AMP页面对应的源站链接(非AMP页面)点击可访问源站:
Google SEO - AMP框架分析以及接入指南!-厦门SEO
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. 预装载于急速显示。
Google SEO - AMP框架分析以及接入指南!-厦门SEO

补充说明:如果直接用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框架模版。

Google SEO - AMP框架分析以及接入指南!-厦门SEO
补充:考虑到域名权重继承、市场现有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 加速的动画
  • 设定资源加载的优先级
  • 瞬时加载网页

Google SEO - AMP框架分析以及接入指南!-厦门SEO
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