什么是 AMP？

AMP（以前称为 Accelerated Mobile Pages）是一个开源 HTML 框架，可帮助创建快速加载的移动优化网页。

因此，AMP 页面本质上是常规网页的精简版本。

它可以看起来像这样：

谷歌率先推出了这个开源项目，来与 Facebook Instant Articles以及Apple News 竞争。

这两者都允许发布者创建加载速度快且易于使用的内容。

Google 于 2016 年首次在移动搜索结果中提供 AMP 页面。它们仅限于 SERP 顶部的“头条”部分。

像这样：

它最初是为新内容发布者设计的。后来扩展到所有页面。

AMP 是如何工作的？

AMP 框架由三个基本组件组成：

1. AMP HTML
2. AMP JavaScript
3. AMP 缓存

AMP HTML

AMP HTML 是具有某些限制的 HTML，以确保页面快速加载。它删除或修改了一些可能减慢网页速度的元素和属性。

一个简单的 HTML 文件可能如下所示：

从根本上来说，AMP HTML 文档必须：

• 以开始 （向浏览器发送有关期望的文档类型的信息）
• 包含顶级 或 标签（以指示它是 AMP HTML 页面）
• 包含 和 标签（定义文档的内容，即标题、段落、图像、超链接、表格等）
• 包含 a （指示页面的常规 HTML 版本或在不存在常规页面时链接到自身）
• 包含 标签（指定字符编码）
• 包含 标签（向浏览器提供有关如何控制页面尺寸的说明）
• 包含

  href=”https://amp.dev/documentation/guides-and-tutorials/start/create/basic_markup/”>

  content=”width=device-width,minimum-scale=1,initial-scale=1″>

  amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-

  animation:none;animation:none}

  Hello AMPHTML World!

  如上所示，主体内容很简单，但头部有额外的代码。

  添加图像

  如果要添加图像，则需要将常规 HTML 标记替换为 AMP 等效标记。

  在这种情况下， 使用 标签而不是.

  要对其进行测试，请将以下代码复制并粘贴到页面的 中。

  height=”400″>

  添加样式

  下一步是添加样式。

  任何样式都必须使用 CSS 属性来完成。但是，AMP 规定所有 CSS 都包含在一个自定义标记中，称为文档中的

  JavaScript

  AMP 允许通过 组件自定义 JavaScript。

  它允许以保持 AMP 性能保证的方式编写和运行自己的JS。无需编写 JavaScript 或使用外部库即可快速构建页面。

  审查和验证

  有效的 AMP 页面意味着它遵循严格的准则，确保其符合缓存条件并创造出色的用户体验。

  在验证 AMP 网页之前，请确保遵循以下实操：

  • 如果要针对 Google 进行优化，请遵循他们的AMP 网页指南
  • 将 AMP 页面链接到Canonicals（非 AMP 版本或 AMP 页面本身）
  • 在 AMP 和规范页面中使用相同的结构化数据标记
  • 使用富文本摘要测试验证结构数据是否有效
  • 验证txt文件不会阻止 AMP 网页
  • 遵循国际 SEO hreflang指南

  当你准备好进行审核时，请使用AMP 测试工具确保页面满足所有要求。

  使用 CMS 创建你的 AMP 页面

  如果你通过 CMS 管理内容，则可以使用Drupal、Joomla或WordPress。

  例如，让我们看看使用AMP for wordpress插件是什么样子。

  在 WordPress 上激活插件后，您可以开始创建 Accelerated Mobile Pages。

  首先添加新页面或新博客文章。

  然后点击“Start the AMP Page Builder”。

  突出显示“启动 AMP 页面生成器”按钮

  你可以选择使用预先构建的布局或使用拖放元素构建自己的布局。

  然后单击齿轮图标编辑页面的元素。

  并在保存每个模块。

  发布页面后，你将通过在页面网址末尾添加“amp”来看到该页面的 AMP 版本。