AMP
EN
Deutsch Français العربية Español Italiano Indonesia 日本語 한국어 Português Русский Türkçe 中文 Polski Tiếng việt

解决验证错误

在本部分中，我们将解决 AMP 页面中的 AMP 验证错误。请注意，错误可能以不同的顺序显示在你的控制台中。

包含字符集

我们将从修复以下错误开始

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

为了正确显示文本，AMP 要求你为页面指定字符集。meta 字符集信息还必须是 <head> 标签的第一个子级。此标签必须排在第一位的原因是避免重新解释在 meta 字符集标签之前添加的内容。

将以下代码添加为 <head> 标签的第一行

<meta charset="utf-8" />

保存文件并重新加载页面。验证字符集错误不再出现。

现在，我们来看一下以下错误

The mandatory tag 'link rel=canonical' is missing or incorrect.

每个 AMP 文档都需要有一个链接，引用该文档的“规范”版本。我们将在本教程的使您的页面可发现步骤中，详细了解规范页面是什么，以及规范链接的不同方法。

对于本教程，我们将考虑我们正在转换为规范页面的原始 HTML 文章。

继续并添加以下代码，位于 <meta charset="utf-8" /> 标记下方

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

您可以创建一个独立的规范 AMP 页面。规范链接仍然是必需的，但应指向 AMP 文章本身

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

现在，重新加载页面。虽然仍有许多错误需要修复，但规范链接错误不再存在。

指定 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> 标记添加 ⚡ 属性来解决上述错误，如下所示

<html ⚡ lang="en">

现在，继续，重新加载页面并检查两个错误是否都已消失。

虽然指定 ⚡ 是推荐的方法，但也可以使用 amp 属性代替 ⚡ 属性，如下所示

<html amp lang="en">

指定视口

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

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

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

要解决视口错误，请将以下 HTML 代码段添加到 <head> 标记

<meta name="viewport" content="width=device-width">

为 width 和 minimum-scale 指定的值是 AMP 中所需的值。定义 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 中，为了尽可能缩短文档的加载时间，您不能包含外部样式表。相反，所有样式表规则都必须使用 <style amp-custom></style> 标签或作为内联样式嵌入到 AMP 文档中。

<style amp-custom>

/* The content from base.css */

</style>

因此，让我们解决此错误

  1. 移除 <head> 中指向样式表的 <link> 标签，并用内联 <style amp-custom></style> 标签替换它。样式标签上的 amp-custom 属性是必需的。
  2. 复制 base.css 文件中的所有样式到 <style amp-custom></style> 标签中。

再次重新加载页面并验证样式表错误是否已消失。

注意 – 不仅需要嵌入式样式，而且所有样式信息的文件大小限制为 50 千字节。您应该使用 CSS 预处理器（例如 SASS）在将 CSS 内联到 AMP 页面中之前对其进行缩小。

重要 – 您的整个 AMP 文档中只能有一个样式标签。如果您的 AMP 页面引用了多个外部样式表，您需要将这些样式表整理成一组规则。要了解哪些 CSS 规则在 AMP 中有效，请阅读 受支持的 CSS。

排除第三方 JavaScript

虽然通过内联 CSS 可以相对容易地使用 AMP 重新制作样式表，但 JavaScript 却并非如此。

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

一般来说，只有满足两个主要要求时，才允许在 AMP 中使用脚本

  1. 所有 JavaScript 必须是异步的（即，在脚本标签中包含 async 属性）。
  2. JavaScript 用于 AMP 库和页面上的任何 AMP 组件。

这实际上排除了在 AMP 中使用所有用户生成/第三方 JavaScript，但如下所述除外。

对用户生成/第三方脚本的限制的唯一例外是

  1. 向页面添加元数据或配置 AMP 组件的脚本。这些脚本将具有类型属性 application/ld+json 或 application/json。
  2. 包含在 iframe 中的脚本。在 iframe 中包含 JavaScript 应被视为最后的手段。在可能的情况下，应使用 AMP 组件 替换 JavaScript 功能。我们将在下一部分中探索我们的第一个 AMP 组件。

尝试打开外部 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.

每个 AMP 文档都需要以下 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> 标记底部。

<style amp-boilerplate> 标记最初会隐藏正文内容，直到加载 AMP JavaScript 库，然后才会呈现内容。AMP 这样做是为了防止未设置样式的内容呈现，也称为未设置样式内容的闪现 (FOUC)。这有助于确保用户体验感觉真正即时，因为页面的内容会一次性全部显示，并且折叠以上的所有内容都会一起呈现。如果浏览器中禁用了 JavaScript，第二个标记会还原此逻辑。

将 <img> 替换为 <amp-img>

AMP 不支持显示媒体的默认 HTML 对应项，这解释了以下错误

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

AMP 有一个专门设计用于替换 <img> 标记的 Web 组件，即 <amp-img> 标记

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

将 <img> 标记替换为上述 <amp-img> 标记，然后再次运行验证器。你应该会收到几个新错误

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

为什么 amp-img 触发了另一个错误？因为 amp-img 不是传统 HTML img 标记的直接替代品。使用 amp-img 时还有其他要求。

AMP 布局系统

布局错误告诉我们，amp-img 不支持 container 布局类型。AMP 设计中最重要的概念之一是专注于减少呈现其网页所需的 DOM 回流量。

为了减少 DOM 回流，AMP 包含一个布局系统，以确保页面的布局在下载和呈现页面的生命周期中尽早得知。

下图比较了 HTML 页面的常见布局方式与 AMP 强制采用的方法。请注意，在左侧的方法中，每次加载广告或图像时文本都会回流。AMP 的布局方法可防止文本移动，即使图像和广告需要很长时间才能加载。

内容正常布局方式与 AMP 方法的比较

AMP 布局系统允许页面上的元素以多种方式定位和缩放——固定尺寸、响应式设计、固定高度等。

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

为什么推断出 container 类型？因为我们没有为 amp-img 标记指定 height 属性。在 HTML 中，可以通过始终为页面上的元素指定固定宽度和高度来减少重排。在 AMP 中，您需要为 amp-img 元素定义宽度和高度，以便 AMP 可以预先确定元素的纵横比。

添加 width 和 height 到您的 amp-img 标记，如下所示

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

刷新页面并检查验证器；您应该不再看到任何错误！

您现在有一个有效的 AMP 文档，但图像看起来不太好，因为它在页面上位置尴尬。默认情况下，当您为 amp-img 指定高度和宽度时，AMP 会将尺寸固定为您指定的尺寸——但如果 AMP 可以将图像按比例缩放以响应式地拉伸和适应页面，无论屏幕大小如何，岂不是很好吗？

我们的图像没有响应。

幸运的是，AMP 可以根据您指定的宽度和高度找出元素的纵横比。这允许 AMP 布局系统以多种方式定位和缩放元素。layout 属性告知 AMP 您希望如何定位和缩放元素。

让我们将布局属性设置为 responsive，以便我们的图像缩放和调整大小

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

瞧！我们的图像具有正确的纵横比，并响应式地填充屏幕的宽度。

我们的图像现在具有响应性！

继续阅读 – 在 AMP 布局规范 中了解有关 AMP 布局系统的更多信息。

成功！

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

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

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

常见问题

上一章 下一章