如何与WordPress一起使用AMP

核心要点

• Google加速移动页面(AMP)是提升移动设备上网站速度和用户体验的关键工具，且不会影响广告收入。
• AMP可以提升SEO排名，因为Google在网站排名时会考虑加载速度。如果AMP页面由于加载速度更快而具有更高的点击率和更低的跳出率，则其排名会更高。
• 要实施AMP，开发者需要创建网页的两个版本：一个供桌面用户使用的原始版本和一个供移动用户使用的AMP版本。AMP不允许表单元素和第三方JavaScript，因此AMP版本可能无法使用某些功能，例如联系表单或页面内评论。
• Google Analytics可以与AMP集成以跟踪网站性能。为了防止多个分析跟踪器导致速度下降，Google使用“一次测量，多次报告”的原则。
• 使用Automattic/WordPress开发的官方AMP插件可以轻松地将AMP集成到WordPress网站中。但是，务必验证每个页面并修改插件以确保正确的Schema标记和Google Analytics集成。

Google加速移动页面(AMP)项目于2016年2月24日启动。随着这一启动，成千上万的开发者成为该项目的积极参与者。无数网站现在都有AMP版本的页面，许多开发者正在学习使用AMP——在这种情况下，学习如何在WordPress中使用AMP。

Google非常重视AMP。它也是他们的搜索引擎排名标准之一。这样，Google使AMP几乎成为许多网站的必需品。在本文中，我将向您提供有关Google加速移动页面项目的详细信息。这包括在您的WordPress网站中调用它的步骤。

什么是AMP？

一些开发者可能还不熟悉AMP。它是一个移动友好的框架，可以在移动浏览器上快速加载您的网页。它是一种开源技术，旨在使网站发布者能够有效地提高移动设备上加载内容页面的速度和用户体验。所有这些增强都不会影响广告收入。

如果您是一位经验丰富的开发者，您可以通过全面的页面加载优化来实现类似的增强。但是，加速移动页面使这些优化非常易于执行，而无需花费太多时间和精力在移动布局上。

对于那些已经为SEO排名而加倍努力的网站来说，这当然会增加他们待办事项列表中的更多任务，因为AMP页面还可以增强您网站的SEO排名。这也许是大企业也采用AMP的主要原因。

AMP项目

AMP包含三个主要组件：

• AMP HTML
• AMP JS
• AMP缓存

AMP HTML

它是HTML的一个子集，具有许多限制、自定义标签和自定义属性。如果您已经熟悉HTML，那么适应这一点并不复杂。但是，如果您发现有任何困难，我建议您访问此链接以了解有关如何创建您的AMP HTML页面的更多信息。

AMP JS

AMP为移动网页提供有限数量的JavaScript。现在，关于AMP中的JS需要记住的一件重要事情是，AMP不允许使用第三方JavaScript。

AMP缓存

Google AMP缓存是用于交付AMP页面的CDN。你们都知道内容交付网络的核心功能——它们将资源加载分发到更靠近您网站查看者的服务器。对于AMP页面，由于可能的距离延迟，此CDN将允许最小的加载时间。

AMP标识对SEO的相关性

早在2016年，当Google推出AMP时，AdAge.com发表了对Google新闻和社交产品高级总监Richard Gingras的采访。在该采访中，他说AMP的使用不会直接与您的搜索排名相关，因为它不是一个直接因素。然后他补充道：“所有其他（搜索引擎排名）信号也需要满足。”

然而，在此澄清之后，一切变得更加清晰。他说：“如果我们有两篇文章，从信号的角度来看，在所有其他特征（速度除外）上的得分相同，那么是的，我们将重点关注速度快的那篇文章，因为这就是用户发现引人注目的地方。”

即使Google也不否认AMP网站对SEO的相关性。速度在搜索引擎优化方面始终是一个影响因素。如果AMP页面由于加载速度更快而获得更多点击和更低的跳出率，那么Google肯定会因为更好的用户体验而将网站排名更高。

如何AMP您的网站？

您必须在网站上维护文章页面的两个版本。原始文章页面，用于默认网页用户，以及AMP版本，用于潜在的移动用户。

另请注意，AMP不允许表单元素和第三方JavaScript。这意味着您不能在标准实现中放置联系表单或页面内评论，因为AMP主要用于内容交付。

