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

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

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

重要提示 – 您的整个 AMP 文档中只能有一个 style 标记。如果您的 AMP 页面引用了多个外部样式表，则需要将这些样式表整理为一组规则。要了解哪些 CSS 规则在 AMP 中有效，请阅读 支持的 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 组件的脚本。这些将具有类型属性 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.

常见问题

上一章 下一章