跳至正文

用于移动优化的 10 大基本 AMP 组件

用于移动优化的 10 大基本 AMP 组件

Accelerated Mobile PagesAMP是 Google 旨在加快移动网络速度的一项举措。为实现这一目标,AMP 标准限制了您使用 HTML、CSS 和 JavaScript 的方式,并通过其自身的运行时管理外部资源(例如图像、视频和广告)的加载

这意味着您不能在 AMP 文档中使用任何自定义(作者编写或第三方)JavaScript 或任何与资源相关的 HTML 元素,例如图像和视频。

为了弥合用户需求和最佳性能实践之间的差距,AMP 提供了特定的组件,您可以使用这些组件来代替这些被排除的元素

AMP 组件是特定的 HTML 标记它们的行为类似于常规的 HTML 标签:它们具有开始和结束标签、属性,并且其中大部分都可以使用CSS 设置样式它们很容易识别,因为它们总是以amp-前缀 开头

AMP 组件有两种类型:内置组件和扩展组件。

加速移动页面 (AMP) 初学者指南

加速移动页面 (AMP) 初学者指南


Accelerated Mobile Pages 是 Google 的一项计划,旨在解决移动网络的最大问题 –…
阅读更多

内置 AMP 组件

内置函数内置于 AMP 的 JavaScript 运行时,因此您不必单独包含它们。

1.amp-img

<amp-img>替换<img>AMP HTML 文档中的标记。您需要像使用常规元素一样添加src和属性alt<img>

<amp-img>还有两个其他必需属性:您始终需要以整数像素值指定widthheight属性,因为这允许 AMP 运行时提前计算布局

如果你想让图像响应,添加layout="responsive"属性。layout属性控制 AMP 文档中的布局,并且可以将其添加到任何 AMP 组件(在AMP 布局系统上了解更多信息)。

1个
2个
3个
<amp-img src="img.jpg" width="350" height="200"
    layout="responsive" alt="My Image">
</amp-img>

您还可以使用标签srcset上的属性为不同的视口和像素密度指定不同的图像它的工作方式与非 AMP 图片相同。<amp-img>

2.amp-video

<amp-video>可用于直接在 AMP HTML 文档中嵌入 HTML 视频它取代了<video>AMP 文件中的内容。标签<amp-video>延迟加载视频以优化性能。

视频源必须通过 HTTPS 协议提供您需要添加widthheight属性,就像<amp-img>组件一样。

<amp-video>标签有许多可选属性,例如autoplayposter,您可以指定这些属性来微调 HTML5 视频的显示方式。

&lt;amp-video&gt;支持 mp4、webm、ogg 和HTML5 <video> 支持的所有其他格式 标签

如果需要,您还可以使用属性和HTML 标记为使用不支持 HTML5 视频的浏览器的用户添加后备视频fallback&lt;source&gt;

1个
2个
3个
4个
5个
6个
7
8个
&lt;amp-video width="350" height="250"
  src="https://example.com/video.mp4" layout="responsive" autoplay&gt;
  &lt;div fallback&gt;
    &lt;p&gt;Your browser doesn't support HTML5 videos.&lt;/p&gt;
  &lt;/div&gt;
  &lt;source type="video/mp4" src="myvideo.mp4"&gt;
  &lt;source type="video/webm" src="myvideo.webm"&gt;
&lt;/amp-video&gt;
3.amp-adamp-embed

&lt;amp-ad&gt;为您提供iframe 沙箱,您可以在其中展示您的广告您必须通过 HTTPS 协议投放您的广告

您不能自己运行广告网络提供的脚本。相反,AMP 运行时在沙箱内执行给定网络的 JavaScript。只需要指定您使用的网络,并添加您的数据。

&lt;amp-ad&gt;组件要求您使用和属性添加广告的尺寸widthheight

您可以使用该type属性定义您使用的广告网络。查看支持的广告网络列表

每个广告网络都有自己的data-*属性,您还需要添加这些属性。要查看您需要哪一个,请在上面的列表中单击您的广告网络。

1个
2个
3个
4个
5个
&lt;amp-ad width="300" height="250"
    layout="responsive" type="adsense"
    data-ad-client="ca-pub-2005682797531342"
    data-ad-slot="7046626912"&gt;
&lt;/amp-ad&gt;

&lt;amp-embed&gt;是 的别名,除了在语义上更准确的情况&lt;amp-ad&gt;下可以使用它来代替之外,文档并没有说明太多由于 Google 承诺会随着时间的推移改进与广告相关的 AMP 组件,因此这在未来可能会发生变化。&lt;amp-ad&gt;

4.amp-pixel

使用&lt;amp-pixel&gt;,您可以将跟踪像素添加到 AMP HTML 文档以计算页面浏览量它只有一个属性,即 requiredsrc属性,您需要在该属性中指定属于跟踪像素的 URL

