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 不是强制性的，但它是移动 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。您应该使用诸如 SASS 之类的 CSS 预处理器来缩小 CSS，然后再将 CSS 内联到 AMP 页面中。

重要 – 您的整个 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 组件的脚本。这些将具有类型属性 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> 标签最初会隐藏 body 的内容，直到加载 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.

常见问题

上一章 下一章