Time to sync up! Tune in for Google I/O on May 14, 2024. Register now.

此页面由 Cloud Translation API 翻译。

Accelerated Mobile Pages 基础知识

在此 Codelab 中，您将学习如何构建 Accelerated Mobile Pages（简称 AMP）。为此，您将实现一个符合 AMP 规范的简单新闻报道网页，同时加入一些在移动新闻网站上常用的典型网络功能。

学习内容

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

您需要满足的条件

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

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

下载 Zip 文件

...或者从命令行克隆 GitHub 代码库：

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

您将下载一个包含几个示例资源文件和初始 article.html 网页的 ZIP 文件。

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

为了测试示例网页，我们需要从网络服务器访问相关文件。您可以通过多种方法创建用于测试的临时本地网络服务器。在此 Codelab 中，我们将提供 3 个可用方案的说明：

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

方法 1：适用于 Chrome 的网络服务器

您可以在 Chrome 网上应用店中的此链接找到“适用于 Chrome 的网络服务器”应用。

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

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

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

http://localhost:8000/article.html

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

选项 2：Firebase Hosting

如果您有兴趣了解我们新推出的 Firebase 静态网站托管功能，可以按照此处的说明，将您的 AMP 网站部署到 Firebase 托管网址。

Firebase Hosting 是一个静态托管服务提供商，可用于快速部署和托管静态网站及其资源（包括 HTML、CSS 和 JavaScript 文件）。由于静态内容会缓存在遍布世界各地的内容分发网络 (CDN) 中，因此用户能受益于更低的延迟。

最后，Firebase Hosting 始终通过 SSL 提供，因此非常适合 AMP 和整个网络。如果您更希望完全专注于 AMP 技术，只需忽略此选项即可。

方法 3：HTTP Python 服务器

如果您不使用 Chrome 或难以安装 Chrome 扩展程序，也可以通过命令行使用 Python 启动本地网络服务器。

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

python -m SimpleHTTPServer

访问此网址：

http://localhost:8000/article.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

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

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

2016 年 5 月 3 日上午 10.09.51 屏幕截图

即使 AMP 代表 Accelerated Mobile Pages，也可以用来构建可在所有尺寸的屏幕上正常呈现的自适应网页。如需了解详情，请查看 Google Developers 网站的自适应设计部分。

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

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

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

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

必须提供字符集

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

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

现在，请根据需要重启您的网络服务器，然后重新加载此页面。虽然仍有很多错误需要修正，但 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 不是强制性要求，但移动网站开发中经常会需要定义它，所以我们建议您这样做。您可以点击此处详细了解视口和自适应设计。

和以前一样，重新加载页面并检查错误是否已消失。

外部样式表

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

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 的使用。但有一种例外情况：可以在 iframe 中使用第三方 JavaScript。

请尝试打开外部 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 库在网页内容准备好呈现后将正文代码更新为可以再次显示时。这样做是为了防止页面内容尚未设置样式。这样可以确保网页的内容同时显示，并且首屏中的所有内容都会一起呈现，从而为用户带来真正的即时体验。第二个标记可在浏览器停用 JavaScript 时还原此逻辑。

amp-img 标记

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

AMP 有一个专门替换图片标记的网络组件，名为 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&#39 的设计中最重要的概念之一就是，它注重减少呈现网页所需的 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.

常见问题解答

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

此步骤概述了完整要求。

关联规范网页和 AMP 文档

AMP 旨在提高网页加载速度。尽管该项目早期专注于静态内容，但添加 amp-bind 等组件仍使它非常适合各种网站，例如新闻发布商、电子商务、旅游网站、博客等。

不过，您应全面了解 AMP 应如何放置在网站结构中，这一点至关重要。虽然 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 文档之间的关系，必须设置这种双向链接。如果未提供任何链接，抓取工具就不一定清楚哪些 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 网页中复制完整的源代码并将其粘贴到验证工具的文本编辑器面板中，然后点击“运行测试”：

您应该会在此页面上看到如下内容：

若要让 AMP 版本的新新闻报道出现在新的 Google 搜索轮播界面中，主要要求如下：

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

详细了解网页发现。

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

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

为了进一步提升您的技能，建议您探索下列其他主题和链接！