&lt;amp-pixel&gt;代码允许使用标准 URL 替换,这意味着您可以生成随机 URL 值来跟踪每次展示。

如果您想使用此组件,请参阅 AMP 的URL 替换指南。请注意,您不能为&lt;amp-pixel&gt;组件设置样式。

1个
&lt;amp-pixel src="https://example.com/pixel?RANDOM"&gt;&lt;/amp-pixel&gt;

扩展 AMP 组件

由于扩展的 AMP 组件不是 JavaScript 运行时的一部分,因此您始终需要将它们导入&lt;head&gt;到要使用它们的 AMP 页面部分

注意:组件版本将来可能会更改,所以不要忘记在文档中检查当前版本。

5.amp-audio

&lt;amp-audio&gt;取代了HTML5 标签,并使得直接在 AMP 页面中嵌入 HTML5 音频文件&lt;audio&gt;成为可能

要使用它,您需要指定src,widthheight属性,您还可以添加三个可选属性autoplay,loopmuted

为使用不支持 HTML5 的浏览器的用户添加后备音频文件也是一个好主意。您可以使用fallback属性和&lt;source&gt;标签来完成此操作,就像上述&lt;amp-video&gt;组件一样。

AMP组件&lt;amp-audio&gt;支持与HTML5 标记相同的音频格式&lt;audio&gt;

1个
2个
3个
4个
5个
6个
7
8个
&lt;amp-audio width="200" height="100"
  src="https://example.com/audio.mp3"&gt;
  &lt;div fallback&gt;
    &lt;p&gt;Your browser doesn't support HTML5 audio.&lt;/p&gt;
  &lt;/div&gt;
  &lt;source type="audio/mpeg" src="mysong.mp3"&gt;
  &lt;source type="audio/ogg" src="mysong.ogg"&gt;
&lt;/amp-audio&gt;

要使用,请在AMP 文档的部分&lt;amp-audio&gt;中包含以下脚本:&lt;head&gt;

1个
2个
3个
&lt;script async custom-element="amp-audio"
    src="https://cdn.ampproject.org/v0/amp-audio-0.1.js"&gt;
&lt;/script&gt;
6.amp-iframe

&lt;amp-iframe&gt; 在 AMP 文档中显示 iframe 。&lt;amp-iframe&gt;已经比常规的 HTML iframe 更安全。因此它们默认是沙箱化的

一些规则与&lt;amp-iframe&gt;您必须遵守才能通过验证有关。

您必须指定widthheightsandbox属性。sandbox属性默认为空,但您可以为其指定不同的值以修改 iframe 的行为,例如sandbox="allow-scripts"让 iframe 运行 JavaScript。您也可以使用标准 iframe 的属性。

1个
2个
3个
4个
5个
6个
&lt;amp-iframe width="350" height="250"
     layout="responsive"
     sandbox="allow-scripts allow-same-origin"
     allowfullscreen
     src="https://example.com/iframe"&gt;
 &lt;/amp-iframe&gt;

虽然 的尺寸由和属性&lt;amp-iframe&gt;预定义,但有一种方法可以在运行时调整它的大小要使用该组件,请将以下脚本添加到您的 AMP 页面:widthheight&lt;amp-iframe&gt;

1个
2个
3个
&lt;script async custom-element="amp-iframe"
    src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"&gt;
&lt;/script&gt;
7.amp-accordion

手风琴构成了移动设计中常见的 UI 模式,因为它们节省空间,但仍以可访问的方式显示内容。&lt;amp-accordion&gt;可以快速将手风琴添加到 AMP 页面。

手风琴部分必须使用&lt;section&gt;HTML5 标签,并且需要是该标签的直接子元素&lt;amp-accordion&gt;

每个部分必须有两个直接子级

  1. 一个用于标题
  2. 一个用于内容(内容也可以是图像)

expanded在您要默认展开的任何部分上使用该属性。

1个
2个
3个
4个
5个
6个
7
8个
9
10
11
12
13
14
15
16
17
18
19
&lt;amp-accordion&gt;
  &lt;section expanded&gt;
    &lt;h3&gt;Section 1&lt;/h3&gt;
    &lt;div&gt;Content of Section 1&lt;/div&gt;
  &lt;/section&gt;
  &lt;section&gt;
    &lt;h3&gt;Section 2&lt;/h3&gt;
    &lt;p&gt;Content of Section 2&lt;/p&gt;
  &lt;/section&gt;
  &lt;section&gt;
    &lt;h3&gt;Section 3&lt;/h3&gt;
    &lt;figure&gt;
      &lt;amp-img src="image.jpg" width="350" height="200"
          layout="responsive" alt="Image for Section 3"&gt;
      &lt;/amp-img&gt;
      &lt;figcaption&gt;Image for Section 3&lt;/figcaption&gt;
    &lt;/figure&gt;
  &lt;/section&gt;
