AMP

为广告创建外壳

AMPHTML 广告所需的 HTMLAMP 网页所需的 AMPHTML 的变体。让我们通过创建 AMPHTML 广告的外壳来熟悉所需的代码。

使用您常用的文本编辑器,创建一个名为 my-amphtml-ad.html 的 HTML 文件。将以下 HTML 标记复制到该文件中:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>My amphtml ad</title>
    <meta name="viewport" content="width=device-width" />
  </head>
  <body></body>
</html>

此标记适用于基本的有效 HTML 文件。请注意,我们添加了 meta 视口标记,因此将生成自适应视口

现在,让我们修改 HTML,使其成为 AMPHTML 广告。

<html> 标记中添加 ⚡4ads 属性,该属性可将文档标识为 AMPHTML 广告。或者,您也可以指定 amp4ads 属性,同样有效。

<!DOCTYPE html>
<html 4ads>
  <head>
    ...
  </head>
</html>

AMPHTML 广告需要其自己的 AMP 运行时版本,因此请在文档的 <head> 部分中添加以下 <script> 标记:

<script async src="https://cdn.ampproject.org/amp4ads-v0.js"></script>

AMPHTML 广告素材需要采用与 AMP 网页不同且更简单的样板样式行。请在您的 <head> 部分中添加以下代码:

<style amp4ads-boilerplate>
  body {
    visibility: hidden;
  }
</style>

要为您的 AMPHTML 广告设置样式,必须在 AMPHTML 文档中内嵌您的 CSS,方法是在 部分中使用 标记。由于我们呈现的是基本图片广告,不需要任何 CSS,因此我们暂不添加这些标记。

:对于 AMPHTML 广告,内嵌样式表的最大大小为 20 KB。详细了解 AMPHTML 广告规范中的 CSS 要求

以下为 HTML 文件的完整代码:

<!DOCTYPE html>
<html 4ads>
  <head>
    <meta charset="utf-8" />
    <title>My amphtml ad</title>
    <meta name="viewport" content="width=device-width" />
    <script async src="https://cdn.ampproject.org/amp4ads-v0.js"></script>
    <style amp4ads-boilerplate>
      body {
        visibility: hidden;
      }
    </style>
  </head>
  <body></body>
</html>

您已创建了有效的 AMPHTML 广告,尽管其中尚未提供丰富的内容。接下来,让我们创建图片广告。