Accelerated Mobile Pages 基础知识

1. 概览

在此 Codelab 中，您将学习如何构建加速移动网页 (AMP)。为此，您将实现一个符合 AMP 规范的简单新闻报道网页，同时纳入移动新闻网站上常用的几个典型 Web 功能。

学习内容

AMP 如何改进移动网站的用户体验。
AMP 网站的基础。
AMP 的限制。
AMP 的网站组件如何解决常见的新闻网站问题。
如何验证 AMP。
如何针对 Google 搜索构建您的 AMP 网页。

所需条件

示例代码
Python（最好是 2.7）或 Chrome 200 OK Web Server 扩展程序
Chrome（或可检查 JavaScript 控制台的同类浏览器）
代码编辑器（例如 Atom、Sublime、Notepad++）

2. 获取示例代码

您可以将所有示例代码下载到计算机上：

…或者，您也可以通过命令行克隆 GitHub 代码库：

$ git clone https://github.com/googlecodelabs/accelerated-mobile-pages-foundations.git

您将下载一个 ZIP 文件，其中包含多个示例资源文件和起始 article.html 页面。

解压缩该文件夹，然后通过计算机上的命令行导航到相应目录。

3. 运行示例网页

为了测试我们的示例网页，我们需要从 Web 服务器访问文件。您可以通过多种方式创建临时本地 Web 服务器以进行测试。在此 Codelab 中，我们将提供 3 种可用选项的说明：

Google Chrome 应用“Web Server for Chrome”- 这是推荐的方法，因为它是最简单且最通用的解决方案。注意：此方法需要安装 Google Chrome。
Firebase Hosting - 如果您还想探索我们的新静态资产托管平台“Firebase Hosting”，则可以选择此选项。默认启用 SSL。
本地 HTTP Python 服务器 - 需要访问命令行。

方法 1：Web Server for Chrome

您可以在 Chrome 应用商店中通过此链接找到“Web Server for Chrome”应用。

安装 Chrome 应用后，您必须通过“选择文件夹”按钮将该应用指向特定文件夹。在此 Codelab 中，您应选择解压缩 Codelab 示例文件的文件夹。

此外，您还应勾选“自动显示 index.html”选项，并将端口设置为“8000”。您需要重启 Web 服务器，这些更改才会生效。

通过以下方式访问此网址：

http://localhost:8000/article.html

如果上述网址成功加载，您可以继续执行下一步。

方案 2：Firebase Hosting

如果您有兴趣探索我们新的 Firebase 静态网站托管服务，可以按照此处提供的说明将 AMP 网站部署到 Firebase 托管网址。

Firebase Hosting 是一种静态托管服务提供商，您可以使用它快速部署和托管静态网站及其资源，包括 HTML、CSS 和 JavaScript 文件。由于静态内容缓存在内容分发网络 (CDN) 中，而该网络在世界各地都设有入网点 (PoP)，因此用户可以享受更低的延迟时间。

最后，Firebase Hosting 始终通过 SSL 提供，因此非常适合 AMP 和一般 Web。如果您更希望专注于 AMP，只需忽略此选项即可。

选项 3：HTTP Python 服务器

如果您不使用 Chrome，或者无法顺利安装 Chrome 扩展程序，也可以通过命令行使用 Python 启动本地 Web 服务器。

如需从命令行运行 Python 的内置 HTTP 服务器，只需执行以下操作：

python -m SimpleHTTPServer

并访问此网址：

http://localhost:8000/article.html

4. 构建常规 HTML 网页

在下载的 zip 文件中，您会找到一个名为 article.html 的文件。这是我们正在为其创建 AMP 等效网页的文章。

复制 article.html 示例中的代码，并将其粘贴到新文件中。将此文件另存为 article.amp.html.

现在，您的 article.amp.html 文件应如下所示：