• 我建议重写整个网站模板以应对这些限制。例如，AMP页面的CSS必须内联，页面大小小于50 kb。此外，由于字体的快速加载，应在amp-font扩展程序的帮助下加载它们，以便有效地加载页面。
• 建议必须谨慎处理多媒体。对于图像，您需要使用该元素以及精确的宽度和高度。此外，如果您的图像是GIF，则需要使用单独的amp-anim扩展组件。
• 对于视频，有两种选择。有一个用于嵌入视频的自定义标签，称为amp-video。但是，如果您想嵌入YouTube视频，则有一个名为amp-youtube的特定标签。
• 对于嵌入幻灯片，您可以使用amp-carousel。除此之外，如果您想添加图像灯箱，您可以使用amp-image-lightbox。
• 对于嵌入社交媒体平台，例如Twitter、Facebook、Instagram、Pinterest和Vine，您可以使用每个相应的组件。
• 这点非常重要。现在，一旦一切设置好，您就可以使用您的AMP页面了，您必须让Google知道您的AMP网站。您必须在您的主要帖子页面上添加一个关于您的AMP页面的标签以及AMP页面上关于主要页面的规范标签。

您可以在此处了解有关AMP标签和Schema.org元数据的更多信息。Schema.org元数据“是使您的内容有资格出现在Google搜索新闻轮播演示中的要求”。因此，如果您希望通过Google AMP取得成功，则必须正确设置您的Schema。

Google Analytics是否适用于AMP？

是的，当然，Analytics适用于AMP。事实上，AMP上的Analytics也很聪明。为了防止网站由于多个分析跟踪器而速度下降，它们基于“一次测量，多次报告”的核心理念。通常，有两种方法可以在您的网站上为AMP启用Analytics。

• amp-pixel元素：它是一个简单的标签，可以使用GET请求计算页面浏览次数（类似于跟踪像素）。
• amp-anayltics扩展组件：此组件比amp-pixel更高级。您可以使用它来衡量AMP页面上的任何活动。它使您可以指定JSON配置，该配置提供有关要测量的内容以及发送报告的位置的详细信息。

如何在WordPress网站上使用AMP？

事实上，使用AMP最简单的方法之一是在您的WordPress网站上实现它。您可以使用Automattic/WordPress开发的官方插件。

步骤一：安装WordPress插件

让我们开始安装吧！从上面的链接下载插件，然后在您的WordPress网站上安装插件。安装后，您只需将“/amp/”附加到文章页面即可。如果您没有启用漂亮的永久链接，您可以尝试?amp=1。

步骤二：验证和调整

Google搜索控制台会从元标记中获取文章页面的AMP版本，该元标记将由插件附加。但是，问题在于通常需要几天时间才能检测到此类更改。

那么，现在该怎么办？为了处理这些棘手的情况，我建议结合使用Chrome验证过程和搜索控制台。为了使用Chrome验证过程，请在Chrome中访问您的任何AMP页面。然后在URL末尾附加#development=1。现在按Control Shift I打开Chrome开发者工具。

刷新页面，它会显示“AMP验证成功”或提供需要修复问题的详细列表。

您可以看到，仅安装插件是不够的。您必须通过访问页面并重复上述步骤来验证每个数据，以便从加速移动页面中受益。

步骤三：验证Schema标记

您已经了解到，验证Schema标记对于您的AMP页面至关重要。我建议使用Google的结构化数据测试工具来测试您的页面是否具有有效的Schema标记。但是，我发现WordPress在显示徽标方面存在一些问题。因此，我进行了一些修改以克服此问题。

转到插件，单击“编辑器”，然后选择“AMP”。更改编辑器中的这些行以修改插件。

<code>if ( $site_icon_url ) {
  $metadata['publisher']['logo'] = array(
    '@type' => 'ImageObject',
    'url' => $site_icon_url,
    'height' => self::SITE_ICON_SIZE,
    'width' => self::SITE_ICON_SIZE,
  );
}</code>

到：

<code>$metadata['publisher']['logo'] = array(
  '@type' => 'ImageObject',
  'url' => 'http://yourdomain.com/wp-content/uploads/logo-company.png',
  'height' => 60,
  'width' => 170,
);</code>

请确保在URL中指定徽标所在的位置，并相应地指定高度和宽度。

步骤四：将Google Analytics与AMP WordPress插件集成。

现在，您几乎完成了。但是，我更喜欢使用Google Analytics来跟踪统计数据。AMP WordPress插件没有主动激活amp-analytics，但是，执行起来非常容易。

为了使AMP WordPress插件能够与Google Analytics协同工作，请转到插件->编辑器->选择“AMP”，并将以下代码添加到其末尾。

<code>add_action( 'amp_post_template_head', 'amp_post_template_add_analytics_js' );
function amp_post_template_add_analytics_js( $amp_template ) {
    $post_id = $amp_template->get( 'post_id' );
    ?>
     async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js">>
    <?php }

