什么是 AMP？AMP 页面与 SEO 入门指南
AMP 是一套用于创建快速加载、面向移动端优化网页的开源框架。本文将全面介绍 AMP 页面及其对 SEO 的影响。
什么是 AMP？
AMP（早期全称 Accelerated Mobile Pages，即加速移动页面）是一套开源 HTML 框架，用于创建快速加载、面向移动端优化的网页。
因此，AMP 页面本质上是普通网页的精简版本。
大体效果如下：
Google 主导了这一开源项目，意在抗衡 Facebook Instant Articles 和 Apple News。
后两者都能让发布者创建加载快速、易于阅读的内容。
2016 年，Google 首次在移动搜索结果中展示 AMP 页面，当时仅限出现在 SERP 顶部的“焦点新闻（Top Stories）”区块。
效果如下：
AMP 最初面向新闻发布者设计，此后已扩展到涵盖各类网页。
AMP 如何运作
AMP 框架由三个基本部分构成：
- AMP HTML
- AMP JavaScript
- AMP Cache
AMP HTML
AMP HTML 是附带若干限制的 HTML，用以确保页面快速加载。它会移除或修改拖慢网页的元素与属性。
一个简单的 HTML 文件大致如下：
具体而言，AMP HTML 文档必须满足以下要求：
- 以
<!doctype html>开头（向浏览器说明可预期的文档类型） - 包含一个顶层的
<html ⚡>或<html amp>标签（表明这是 AMP HTML 页面） - 包含
<head>和<body>标签（用于定义文档内容，即标题、段落、图片、超链接、表格等） - 包含一个
<link rel="canonical" href="URL">（用于指明该页面的常规 HTML 版本，或在不存在常规页面时链接到自身） - 包含一个
<meta charset="utf-8">标签（用于指定字符编码） - 包含一个
<meta name="viewport" content="width=device-width">标签（向浏览器说明如何控制页面的尺寸） - 包含一个
<script async src="https://cdn.ampproject.org/v0.js"><script>标签（为库添加基础扩展） - 在 head 标签中包含 AMP 样板代码（
head > style[amp-boilerplate]和noscript > style[amp-boilerplate]）
特殊标签、属性与模板的更多细节，可参阅 AMP 官方的 AMP HTML 文档。
AMP JavaScript
JavaScript 一向难以处理，过多的 JS 会让网页变得缓慢、卡顿。
而 AMP 的 JavaScript 库内置各类框架与组件，无需编写 JS 或引入第三方库即可快速构建页面。
这些都与读者体验密切相关。
AMP 缓存
AMP 缓存是一套基于代理的内容分发网络（CDN），会在用户请求之前预取并预渲染 AMP 页面。
它对网站速度影响极大。
原因何在？
网站可同时从不同服务器加载多个部分，访客也能从距离最近的服务器加载网站。
如此一来，网站能为更多用户实现极快的加载速度。
目前主要有两家 AMP 缓存服务商：
采用 AMP 格式后，这些平台会缓存你的页面。
例如，缓存服务商可以通过 <html ⚡> 或 <html amp> 标签发现 AMP 页面，并缓存其内容。
发布者也可以手动把页面添加到 AMP 缓存（仅适用于 Google AMP 缓存）。
其他平台可以通过 URL 访问已缓存的 AMP 页面。
例如，在《卫报》（The Guardian）任一新闻 URL 末尾加上 /amp，即可看到对应的 AMP 版本。
效果如下：
专业提示：若不确定网站是否存在 AMP 页面，可用 Semrush 站点审计工具检查。
输入域名，点击“开始审计”。
随后进入仪表盘的“统计（Statistics）”标签页，即可看到标注为“AMP 链接”的一行。
效果如下：
AMP 页面有哪些优点与局限？
AMP 能改善页面性能与用户体验，但也存在一些缺点。
以下梳理 AMP 页面的利弊：
AMP 的优点
- 页面加载几乎瞬时完成
- 页面易于构建
- 改善移动端用户体验
- 允许自定义设计
- 包括 Google 和 Bing 在内的多个平台支持它
AMP 的局限
- Google 不再显示 AMP 徽章图标来标识 AMP 内容
- 设计元素受到很大限制
- AMP 页面每页只允许一个广告标签
如何在网站上设置 AMP
创建 AMP 页面既可以手写 HTML 标记，也可以借助 CMS 的插件或自定义功能完成。
创建 HTML AMP 页面
基础代码
下面是一个基础 AMP 页面的标记：
可以看到，body 内容较为直观，而 head 中多出了一些代码。
提示：使用 AMP 的代码片段“试验场（playground）”来尝试和练习这段代码。
添加图片
若要添加图片，需把常规 HTML 标签替换为对应的 AMP 标签。
此处即以 <amp-img> 替代 <img>。
测试时，把以下代码复制粘贴到页面的 <body> 中即可。
添加样式
接下来添加样式。
所有样式需通过 CSS 属性实现。但 AMP 要求全部 CSS 集中在一个自定义标签中，即文档 <head> 内的 <style amp-custom>。
例如，可尝试把以下样式加入页面：
JavaScript
AMP 通过 <amp-script> 组件支持自定义 JavaScript。
这样既能以保留 AMP 性能保证的方式编写并运行自有的 JS，又无需编写 JavaScript 或使用外部库即可快速构建页面。
更深入的说明可参阅 AMP 的使用自定义 JavaScript 指南，并按 AMP JS 教程逐步实践。
检查与验证
有效的 AMP 页面须遵循严格准则，从而具备被缓存的资格并提供良好的用户体验。
验证 AMP 页面之前，应确保遵循以下最佳实践：
- 若针对 Google 优化，请遵循其AMP 页面准则
- 将 AMP 页面链接到其规范版本（非 AMP 版本，或 AMP 页面自身）
- 在 AMP 页面和规范页面中使用相同的结构化数据标记
- 使用丰富结果测试（Rich Results Test）验证结构化数据是否生效
- 确认 robots.txt 未屏蔽 AMP 页面
- 遵循国际化 SEO 的 hreflang 准则
准备检查时，使用 AMP 测试工具（AMP Test Tool）确认页面满足全部要求。
更详细的指引可参阅 AMP 官方的AMP 页面验证教程。
网页开发新手可参考 AMP 的课程或 Google 的 AMP 基础代码实验室（codelab）。
用 CMS 创建 AMP 页面
若通过 CMS 管理内容，可以使用 Drupal、Joomla 或 WordPress。
以 AMP for WP 为例，具体流程如下。
在 WordPress 中激活该插件后，即可开始创建 AMP 页面。
先新建一个页面或文章。
然后点击“启动 AMP 页面构建器”。
可使用预置布局，也可用拖拽式元素自行搭建。
然后点击齿轮图标来编辑页面的元素。
并随时保存每个模块。
页面发布后，在 URL 末尾加上“amp”即可查看该页面的 AMP 版本。
监控并改进 AMP 页面
监控与改进 AMP 页面最有效的方式之一，是定期审计网站，从而跟踪 HTML、模板、样式与布局等方面的问题。
先用我们的 站点审计工具运行一遍网站。
提示：创建一个免费的 Semrush 账户，即可抓取任意域名、子域名或子文件夹下最多 100 个 URL。
抓取完成后，进入“统计（Statistics）”标签页，在标注为“AMP 链接”的一行查看问题。
该工具会检查 40 多种与 AMP 页面相关的常见错误，并给出修复方式。
发现问题应尽快解决，它们会影响搜索引擎向搜索者呈现内容的方式。