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 charset 信息也必须是 <head> 标签的第一个子元素。此标签必须是第一个的原因是为了避免重新解释在 meta charset 标签之前添加的内容。

在 <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 不是强制性的，但它通常包含在移动 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 中，为了尽可能缩短文档的加载时间，您不能包含外部样式表。相反，所有样式表规则都必须使用 <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 KB。您应该在将 CSS 内联到 AMP 页面之前使用 SASS 等 CSS 预处理器来缩小 CSS。

重要提示 – 您的整个 AMP 文档中只能有一个样式标签。如果您的 AMP 页面引用了多个外部样式表，则需要将这些样式表整理为一组规则。要了解 AMP 中哪些 CSS 规则有效，请阅读支持的 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 组件的脚本。这些将具有 type 属性 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 你希望如何定位和缩放元素。

让我们将 layout 属性设置为 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.

常见问题解答

上一章 下一章