AMP改造教程，浅谈AMP接入解决方案！
图片转载于——厦门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 开发者指南：https://developers.google.com/search/docs/guides/about-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 删除。
本文系转载，前往查看
如有侵权，请联系?cloudcommunity@tencent.com 删除。