<!doctype html>
<html lang="en">
  <head>

    <title>News Article</title>

    <link href="base.css" rel="stylesheet" />

    <script type="text/javascript" src="base.js"></script>
  </head>
  <body>
    <header>
      News Site
    </header>
    <article>
      <h1>Article Name</h1>

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam egestas tortor sapien, non tristique ligula accumsan eu.</p>
    </article>
    <img src="mountains.jpg">
  </body>
</html>

这个网页可能有点过于简单，但我们是有意为之，在其中仅添加了常见的静态新闻报道元素：CSS、JavaScript 和一个图片代码。

现在，这篇报道的 AMP 版本尚且只是原报道的副本。我们将其转换为 AMP 吧。首先，我们将添加 AMP JavaScript 库文件，并查看在 AMP 验证器开启时会显示哪些错误。

如需添加 AMP 库，请将以下代码行添加到 <head> 代码块的底部：

<script async src="https://cdn.ampproject.org/v0.js"></script>

现在，让我们通过以下链接在浏览器中加载新的 article.amp.html 页面，并通过 Menu > More Tools > Developer Tools 在 Chrome 中打开开发者控制台：

现在，检查开发者控制台中的 JavaScript 输出。确保您已选择“控制台”标签页：

您应该会看到以下日志：

Powered by AMP ⚡ HTML

现在，如需启用 AMP 验证器，请将此片段标识符添加到您的网址：

#development=1

例如：

http://localhost:8000/article.amp.html#development=1

您可能需要在浏览器中手动刷新页面才能看到此信息。您可以按以下按钮，在浏览器中手动刷新网页：

您应该会收到多个验证错误：

Screen Shot 2016-05-03 at 10.09.51 AM.png

虽然 AMP 是 Accelerated Mobile Pages 的缩写，但它可用于构建在所有屏幕尺寸上都能很好呈现的自适应网页。如需了解详情，请参阅 Google Developers 网站上的自适应网页设计部分。

在 Chrome 开发者工具中模拟移动设备体验。点击此处的手机设备图标：

现在，从该菜单中选择一种移动设备（例如“Pixel 2”）：

您应该会在浏览器中看到该 AMP 网页的移动版模拟效果，如下所示：

现在，我们可以开始修正错误了！我们将逐个查看各项验证错误，并弄清楚它们与 AMP 的关系。

5. 解决验证错误

必须指定字符集

首先，我们将修正以下错误：

The mandatory tag 'meta charset=utf-8' is missing or incorrect.

为了正确显示文本，AMP 要求设置网页的字符集。它还必须是 head 标记的第一个子级。这样做的目的是为了避免重新解读在元字符集标记之前添加的内容。

添加以下代码作为 head 标记的第一行：

<meta charset="utf-8" />

保存该文件，重新加载页面，然后检查此错误是否不再显示。

AMP 文件必须包含 `<link rel=canonical>` 标记。

每个 AMP 文档都必须包含指向规范网页的链接。因此，我们来添加指向原始文章的链接。

接下来，在 <meta charset="utf-8" /> 代码下方添加以下代码：

<link rel="canonical" href="/article.html">

现在，根据需要重启 Web 服务器，然后重新加载网页。虽然仍有许多错误需要修正，但“AMP 文件必须包含 <link rel=canonical> 标记”错误已不再存在。

必须提供 AMP 属性

AMP 要求在网页的根 HTML 元素上添加一个属性，以将网页声明为 AMP 文档：

The mandatory attribute '⚡' is missing in tag 'html ⚡ for top-level html'
The mandatory tag 'html ⚡ for top-level html' is missing or incorrect.

只需向 <html> 标记添加 ⚡ 属性即可解决此问题，如下所示：

<!doctype html>
<html ⚡ lang="en">
  <head>
...

现在，请重新加载网页并检查这两个错误是否已消失。

必须设置视口

接下来，我们将解决以下错误：

The mandatory tag 'meta name=viewport' is missing or incorrect.

