如何开始使用加速移动页面（AMP）

大超 2021-07-17

谷歌目前正在其移动搜索结果中推出加速移动网页（AMP），但您如何才能参与其中？本篇文章解释了如何标记移动页面以获得更好的移动用户体验。谷歌的加速移动页面（AMP）项目已经推出。你准备好了吗？在这篇文章中，我将向您概述该产品，并向您展示如何开始使用它。

什么是AMP？

2015年10月，谷歌发布了加速移动页面（AMP），这是一个非常易于访问的框架，用于创建快速加载的移动网页。开源计划旨在使发布商能够轻松提高移动读者群的速度（从而改善用户体验），而不会牺牲他们可能依赖的任何广告收入。虽然经验丰富的开发人员通常可以通过密集的性能优化来实现类似的结果，但由于资源限 AMP允许在不改变主要移动Web体验的情况下轻松实现这些优化。

AMP如何工作？

AMP本质上是一个用于创建移动网页的框架，它由三个基本部分组成：

AMP HTML：HTML的一个子集，这种标记语言有一些自定义标记和属性以及许多限制。但是，如果您熟悉常规HTML，则不应该难以将现有页面调整为AMP HTML。有关它与基本HTML的不同之处的更多详细信息，请查看AMP项目的 AMP HTML页面“必须”具有的所需标记列表。

AMP JS：移动页面的JavaScript框架。在大多数情况下，它管理资源处理和异步加载。请注意，AMP不允许使用第三方JavaScript。

AMP CDN：一个可选的内容交付网络，它将采用启用AMP的页面，对其进行缓存并自动进行一些性能优化。

你将如何扩展你的网站？

对于初学者，您必须至少维护任何文章页面的两个版本：用户通常会看到的文章页面的原始版本，以及该页面的AMP版本。由于AMP不允许使用表单元素和第三方JavaScript等内容，因此您可能无法在标准实现中使用引导表单，页面注释以及您可能习惯在页面上使用的其他元素。

您可能还必须重写站点模板以适应限制。例如，AMP中的所有CSS必须是内联的并且小于50KB。由于自定义字体的加载密集性，必须使用特殊的amp-font扩展名加载它们，以便更好地控制加载。多媒体必须专门处理。例如，图像需要使用自定义amp-img元素，并且必须包含明确的宽度和高度。（将旧版网站转换为AMP模板时，如果尚未使用宽度和高度属性，这可能会非常麻烦）。此外，如果您的图像是动画GIF，则需要使用单独的amp-anim扩展组件。

与图像一样，有一个自定义标记，必须用于通过HTML5嵌入本地托管的视频，称为amp-video。然而，为了嵌入YouTube视频 - 大多数网络视频都是 - 有一个单独的扩展组件，amp-youtube。通过放大器旋转木马和图像灯箱通过amp-image-lightbox支持幻灯片放映，以及Twitter，Instagram，Facebook，Pinterest和Vine通过自己的扩展组件嵌入社交媒体。

为了使Google（以及支持AMP项目的其他技术）能够检测文章的AMP版本，您需要修改文章页面的原始版本。原始文章页面必须包含以下标记，基本上是AMP页面的规范标记：

<link rel="amphtml" href="https://niuchao.com/amp/">

如何在WordPress中开始使用AMP？

第1步：安装官方WordPress插件

要开始使用，请转到amp-wp GitHub页面并单击“下载ZIP”按钮。您可以像在任何其他WordPress插件上一样在WordPress网站上安装它。一旦安装完毕，您只需将“/ amp /”附加到文章页面（或者，如果您没有好的永久链接，您可以选择附加“？amp = 1”）。

第2步：验证和调整

Google Search Console应通过插件附加的rel =“amphtml”标记获取您文章的AMP版本，从而可以轻松验证批量文章。根据我迄今为止的经验，它唯一的问题是它不能很快检测到变化。如果您修理了某些内容，则更正可能会持续数天。

我建议结合使用Search Console和Chrome验证流程。要使用Chrome验证过程，请转到Chrome中的某个AMP页面，并在URL的末尾附加“ #development = 1”。按Control + Shift + I打开Chrome开发者工具并转到控制台。您可能需要刷新页面，但是一旦完成，它将说“AMP验证成功”或者提供要修复的问题列表。

第3步：获取架构标记以进行验证

如前所述，在AMP页面上拥有有效的架构标记也很重要。要测试您的网页是否有效标记，您可以使用Google的结构化数据测试工具。我有一些问题，WordPress没有显示发布商徽标，需要对插件进行以下修改。编辑class-amp-post-template.php文件，通过FTP或WordPress仪表板（转到插件>编辑器，然后选择“AMP”）并更改：

if ( $site_icon_url ) {
$metadata['publisher']['logo'] = array(
'@type' => 'ImageObject',
'url' => $site_icon_url,
'height' => self::SITE_ICON_SIZE,
'width' => self::SITE_ICON_SIZE,
);
}
//改成下面的
$metadata['publisher']['logo'] = array(
'@type' => 'ImageObject',
'url' => 'http://domain.com/wp-content/uploads/logo-60.png',
'height' => 60,
'width' => 170,
);

确保将URL替换为您自己的发布商徽标的路径，并指定高度和宽度（以像素为单位）。您可以在此处找到相关标记的信息，其中指出“理想情况下，徽标正好是60px高，宽度<= 600px”。

第4步：让Google Analytics使用AMP WordPress插件

如果您无法通过分析跟踪它，网站有什么用？AMP WordPress插件不支持开箱即用的放大器分析，但启用它非常简单。要启用AMP WordPress插件以使用Google Analytics，请通过FTP或WordPress信息中心编辑amp-post-template-actions.php（前面提到的不同文件）文件（转到插件>编辑器，然后选择“AMP”），并在其末尾添加以下内容：请务必更改UA-XXXXX-Y以表示您网站的Google Analytics媒体资源ID。现在，重新验证你的AMP页面，你应该有一个基本的AMP设置，为你的WordPress网站启用跟踪。