AMP HTML 概述

发表 admin at 2024年8月26日

类别

未分类

标签

AMP 代表“加速移动页面”，是 Google 提出的一项开源计划，旨在创建一种统一的方法，使网站在移动设备上的加载速度提高一个数量级。AMP 应该被证明是一种让移动设备上的网络体验更好的好方法，尤其是对于那些网速较慢的用户来说。

AMP 限制了 HTML、CSS 和 JavaScript 的某些部分，以确保快速的体验。为了弥补额外的限制，它还附带了一些组件，让您可以执行诸如嵌入视频、集成轮播和许多其他有趣的事情。AMP 将被 Twitter、Pinterest 和 Google 等渠道用于链接到移动设备上的超快页面版本。在此处试用 Google 中的 AMP 页面演示。

入门

按照如下方式启动您的 AMP HTML 页面：

<!doctype html>
<html >

<head>
  <meta charset="utf-8">
  <link rel="canonical"
    href="https://path/to/regular/page"&#x3E;
  <meta name="viewport"
    content="width=device-width,
      minimum-scale=1,initial-scale=1">
  <style amp-boilerplate></style>

需要记住以下几点：

请注意使用打开的 HTML 标签来表明这是一个 AMP HTML 页面。
还请注意使用规范标签来指示常规非 AMP 页面的位置。
不要忘记打开头标签后的元字符集。
在结束 head 标签之前加载 AMP JS 运行时。请注意异步的使用，这在这里非常重要。所有脚本都需要异步加载，以便页面验证为 AMP HTML。
为了简洁起见，上面的代码片段没有包含样板样式，但这里是它的完整代码：

<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>

使用此内联 CSS 样板，内容将首先被隐藏，然后在加载资源时显示。这样，您就可以避免在异步加载字体时发生的无样式内容 (FOUC) 闪烁。

内容和组件

在 head 部分之后，您的 AMP HTML 页面大部分都是普通的 HTML，但有几个关键例外。例如，不支持 img 标签，应改用 amp-img：

<amp-img src="../alligator.svg"
  width="400"
  height="150"
  layout="responsive"
  alt="Dead Gator">
</amp-img>

对于 amp-img，您可以定义宽度和高度。浏览器会非常智能地根据需要按比例缩小尺寸。

以下是 AMP HTML 可用的其他一些组件的列表：amp-accordion、amp-instagram、amp-sidebar、amp-youtube、amp-audio……

对于大多数这些附加组件，您需要在 head 部分加载额外的 JavaScript 文件。例如，对于 amp-instagram 组件：

<script async
  custom-element="amp-instagram"
  src="https://cdn.ampproject.org/v0/amp-instagram-0.1.js">

测试、调试和发布

为了使您的 AMP HTML 页面能够被提供，它们首先需要有效。只需在 AMP 页面末尾添加 #development=1，JavaScript 控制台就会进入调试模式，并让您知道是否有任何错误。

下一步是确保在原始页面上包含指向 AMP 版本的 rel 标签，如下所示：

<link rel=”amphtml”
  href=”https://alligator.io/some-post.amp.html" />

了解更多 + 资源

以下是一些很好的资源，可帮助您了解有关 AMP HTML 的更多信息并参与其中：