AMP 要求为视口定义 width 和 minimum-scale。这些值必须分别定义为 device-width 和 1。视口是 HTML 网页的 <head> 中包含的常见标记。

最好通过将以下 HTML 代码段添加到 <head> 标记中来修正此问题。添加以下 meta 标记：

<!doctype html>
<html ⚡ lang="en">
  <head>
    <meta charset="utf-8" />

    <link rel="canonical" href="/article.html">

    <!-- The following is the meta tag and viewport information we must add to the page: -->
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">

...

这些是 AMP 中 width 和 minimum-scale 的唯一有效值。定义 initial-scale 不是强制性的，但通常会包含在移动 Web 开发中，建议您这样做。如需详细了解视口和自适应设计，请点击此处。

与之前一样，重新加载页面，然后检查错误是否已消失。

外部样式表

以下错误与使用样式表有关：

The attribute 'href' in tag 'link rel=stylesheet for fonts' is set to the invalid value 'base.css'.

具体而言，此错误消息是针对 <head> 标记中的以下样式表链接标记提出的：

<link href="base.css" rel="stylesheet" />

问题在于，这是一个外部样式表引用。在 AMP 中，为了尽可能缩短文档的加载时间，开发者不得添加外部样式表。所有样式表规则都必须以内嵌方式包含在 AMP 文档中。

因此，请移除 <head> 中的链接标记，并替换为内嵌标记，例如：

<style amp-custom>

body {
  width: auto;
  margin: 0;
  padding: 0;
}

...

</style>

样式标记的内容应直接从项目目录中的 base.css 文件复制。样式标记上的 amp-custom 属性是必需的。

再次重新加载页面，检查样式表错误是否已消失。

第三方 JavaScript

虽然可以通过内嵌相对轻松地使用 AMP 重做样式表，但 JavaScript 却并非如此。

The tag 'script' is disallowed except in specific forms.

在 AMP 中，不允许使用用户生成的脚本。只有当 AMP 中的脚本满足以下两个主要要求时，才允许使用：

所有 JavaScript 都必须是异步的，即在脚本标记中添加 async 属性。
只能包含 AMP 库和 AMP 组件。

这实际上排除了使用所有第三方 JavaScript 的可能性。不过，第三方 JavaScript 可在 iframe 中使用。

尝试打开外部 base.js 文件。发现了什么？此文件应该不含任何 JavaScript 代码，并且只包含如下所示的信息注释：

/*

This external JavaScript file is intentionally empty.

Its purpose is merely to demonstrate the AMP validation error related to the use of external JavaScript files.

*/

考虑到此外部 JavaScript 文件不是我们网站的功能组件，我们可以安全地完全移除该引用。

从文档中移除以下外部 JavaScript 引用：

<script type="text/javascript" src="base.js"></script>

现在，重新加载页面，并检查脚本错误是否已消失。

AMP CSS 样板

The mandatory tag 'noscript enclosure for boilerplate' is missing or incorrect.
The mandatory tag 'head > style : boilerplate' is missing or incorrect.
The mandatory tag 'noscript > style : boilerplate' is missing or incorrect.

以下错误是指 <head> 标记中缺少两个标记。每个 AMP 文档都必须包含以下标记：

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

将上述代码段添加到文档的 <head> 标记底部。

第一个标记会使网页内容处于不可见状态，直到 AMP JavaScript 库更新 body 标记，使网页内容在准备好渲染时再次变为可见状态。AMP 这样做是为了防止显示尚未设置样式的网页内容。这样可确保用户体验真正即时，因为网页的内容会一次性显示，并且首屏之上的所有内容都会一起呈现。第二个标记可在浏览器停用 JavaScript 时还原此逻辑。

amp-img 代码

The tag 'img' may only appear as a descendant of tag 'noscript'. Did you mean 'amp-img'?

AMP 有一个专门用于替换图片标记的 Web 组件，称为 amp-img：

