Google - AMP框架分析及外贸站接入解决方案！

QUXINGDONG.COM

修改于 2018-11-06 01:22:49

3.2K0

修改于 2018-11-06 01:22:49

文章被收录于专栏：厦门SEO

写在前面：网站接入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十个优化技术（不限于）：

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

最后、AMP接入完成后，原站页面头部应添加标签，属性指向新的AMP页面！例如：

< link  rel = “amphtml”  href = “https://www.example.com/url/to/amp/document.html” >

新的AMP页面也要添加标签，属性指向源站页面！例如：

< link  rel = “canonical”  href = “https://www.example.com/url/to/canonical/document.html” >

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

www站源码头部要添加：

< link  rel = “amphtml”  href = “当前页面对应的AMP站点链接” >

amp站源码头部要添加：

< link  rel = “canonical”  href = “当前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页面代码实例：

<html ⚡>

  <head>

    <meta charset="utf-8">

    <title>Sample documenttitle>

    <link rel="canonical" href="./regular-html-version.html">

    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">

    <style amp-custom>

      h1 {color: red}

    style>

    <script type="application/ld+json">

      "@context": "http://schema.org",

      "@type": "NewsArticle",

      "headline": "Article headline",

      "image": [

        "thumbnail1.jpg"

],

      "datePublished": "2015-02-05T08:00:00+08:00"

    script>

    <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js">script>

    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}style>noscript>

    <script async src="https://cdn.ampproject.org/v0.js">script>

  head>

  <body>

    <h1>Sample documenth1>

<p>

      Some text

      <amp-img src=sample.jpg width=300 height=300>amp-img>

p>

    <amp-ad width=300 height=250

        type="a9"

        data-aax_size="300x250"

        data-aax_pubname="test123"

        data-aax_src="302">

    amp-ad>

  body>

html>

AMP页面源码必须存在的标记包括：

必须以开始；

标签后面必须加“⚡”，或者用：；

<head>和<body>

标准HTML页面和标签是可有可无，但是AMP页面必须包含；

rel="canonical" href="源站链接">

标签里必须包含上面的标签，没有对应源站（用方案一）就填当前页面链接；

charset="utf-8">

标签必须作为标签的第一个子标签；

name="viewport" content="width=device-width,minimum-scale=1">

标签之间还需包含上面这段标签；

<script async src="https://cdn.ampproject.org/v0.js">script>

标签之间还需包含上面这段~~标签；~~

<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}style>noscript>

标签之间还需包含上面这段AMP样板代码；

以上八个“必须”在前端代码书写时必须严格遵守！一点校验不通过，就没有半点效果！

IMG 换成了amp-img。

请注意：根据HTML5，它是一个Void元素，因此它没有结束标记。但是，确实有一个结束标记。

视频换成了amp-video。

音频换成了amp-audio。

IFRAME 换成了amp-iframe。

代码中不要写注释。

以上是必须包含的8个点和一些常用标记需要改动的地方，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

Ps：本文由@屈兴东转载于#厦门SEO文章：《Google SEO – AMP框架分析以及接入指南！》

本文系转载，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

html

https

网络安全

本文系转载，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

html

https

网络安全

登录后参与评论

0 条评论

热度