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

图片转载于“厦门SEO”:seo.quxingdong.com

写在前面:网站接入AMP有啥好处?

AMP框架是谷歌推出的一款全新的HTML标准,网页采用HTML-AMP格式可以:规范源码、精简代码、自带谷歌CDN、网页加载速度提升4倍等。采用AMP框架不会直接影响站点的SEO排名,但是会直接提升用户体验、搜索引擎印象,间接提升网站在搜索结果页的排名提升。Google 发布 AMP 的同年,百度发布了 MIP 框架,并也成为了影响百度排名的因素。

Ps:网站接入AMP后,谷歌站长平台会自动识别并推送相关通知,直接搜索结果展现闪电符号。而百度站长平台需要单独进行MIP/AMP验证(类似HTTPS认证),验证通过后,搜索结果展现闪电符号。接入MIP只对百度排名有用,接入AMP对百度、谷歌都有效果!

“AMP站点”搜索结果:

图片转载于“厦门SEO”:seo.quxingdong.com

“MIP站点”搜索结果:

图片转载于“厦门SEO”:seo.quxingdong.com

一、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页面特有导航条:

图片转载于“厦门SEO”:seo.quxingdong.com

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

图片转载于“厦门SEO”:seo.quxingdong.com

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页面!例如:

< 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框架分析以及接入指南!

原文链接:https://seo.quxingdong.com/175.html

编辑于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏24K纯开源

Adobe Premiere Pro生成峰值文件假死

一、正文 使用Adobe的Premiere Pro CC进行视频剪辑制作的时候,有的时候在右下角总会出现一个“自动生成峰值文件”的提示符,并跟随一个进度条: ?...

1.4K60
来自专栏Jackson0714

【Discuz】云平台服务:出了点小错,由于站点ID/通信KEY等关键信息丢失导致Discuz!云平台服务出现异常

34170
来自专栏我的小碗汤

【插件】解放鼠标,让浏览器更智能

首先感谢大家参与这周的送书活动。已经给小助手微信发送好友请求的,不要着急,这两天会通过验证,并拉大家进入抽奖群参与抽奖,大家肯定都可以参与的。

11720
来自专栏web前端教室

如何规划一个前端组件:单&复选按钮

image.png 一个自定义的单选和复选按钮,这其实就是一个前端组件。为什么它不被称为模块呢?因为它不处理数据,没有业务逻辑,它只是一个事实上的样式,在操作交...

27090
来自专栏假装我会写代码

两行代码实现一个地址选择器

29520
来自专栏九彩拼盘的叨叨叨

网页PPT: reveal.js 介绍

reveal.js 是一个展示内容的框架,可以简单的理解为网页版的PPT。我们用 reveal.js 做出来的PPT其实是一个HTML文件。

60920
来自专栏IMWeb前端团队

2015-2016前端架构体系技术精简版

2015-2016前端架构体系技术精简版 ? 点击查看github高清图 点击查看完整版 一、框架与组件 **bootstrap等UI框架设计与实现 伸缩布局...

24850
来自专栏性能与架构

Twitter工程师聊JS

本文是Twitter软件工程师Bonnie Eisenman对JS现状的看法和对开发者的一点建议 01 关于框架 框架的目标是减少繁琐的工作,是基础的脚手架...

35960
来自专栏Youngxj

杨小杰站长之家工具箱1.0

16040
来自专栏玩转JavaEE

一个开源的五子棋大战送给各位小伙伴!

有暇,做了个五子棋大战的小游戏送给各位小伙伴! 用到的知识点有: 1.JavaWeb基础知识(懂jsp,servlet足够) 2.JavaScript和jQue...

54350

扫码关注云+社区

领取腾讯云代金券