<amp-img src="mountains.jpg"></amp-img>

尝试添加上述 amp-img 标记，然后再次运行验证器。您应该会遇到几个新的错误：

AMP-IMG# Layout not supported for: container
The implied layout 'CONTAINER' is not supported by tag 'amp-img'.

为什么 amp-img 会触发另一个错误？因为 amp-img 并非传统 HTML img 标记的直接替代品。使用 amp-img 时，还需要满足其他要求。

布局系统

此错误表明 amp-img 不支持“container”布局类型。AMP 设计中最重要的概念之一是，它侧重于减少渲染网页所需的 DOM 重排量。

为了减少 DOM 重排，AMP 包含一个布局系统，用于确保在下载和渲染网页的生命周期中，网页的布局尽可能早地变得尽可能固定。

借助布局系统，您可以采用各种方式来定位和缩放网页上的元素，例如固定尺寸、自适应设计、固定高度等。

在本例中，布局系统将 amp-img 的布局类型推断为 container 类型。不过，容器类型适用于包含子元素的元素，与 amp-img 标记不兼容，这正是导致此错误的原因。

为什么系统会推断容器类型？因为我们没有为 amp-img 标记指定高度属性。在 HTML 中，您可以通过始终为网页中的元素指定固定的宽度和高度来减少重排量。在 AMP 中，建议为 amp-img 元素定义宽度和高度，这样 AMP 就能了解元素的宽高比。

将宽度和高度设置为如下值：

<amp-img src="mountains.jpg" width="266" height="150"></amp-img>

刷新页面并检查验证程序，您应该不会再看到任何错误！不过，由于图片在页面上的位置不太合适，因此看起来不太好。如果我们能缩放图片，使其无论屏幕尺寸如何，都能自适应地拉伸并适应页面，那就太棒了。

令人惊讶的是，定义宽度和高度并不会将元素限制为完全固定的尺寸。AMP 布局系统可以通过了解元素的宽高比，以多种方式定位和缩放元素。布局属性会告知 AMP 您希望如何定位和缩放元素。

通过将布局属性设置为 responsive，我们可以实现此目的：

<amp-img src="mountains.jpg" layout="responsive" width="266" height="150"></amp-img>

瞧！图片采用了正确的宽高比，并以自适应的方式填满了屏幕的整个宽度。

成功！

现在，您的 AMP 文档应如下所示：

<!doctype html>
<html ⚡ lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">    

    <link rel="canonical" href="/article.html">
    <link rel="shortcut icon" href="amp_favicon.png">

    <title>News Article</title>

    <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>
    <style amp-custom>
      body {
        width: auto;
        margin: 0;
        padding: 0;
      }

      header {
        background: Tomato;
        color: white;
        font-size: 2em;
        text-align: center;
      }

      h1 {
        margin: 0;
        padding: 0.5em;
        background: white;
        box-shadow: 0px 3px 5px grey;
      }

      p {
        padding: 0.5em;
        margin: 0.5em;
      }
    </style>
    <script async src="https://cdn.ampproject.org/v0.js"></script>  
  </head>
  <body>
    <header>
      News Site
    </header>
    <article>
      <h1>Article Name</h1>

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam egestas tortor sapien, non tristique ligula accumsan eu.</p>

      <amp-img src="mountains.jpg" layout="responsive" width="266" height="150"></amp-img>
    </article>
  </body>
</html>

刷新页面，然后查看控制台输出。您应该会看到以下消息：

AMP validation successful.

常见问题解答

6. 规范网址、元数据和搜索

新 AMP 计划的一部分是在 Google 搜索结果界面中突出显示有效的 AMP 文档，作为新的轮播界面的一部分。此界面可为在网络上搜索文章的用户提供更好的用户体验。为了尽可能提供最佳体验，所包含的网页除了要通过 AMP 验证器之外，还必须满足某些条件。

