AMP改造教程，浅谈AMP接入解决方案！

QUXINGDONG.COM

发布于 2018-11-01 17:01:14

4K0

发布于 2018-11-01 17:01:14

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

图片转载于——厦门SEO：seo.quxingdong.com

Ps：一、二主要解释一些专有名词，具体“ AMP 开发规范 ”可以直接参阅第三专题！

《 AMP 开发文档》

一、框架组成：

谷歌AMP - HTML框架由 AMP HTML、AMP JS、AMP Cache 三大核心组件构成！

1.AMP HTML

AMP HTML 是为了确保网页性能的具有某些限制的 HTML。

AMP HTML 本质上是使用自定义 AMP属性扩展的 HTML。

尽管 AMP HTML 网页中的大多数标记都是常规 HTML 标记，但部分 HTML 标记替换为了 AMP 专用标记（另请参阅 AMP 规范中的 HTML 标记)。利用这些自定义元素（称为 AMP HTML 组件）可以轻松高效地实现常见的模式。

例如，amp-img 标记可提供完整的 srcset 支持，即使在尚不支持该标记的浏览器中也是如此。

2.AMP JS

AMP JS 库可确保快速渲染 AMP HTML 网页。

AMP JS 库可实现所有 AMP 的最佳性能做法、管理资源加载，并为您提供上面提到的自定义标记，所有这些都是为了确保快速渲染您的网页。

最重大的优化之一就是它可使来自外部资源的所有内容保持异步，让网页中的任何内容都能毫无阻碍地渲染。

其他性能技术还包括：将所有 iframe 沙盒化，加载资源之前对网页上每个元素的布局进行预先计算，以及禁用性能缓慢的 CSS 选择器。

3.AMP Cache

Google AMP Cache 可用于提供缓存的 AMP HTML 网页。

Google AMP Cache 是一种基于代理的内容交付网络，用于交付所有有效的 AMP 文档。它可提取 AMP HTML 网页，对这些网页进行缓存，并自动改进网页性能。使用 Google AMP Cache 时，文档，所有 JS 文件及所有图片都从使用 HTTP 2.0 的同一来源加载，从而可实现最高效率。

此外，Google AMP Cache 还带有内置验证系统，可确认网页能够正常工作，并且不依赖于外部资源。此验证系统运行一系列断言，确认网页的标记符合 AMP HTML 规范。

Google AMP Cache 可以理解为谷歌官方提供的免费CDN服务。

二、运作原理：

01.仅允许异步脚本

02.静态确定所有资源的大小

03.不让扩展机制阻塞渲染

04.将所有第三方 JavaScript 保存在非关键路径下

05.有 CSS 都必须内嵌并具有大小限值

06.字体触发必须高效

07.最大程度减少样式重新计算次数

08.仅运行 GPU 加速动画

09.设定资源加载的优先级

10.瞬时加载页面

三、开发规范：

1.AMP页面源码必须包含的标记

必须以“<!doctype html>”开始！
必须包含顶级标签：“<html ⚡>”，使用“<html amp>”也可以！
必须包含“<head>”和“<body>”标签！
必须包含“<meta charset="utf-8">”标签，且作为其头标记的第一个子标记！
必须包含“<meta name="viewport" content="width=device-width,minimum-scale=1">”！
必须包含“<link rel="canonical" href="当前AMP页面对应的源站页面链接">”标签！
必须包含“<script async src="https://cdn.ampproject.org/v0.js"></script>”标签！
必须包含AMP样板代码（head > style[amp-boilerplate]和noscript > style[amp-boilerplate]）：

<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>

以上八个“必须”必须严格遵守！

2.AMP HTML 规范

01.HTML 标签

禁止添加“<script>”内嵌脚本，除非“type”属性是“application/ld+json”。
可以使用“<noscript>”。
禁止使用“<base>”标签。
<img>标签替换为了“<amp-img>”，且要有结束标记：“</amp-img>”。
video替换为：<amp-video>. audio替换为：<amp-audio>. iframe替换为：<amp-iframe>。
frame frameset object param applet embed 这些标签都禁止使用。
<form>标签允许使用，需要包括amp-form扩展名。
<button>允许使用。
<a>标签的href属性不能以“JavaScript:”开始！如果设置，则target属性值必须为_blank。
<input[type=image]>，<input[type=button]>，<input[type=password]>，<input[type=file]>是无效的。相关标签<fieldset>，<label>是允许的。

02.HTML 注释

不允许使用有条件的HTML注释！例如IE8兼容注释代码。

03.HTML 属性

在AMP HTML中不允许以on（例如onclick或onmouseover）开头的属性名称。on允许使用带有文字名称（无后缀）的属性。

AMP HTML中不允许使用与XML相关的属性，例如xmlns，xml：lang，xml：base和xml：space。

i-amp-AMP HTML中不允许使用前缀的内部AMP属性。

3.使 AMP网页可被 Google搜索轻松发现

为网站适配了AMP版本，如何使谷歌搜索引擎知道呢？

为成功接入AMP框架的网站页面添加：

<link rel="canonical" href="当前AMP页面对应的源站页面链接">

为原来的网站页面添加：

<link rel="amphtml" href="当前源站页面对应的AMP页面链接">

AMP HTML 规范：https://www.ampproject.org/zh_cn/docs/fundamentals/spec

AMP 验证工具：https://validator.ampproject.org

AMP 常见错误：https://www.ampproject.org/zh_cn/docs/troubleshooting/validation_errors

补充：

HTML转AMP：https://www.ampproject.org/zh_cn/docs/fundamentals/converting/setting-up

以上文档、工具使用需要访问外国网站！

Ps：本文转载于“厦门SEO”文章：《AMP 开发文档【精炼核心规范新手易懂】》

本文系转载，前往查看

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

https

网络安全

xml

html

本文系转载，前往查看

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

登录后参与评论

0 条评论

热度