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 要求您为页面指定字符集。元字符集信息还必须是 <head> 标记的第一个子元素。此标记必须位于首位的原因是为了避免重新解释在元字符集标记之前添加的内容。

添加 以下代码作为 <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. 删除 <link> 标记，该标记指向 <head> 中的样式表，并将其替换为内联的 <style amp-custom></style> 标记。样式标记上的 amp-custom 属性是必需的。
  2. 将 base.css 文件中的所有样式复制到 <style amp-custom></style> 标记中。

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

注意 – 不仅需要嵌入式样式，而且所有样式信息的总文件大小限制为 50 KB。您应该使用 CSS 预处理器（如 SASS）来缩小 CSS，然后再将 CSS 内联到 AMP 页面中。

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

排除第三方 JavaScript

虽然通过内联 CSS，样式表可以相对轻松地使用 AMP 进行重新调整，但 JavaScript 的情况并非如此。

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

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

  1. 所有 JavaScript 都必须是异步的（即，在 script 标记中包含 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> 标记最初会隐藏 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.

常见问题

上一章 下一章