此步骤概述了完整的要求。

关联规范网页和 AMP 文档

AMP 旨在提高网页速度，虽然该项目早期更侧重于静态内容，但随着 amp-bind 等组件的添加，它已非常适合各种网站，例如新闻发布商、电子商务网站、旅游网站、博客等。

不过，您必须全面了解 AMP 在网站结构中的位置。虽然 AMP 可用于构建整个网站，但许多发布商更喜欢采用配对方法，即生成 AMP 文档作为发布商托管在其网站上的常规 HTML 文章的配套文档。

在常规 HTML 网页中，规范链接是一种常用技术，用于声明当多个网页包含相同内容时，应将哪个网页视为首选网页。由于 AMP 文档可以生成为与网站的传统文章网页一起提供，因此我们应将传统 HTML 网页视为“规范”网页。

我们已在 AMP 文档中采取了第一步，通过在 <head> 中添加指向规范网页的链接标记来实现此目的：

<link rel="canonical" href="/article.html">

下一步是将权威报道关联到 AMP 网页。为此，请在规范文章的 <head> 部分中添加 <link rel="amphtml"> 标记。

将以下代码添加到 article.html 文件的 <head> 部分：

<link rel="amphtml" href="/article.amp.html">

以下图表展示了链接标记的配对方向：

必须设置这种双向链接，Google 搜索抓取工具才能了解常规 HTML 规范文档与 AMP 文档之间的关系。如果没有提供任何链接，那么抓取工具就不一定能清楚地知道哪些文章是常规 HTML 文档的“AMP 版本”。通过明确提供此类链接，我们可确保消除不确定性！

Schema.org 搜索引擎元数据

AMP 文档要显示在新的轮播界面中，还必须遵守 Schema.org 的搜索引擎元数据规范。此元数据通过 application/ld+json 类型的脚本标记包含在文档的 <head> 标记中。

将以下代码添加到 AMP 文档的 <head> 部分底部：

<script type="application/ld+json">
{
 "@context": "http://schema.org",
 "@type": "NewsArticle",
 "mainEntityOfPage":{
   "@type":"WebPage",
   "@id":"https://example.com/my-article.html"
 },
 "headline": "My First AMP Article",
 "image": {
   "@type": "ImageObject",
   "url": "https://example.com/article_thumbnail1.jpg",
   "height": 800,
   "width": 800
 },
 "datePublished": "2015-02-05T08:00:00+08:00",
 "dateModified": "2015-02-05T09:20:00+08:00",
 "author": {
   "@type": "Person",
   "name": "John Doe"
 },
 "publisher": {
   "@type": "Organization",
   "name": "⚡ AMP Times",
   "logo": {
     "@type": "ImageObject",
     "url": "https://example.com/amptimes_logo.jpg",
     "width": 600,
     "height": 60
   }
 },
 "description": "My first experience in an AMPlified world"
}
</script>

在浏览器中重新加载页面，并仔细检查是否引入了任何 AMP 验证错误。

现在，请在新浏览器窗口中打开结构化数据验证工具，然后点击“测试我的标记”。然后，选择“代码段”标签页，复制 AMP 网页的完整源代码并将其粘贴到验证工具的文本编辑器面板中，然后点击“运行测试”：

您应该会在页面上看到类似以下内容：

若要使新闻报道显示在新的 Google 搜索轮播界面中，必须满足以下关键要求：

确保您的 AMP 文档通过验证。
通过 <link> 标记从传统 HTML 网页引用 AMP 文档，反之亦然。
添加上述搜索引擎元数据标记。

如需了解详情，请参阅网页发现。

7. 恭喜！

您已完成此 Codelab，并成功探索了 AMP 文档的许多基本概念。

希望您不仅了解了如何在 AMP 文档中实现这些概念和功能，还了解了 AMP 的设计方式。

以下是一些其他主题和链接，您不妨探索一下，以便进一步提升技能！