add_action( 'amp_post_template_footer', 'xyz_amp_add_analytics' );

function xyz_amp_add_analytics( $amp_template ) {
    $post_id = $amp_template->get( 'post_id' );
    ?>
    <amp-analytics> type="googleanalytics" id="analytics1"></amp-analytics>
     type="application/json">
    {
      "vars": {
        "account": "UA-XXXXX-Y"  ←(YOUR GOOGLE ANALYTICS PROPERTY ID)
      },
      "triggers": {
        "trackPageview": {
          "on": "visible",
          "request": "pageview"
        }
      }
    }
    >
    >
    <?php }
</code>

确保将值UA-XXXXX-Y更改为您自己的Google Analytics属性ID！

进行此更改后，重新验证您的AMP页面，然后您的AMP页面将可跟踪。

对Google AMP项目的结论

Google希望AMP项目为用户提供良好的体验。尽管如此，问题仍然是AMP是否可以使一切超级快速。这个问题的答案是相当开放式的。如果您对网站的优化效果不佳，那么AMP将带来一些显著的提升。

但是，加速移动页面并非灵丹妙药。从一开始就提供了改进网站速度的技术。AMP只是试图结合并消除所有主要的慢速加载因素，并为用户提供更好的解决方案。

您如何看待AMP项目？请在下面的评论部分分享您的观点！

关于在WordPress中使用AMP的常见问题解答(FAQ)

使用AMP与WordPress的主要好处是什么？

使用AMP（加速移动页面）与WordPress的主要好处是增强移动浏览体验。AMP是Google支持的项目，旨在使网页在移动设备上加载速度更快。它通过精简HTML和使用精简版本的CSS来实现这一点。这导致页面加载速度显着提高，从而可以提高用户参与度、保留率和改进移动SEO。

AMP如何影响SEO？

AMP可以显着提高您的SEO，因为页面加载速度是Google算法中的排名因素。通过使您的网页加载速度更快，AMP可以帮助提高您在搜索引擎结果中的可见性，尤其是在移动用户中。此外，Google通常会在搜索结果中突出的轮播中突出显示AMP页面，从而提供进一步的可见性。

我可以在现有的WordPress网站上使用AMP吗？

是的，您可以在现有的WordPress网站上使用AMP。有几个可用的插件可以帮助您在WordPress网站上实现AMP。这些插件有助于将您现有的帖子和页面转换为与AMP兼容的版本。

AMP会影响我的WordPress网站的功能吗？

AMP限制某些HTML、CSS和JavaScript元素以确保快速的页面加载时间。这意味着您的WordPress网站的某些功能在网站的AMP版本上可能无法按预期工作。但是，大多数AMP插件都提供选项，可以通过仍然符合AMP标准的方式添加回功能。

如何自定义AMP页面的外观？

可以使用CSS自定义AMP页面的外观。但是，由于AMP限制使用某些CSS属性以确保快速的页面加载时间，因此您可能需要使用更精简的方法来设置样式。一些WordPress的AMP插件提供内置的自定义选项。

如何检查我的AMP实现是否成功？

您可以使用Google提供的AMP测试工具来检查您的AMP实现是否成功。此工具将分析您的AMP页面并报告可能阻止它在Google搜索结果中作为AMP页面提供的任何错误。

我可以在WordPress中不使用插件的情况下使用AMP吗？

是的，您可以在WordPress中不使用插件的情况下实现AMP，但这需要对Web开发和AMP标准有很好的了解。您需要手动创建帖子和页面的单独AMP兼容版本，并手动添加必要的AMP HTML标签。

AMP是否支持广告和分析？

是的，AMP同时支持广告和分析。但是，由于AMP限制某些HTML、CSS和JavaScript元素，因此您可能需要使用AMP特定的标签和脚本来进行广告和分析。

我可以为特定的帖子或页面禁用AMP吗？

是的，大多数WordPress的AMP插件都提供选项来禁用特定帖子或页面的AMP。如果您有一些与AMP限制配合不好的内容，这将非常有用。

AMP是否是响应式设计的替代品？

不，AMP不是响应式设计的替代品。虽然AMP可以通过使页面加载速度更快来增强移动浏览体验，但它并没有取代适应不同屏幕尺寸的网站设计的需求。最好将AMP与响应式设计结合使用，以获得最佳的移动用户体验。

以上是如何与WordPress一起使用AMP的详细内容。更多信息请关注PHP中文网其他相关文章！