amp wordpress_如何在WordPress中使用AMP

最新推荐文章于 2024-08-15 14:09:45 发布

culi4814

最新推荐文章于 2024-08-15 14:09:45 发布

阅读量591

点赞数

文章标签：大数据 python javascript java 人工智能 ViewUI

原文链接：https://www.sitepoint.com/use-amp-with-wordpress/

版权

amp wordpress

To learn more about developing for mobile and other device sizes, take a look at the SitePoint Premium course Responsive Tips and Tricks

要了解有关针对移动设备和其他设备尺寸进行开发的更多信息，请查看SitePoint Premium课程“ 响应性提示和技巧”

Google’s Accelerated Mobile Pages (AMP) project has been launched on 24 February 2016. With this launch, thousands of developers became active participants in the project. Countless websites now have AMP versions of pages, and many developers are learning to use AMP – in this case, learning to use AMP with WordPress.

Google的Accelerated Mobile Pages(AMP)项目已于2016年2月24日启动。随着这一启动，成千上万的开发人员成为该项目的积极参与者。现在，无数的网站都有页面的AMP版本，许多开发人员正在学习使用AMP –在这种情况下，学习将AMP与WordPress结合使用。

Google takes AMP very seriously. It is one of their search engine ranking criteria as well. In that way, Google is making AMP almost a necessity for many sites. In this article, I am going to give you detailed information about Google’s Accelerated Mobile Pages project. This includes the steps for invoking it in your WordPress site.

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

什么是AMP？ (What is AMP?)

Some developers might not be all that familiar with AMP yet. It is a mobile-friendly framework that enables fast loading of your web page on mobile browsers. It is an open source technology designed to empower website publishers to efficiently improve the speed and user experience of loading content pages on mobile devices. And all of this enhancement occurs with zero effect on advertisement revenue.

有些开发人员可能还不太熟悉AMP。这是一个便于移动的框架，可将网页快速加载到移动浏览器中。它是一种开放源代码技术，旨在使网站发布者能够有效提高在移动设备上加载内容页面的速度和用户体验。所有这些增强对广告收入的影响都是零。

If you’re an experienced developer, you can achieve a similar kind of enhancement through comprehensive page loading optimizations. However, Accelerated Mobile Pages make these optimizations very easy to execute without spending as much time and energy on mobile layout.

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

For websites who are already working double time for their SEO rankings, this just adds more tasks to their to-do list, of course, because AMP pages can also enhance the SEO ranking of your website. That is, perhaps, the main reason big enterprises are also adopting AMP.

对于已经为SEO排名工作了两倍时间的网站，这当然会为其任务列表添加更多任务，因为AMP页面还可以提高您网站的SEO排名。这也许就是大企业也采用AMP的主要原因。

AMP项目 (AMP Project)

AMP consists of three major components:

AMP包含三个主要组件：

AMP HTML
AMP HTML
AMP JS
AMP JS
AMP Cache
AMP缓存

AMP HTML (AMP HTML)

It is a subset of HTML with many restrictions, custom tags, and custom properties. Adapting to this is not complicated if you have a pre-existing familiarity with HTML. Yet if you find that you have any difficulty, I suggest you visit this link to learn more about how to create your AMP HTML page.

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

AMP JS (AMP JS)

AMP provides a limited amount of JavaScript for mobile web pages. Now an important thing to bear in mind about JS in AMP is that third party JavaScript is not allowed with AMP.

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

AMP缓存 (AMP Cache)

The Google AMP Cache is a CDN for delivery of AMP pages. You all know the core function of Content Delivery Networks – they distribute resource loading to servers nearer to your website’s viewers. For an AMP page, this CDN will allow for the minimum loading time due to distance latency that is possible.

Google AMP缓存是用于传递AMP页的CDN。大家都知道Content Delivery Networks的核心功能-它们将资源负载分配到距离您的网站查看者更近的服务器。对于AMP页面，由于可能的距离延迟，此CDN将允许最短的加载时间。

AMP标志与SEO的相关性 (The Relevance of the AMP Sign for SEO)

Back in 2016, when Google was launching AMP, AdAge.com published an interview with Google’s senior director of news and social products, Richard Gingras. In that interview, he said that AMP usage would not directly correlate to your search ranking, as it is not a direct factor. He then added, “All of the other (search engine ranking) signals need to be satisfied as well.”

早在2016年Google推出AMP时，AdAge.com就接受了Google新闻和社交产品高级总监Richard Gingras的采访。他在那次采访中说，AMP的使用不会直接与您的搜索排名相关，因为这不是直接因素。然后，他补充说：“所有其他(搜索引擎排名)信号也必须得到满足。”

However, after this clarification, everything becomes more clear. He said, “If we had two articles that from a signaling perspective scored the same in all other characteristics but for speed, then yes, we will give an emphasis to the one with speed because that is what users find compelling.”

但是，在澄清之后，一切都变得更加清晰。他说：“如果从信号的角度来看，如果有两篇文章在其他所有特征方面都获得了相同的评分，但在速度方面都取得了相同的成绩，那么，是的，我们将重点放在速度上，因为这是用户的吸引力所在。”

Even Google doesn’t deny the relevance of AMP website for SEO. Speed is always an influencing factor when it comes to search engine optimization. If an AMP page gets more clicks and less bounce rate due to faster loading, Google will definitely rank the website higher because of the better user experience.

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

一个人怎么能AMP他们的网站？ (How Can One AMP Their Website?)

You have to maintain two versions of an article page on a website. The original article page, for default web user, and an AMP version for potential mobile users.

您必须在网站上维护文章页面的两个版本。原始文章页面(适用于默认Web用户)和AMP版本(适用于潜在的移动用户)。

Also note that AMP doesn’t allow form elements and third party JavaScript. This means you cannot put a contact form or on-page comments in a standard implementation, as AMP is primarily for the delivery of content.

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

I recommend rewriting the entire website template to cope with the restrictions. For instance, the CSS of an AMP page must be in line and the page size less than 50 kb. Also, due to the fast loading of fonts, they should be loaded with the help of the amp-font extension in order to efficiently load the page.
我建议重写整个网站模板以应对这些限制。例如，AMP页面CSS必须对齐并且页面大小小于50 kb。另外，由于字体的快速加载，应该在amp-font扩展的帮助下加载字体，以便有效地加载页面。
It is advised that multimedia must be handled with special care. For images, you need to utilize the element and precise width and height. Also, if your images are GIFs, then you will need to use the separate amp-anim extended component.
建议对多媒体进行特殊处理。对于图像，您需要利用元件以及精确的宽度和高度。另外，如果您的图片是GIF，则需要使用单独的amp-anim扩展组件。
For videos, there are two choices. There is a custom tag for embedded videos called amp-video. However, if you want to embed a YouTube video, there is a specific tag for that called amp-youtube.
对于视频，有两种选择。嵌入式视频有一个自定义标签，称为amp-video 。但是，如果您要嵌入YouTube视频，则有一个专门的标签amp-youtube 。
For embedding slideshows, you can use amp-carousel. In addition to that if you want to add an image lightbox you can use amp-image-lightbox.
要嵌入幻灯片，可以使用amp-carousel 。除此之外，如果您要添加图片灯箱，则可以使用amp-image-lightbox 。
For embedding social media platforms such as Twitter, Facebook, Instagram, Pinterest, and Vine, you can use each respective component.
要嵌入Twitter ， Facebook ， Instagram ， Pinterest和Vine等社交媒体平台，您可以使用每个组件。
This point is very important. Now, once everything is set and you’re ready to go with your AMP page, you have to let Google know about your AMP website. You will have to add a tag on your main post page with information about your AMP page <link rel="amphtml" href="http://www.yourblog.com/blog-post/amp/"> as well as a canonical tag on the AMP page with information about the main page <link rel="canonical" href="http://www.yourblog.com/blog-post/">.
这一点很重要。现在，一切设置完毕，您就可以使用AMP页面了，您必须让Google知道您的AMP网站。您将必须在主要帖子页面上添加标签，其中包含有关AMP页面<link rel="amphtml" href="http://www.yourblog.com/blog-post/amp/">以及AMP页面上的规范标签，其中包含有关主页<link rel="canonical" href="http://www.yourblog.com/blog-post/"> 。

You can learn more about AMP tags and Schema.org metadata for AMP here. Schema.org metadata “is a requirement to make your content eligible to appear in the demo of the Google Search News carousel”. So, if you wish to achieve success through Google AMP, you have to get your schema right.

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

Google Analytics(分析)可以在AMP上运行吗？ (Does Google Analytics work on AMP?)

Yes, of course, Analytics works on AMP. In fact, Analytics on AMP is quite smart as well. In order to prevent a website to slow down due to multiple analytics trackers, they work on the core philosophy of, “Measure Once, Report to Many”. Generally, there are two paths to enable Analytics with AMP for your website.

是的，Analytics当然可以在AMP上运行。实际上，基于AMP的Analytics也非常聪明。为了防止网站因多个分析跟踪器而放缓，它们遵循“一次测量，多次报告”的核心理念。通常，有两种方法可以为您的网站启用AMP的Analytics(分析)。

The amp-pixel element: It is a simple tag to count a number of page views (similarly to a tracking pixel) by using a GET request.
amp-pixel元素：这是一个简单的标签，可以通过使用GET请求对页面浏览量进行计数(类似于跟踪像素)。
The amp-anayltics extended component: This component is more advanced than the amp-pixel. You can use it to measure any activity on an AMP page. It enables you to specify JSON config which provides details for what to measure and where to send the report.
amp-anayltics扩展组件：此组件比amp-pixel更高级。您可以使用它来测量AMP页面上的任何活动。它使您可以指定JSON配置，该配置提供有关要测量的内容以及在何处发送报告的详细信息。

如何在WordPress网站上使用AMP (How to Use AMP with WordPress Websites)

One of the simplest ways to use AMP, in fact, is to implement it on your WordPress website. You can use the official plugin developed by Automattic/WordPress.

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

第一步：安装WordPress插件 (Step One: Install the WordPress Plugin)

Let’s begin the installation! download the plugin from the above link and nstall the plugin on your WordPress site. After the installation, you just need to append “/amp/” to an article page. If you don’t have pretty permalinks enabled, you can try ?amp=1.

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

第二步：验证和调整 (Step Two: Validate & Tweak)

Google search console picks up the AMP version of your article page from the metatag which will be appended by the plugin. However, the problem arises because it usually takes days to detect these kinds of changes.

Google搜索控制台会从元数据标签中获取您文章页面的AMP版本，该标签将由插件附加。但是，出现问题是因为通常需要几天的时间才能检测到此类变化。

So, now what to do? To handle these tricky situations, I recommend using a combination of the Chrome validation process and the search console. In order to use the Chrome validation process, visit any of your AMP pages in Chrome. Then at the end of the URL append #development=1. Now hit Control+Shift+I to open the Chrome developer tools.

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

Refresh the page, and either it will say, “AMP Validation Successful” or give you a detailed list of issues to be fixed.

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

You can see that installing a plugin is not enough alone. You have to validate every data by visiting the page and repeating the above steps in order to be benefiting from the Accelerated Mobile Pages.

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

第三步：验证架构标记 (Step Three: Validate Schema Markup)

You’ve already learned that validating Schema Markup is very crucial for your AMP pages. I recommend Google’s Structured Data Testing Tool to test your pages for valid schema markup. However, I found some problems with WordPress over the display of logo. So, I made some modifications in order to overcome this issue.

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

Go to the Plugins, click on “Editor” and then select “AMP”. Change these lines in the editor to modify the plugin.

转到插件，单击“编辑器”，然后选择“ 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,
  );
}

to:

至：

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

Please make sure that in the URL, you specify the location where your logo is and specify the height and width accordingly.

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

第四步：将Google Analytics(分析)与AMP WordPress插件集成。 (Step Four: Integrate Google Analytics with the AMP WordPress Plugin.)

Now, you are almost done. However, I prefer to use Google Analytics to track the stats. The AMP WordPress plugin did not proactively activate amp-analytics, however, it is quite easy to execute.

现在，您快完成了。但是，我更喜欢使用Google Analytics(分析)来跟踪统计信息。 AMP WordPress插件未主动激活amp-analytics ，但是，它很容易执行。

In order to enable the AMP WordPress plugin to work in collaboration with Google Analytics, go to the Plugins -> Editor -> select “AMP” and add the following code to the end of it.

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

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' );
    ?>
    <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
    <?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">
    <script type="application/json">
    {
      "vars": {
        "account": "UA-XXXXX-Y"  ←(YOUR GOOGLE ANALYTICS PROPERTY ID)
      },
      "triggers": {
        "trackPageview": {
          "on": "visible",
          "request": "pageview"
        }
      }
    }
    </script>
    </amp-analytics>
    <?php
}

Make sure that you change the value UA-XXXXX-Y to your own Google Analytics Property ID!

确保将值UA-XXXXX-Y更改为您自己的Google Analytics(分析)媒体资源ID！

After making this change, re-validate your AMP pages, and then your AMP pages will be trackable.

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

对Google AMP项目的裁决 (A Verdict on Google’s AMP Project)

Google wants the AMP project to be a good experience for the users. Still, the question is whether or not AMP can make everything super fast. The answer to this question is pretty open-ended. If you optimize your website poorly, then AMP will result in some significant boost-ups.

Google希望AMP项目能够为用户带来良好的体验。不过，问题是AMP是否可以使一切变得超快。这个问题的答案是开放的。如果您对网站的优化不佳，则AMP会带来一些明显的提升。

However, Accelerated Mobile Pages are not magic bullets. Techniques to improve website’s speed have been available from the start. AMP is just an attempt to combine and eliminate all the major slow-loading factors and offer a better solution for the users.

但是，“加速的移动页面”不是魔术子弹。从一开始就可以使用提高网站速度的技术。 AMP只是试图结合并消除所有主要的缓慢加载因素，并为用户提供更好的解决方案。

What do you think of the AMP Project? Please share your views in the comments section below!

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

翻译自: https://www.sitepoint.com/use-amp-with-wordpress/

amp wordpress

culi4814

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
amp wordpress_如何在WordPress中使用AMP

amp wordpressTo learn more about developing for mobile and other device sizes, take a look at the SitePoint Premium course Responsive Tips and Tricks 要了解有关针对移动设备和其他设备尺寸进行开发的更多信息，请查看SitePoint Premium课...
复制链接

扫一扫