&lt;/amp-accordion&gt;

要在 AMP 文档中使用该&lt;amp-accordion&gt;组件,请包含以下脚本:

1个
2个
3个
&lt;script async custom-element="amp-accordion"
    src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js"&gt;
&lt;/script&gt;
8.amp-lightbox

&lt;amp-lightbox&gt; 为 Accelerated Mobile Pages 上的不同元素(在大多数情况下为图像)添加灯箱。

当用户与元素交互时,例如点击它,灯箱会展开并填满整个视口您需要添加用户可以点击的按钮或其他控件。

请注意,amp-lightbox只能与布局一起使用nodisplay

1个
2个
3个
4个
5个
6个
7
8个
9
10
11
&lt;button on="tap:mylightbox" role="button" tabindex="0"&gt;
  Expand
&lt;/button&gt;
 
&lt;amp-lightbox id="mylightbox" layout="nodisplay"&gt;
  &lt;div class="lightbox" on="tap:mylightbox.close"
      role="button" tabindex="0"&gt;
      &lt;amp-img src="full-image.jpg" width="375" height="667"
      on="tap:my-lightbox.close"&gt;
  &lt;/div&gt;
&lt;/amp-lightbox&gt;

要使用该&lt;amp-lightbox&gt;组件,您需要使用以下代码导入它:

1个
2个
3个
&lt;script async custom-element="amp-lightbox"
    src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"&gt;
&lt;/script&gt;
9.amp-carousel

轮播在移动设计中经常使用,因为它们允许沿水平轴显示许多相似的元素(最常见的是图像)。AMP 结果也在 Google 搜索中以轮播格式呈现。

&lt;amp-carousel&gt;组件使您能够将轮播添加到您的站点。组件的直接子级&lt;amp-carousel&gt;被视为轮播的项目width您必须使用和属性定义轮播的尺寸height

您可以使用可选type属性来确定如何显示轮播项目如果该type属性取值"carousel",则项目将显示为连续条带(这是默认设置),而该值将以幻灯片格式"slides"显示项目

&lt;amp-carousel&gt;标记还有其他可选属性,可以帮助您微调结果。

在下面的示例中,请注意轮播及其所有项目都使用相同的widthheight

1个
2个
3个
4个
5个
6个
&lt;amp-carousel width="300" height="400" layout="responsive"
  type="slides"&gt;
  &lt;amp-img src="image1.jpg" width="300" height="400"&gt;&lt;/amp-img&gt;
  &lt;amp-img src="image2.jpg" width="300" height="400"&gt;&lt;/amp-img&gt;
  &lt;amp-img src="image3.jpg" width="300" height="400"&gt;&lt;/amp-img&gt;
&lt;/amp-carousel&gt;

&lt;amp-carousel&gt;组件需要添加以下脚本:

1个
2个
3个
&lt;script async custom-element="amp-carousel"
    src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"&gt;
&lt;/script&gt;
10.amp-analytics

&lt;amp-analytics&gt;可用于收集 AMP 页面上的分析数据目前,&lt;amp-analytics&gt; 支持四种类型的跟踪事件,但将来可能会发生变化:

  1. 页面预览
  2. 锚点点击
  3. 计时器
  4. 滚动

要使用&lt;amp-analytics&gt;,你需要在标签添加一个JSON配置对象&lt;script&gt;,你可以在其中配置你想要跟踪的内容。

幸运的是,Google 与许多分析供应商合作,他们提供预配置的 JSON 脚本,您只需将其复制粘贴到您的站点即可。查看可用分析供应商的列表

要使用预配置的脚本,您需要在属性中添加分析供应商的名称type

&lt;amp-analytics&gt;标签还有一些可选属性,您可以使用这些属性进一步配置您跟踪网站的方式。

1个
2个
3个
4个
5个
6个
7
&lt;amp-analytics&gt;
  &lt;script type="application/json"&gt;
  {
    // ...
  }
  &lt;/script&gt;
&lt;/amp-analytics&gt;

将以下脚本添加到&lt;head&gt;AMP HTML 页面的部分以导入&lt;amp-analytics&gt;组件:

1个
2个
3个
&lt;script async custom-element="amp-analytics"
    src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"&gt;
&lt;/script&gt;

最后的话

在本文中,我们了解了所有内置 AMP 组件和一些扩展组件。由于 Accelerated Mobile Pages 仍然是新的,未来很多事情都可能发生变化,因此值得关注Github官方 AMP 网站上的文档。

由于这些 AMP 组件是开源的,您还可以参与开发,甚至创建自己的组件如果您想了解包含不同组件的完整 AMP 页面的外观,可以查看Github 上的这些示例。

标签: