How to Use AMP with WordPress

Core points

• Google Accelerated Mobile Pages (AMP) is a key tool to improve website speed and user experience on mobile devices without affecting advertising revenue.
• AMP can improve SEO rankings because Google considers loading speed when ranking websites. If AMP pages have higher click-through rates and lower bounce rates due to faster loading, they will rank higher.
• To implement AMP, developers need to create two versions of the web page: one original version for desktop users and one AMP version for mobile users. AMP does not allow form elements and third-party JavaScript, so certain features may not be available to AMP versions, such as contact forms or in-page comments.
• Google Analytics can be integrated with AMP to track website performance. To prevent multiple analytics trackers from causing speed drops, Google uses the principle of "one measurement, multiple reports".
• The official AMP plugin developed using Automatic/WordPress can easily integrate AMP into WordPress websites. However, be sure to verify each page and modify the plugin to ensure correct Schema tagging and Google Analytics integration.

The Google Accelerated Mobile Pages (AMP) project was launched on February 24, 2016. With this launch, thousands of developers became active participants in the project. Countless websites now have AMP version pages, and many developers are learning to use AMP – in this case, learn how to use AMP in WordPress.

Google attaches great importance to AMP. It is also one of their search engine ranking criteria. In this way, Google makes AMP a necessity for many websites. In this article, I will provide you with detailed information about Google's accelerated mobile page project. This includes the steps to call it in your WordPress site.

What is AMP?

Some developers may not be familiar with AMP. It is a mobile-friendly framework that quickly loads your web pages on a mobile browser. It is an open source technology designed to enable website publishers to effectively improve the speed and user experience of loading content pages on mobile devices. All these enhancements will not affect advertising revenue.

If you are an experienced developer, you can achieve similar enhancements with comprehensive page loading optimizations. However, accelerating mobile pages makes these optimizations very easy to perform without spending too much time and effort on mobile layouts.

For those sites that have redoubled their SEO rankings, this will certainly add more tasks on their to-do list, as the AMP page can also enhance your website's SEO rankings. This may be the main reason why large companies also adopt AMP.

AMP project

AMP contains three main components:

• AMP HTML
• AMP JS
• AMP cache

AMP HTML

It is a subset of HTML with many limitations, custom tags, and custom properties. If you are already familiar with HTML, it is not complicated to adapt to this. However, if you find any difficulties, I recommend you visit this link to learn more about how to create your AMP HTML page.

AMP JS

AMP provides a limited number of JavaScript for mobile web pages. Now, one important thing to remember about JS in AMP is that AMP does not allow third-party JavaScript.

AMP cache

Google AMP Cache is a CDN used to deliver AMP pages. You all know the core features of the content delivery network – they distribute resources to servers closer to viewers of your website. For AMP pages, this CDN will allow for a minimum load time due to possible distance delays.

The correlation of AMP logo on SEO

Back in 2016, when Google launched AMP, AdAge.com published an interview with Richard Gingras, senior director of Google News and Social Products. In that interview, he said that the use of AMP will not be directly related to your search rankings because it is not a direct factor. He then added: "All other (search engine rankings) signals need to be met, too."

However, after this clarification, everything became clearer. He said: "If we have two articles, from a signal point of view, the same score on all other characteristics (except speed), then yes, we're going to focus on the fastest one, because that's the user Discover something eye-catching. ”

Even Google does not deny the relevance of AMP websites to SEO. Speed ​​is always an influencing factor in search engine optimization. If AMP pages get more clicks and lower bounce rates due to faster loading, Google will surely rank the website higher for a better user experience.

How to AMP your website?

You must maintain two versions of the article page on the website. Original article page, for default web users, and AMP version, for potential mobile users.

Also note that AMP does not allow form elements and third-party JavaScript. This means you can't put contact forms or in-page comments in the standard implementation, as AMP is primarily used for content delivery.

• I recommend rewriting the entire website template to deal with these limitations. For example, the CSS of an AMP page must be inlined with a page size less than 50 kb. Additionally, due to the fast loading of fonts, they should be loaded with the help of the amp-font extension in order to load the page efficiently.
• It is recommended that multimedia be handled with caution. For images, you need to use that element along with the exact width and height. Also, if your image is a GIF, you need to use a separate amp-anim extension component.
• For videos, there are two options. There is a custom tag for embedding videos, called amp-video. However, if you want to embed YouTube videos, you have a specific tag called amp-youtube.
• For embedded slides, you can use amp-carousel. Apart from that, if you want to add an image lightbox, you can use amp-image-lightbox.
• For embedded social media platforms such as Twitter, Facebook, Instagram, Pinterest, and Vine, you can use each corresponding component.
• This is very important. Now, once everything is set up, you can use your AMP page and you have to let Google know about your AMP website. You must add a tag about your AMP page to your main post page and a canonical tag about your main page on the AMP page.
You can learn more about AMP tags and Schema.org metadata here. Schema.org metadata “is a requirement to qualify your content to appear in Google Search News Carousel Demos”. So if you want to succeed with Google AMP, you must set up your Schema correctly.

Is Google Analytics suitable for AMP?

Yes, of course, Analytics works for AMP. In fact, Analytics on AMP is also smart. To prevent websites from slowing down due to multiple analytics trackers, they are based on the core philosophy of “one measurement, multiple reports”. Generally, there are two ways to enable Analytics for AMP on your website.

amp-pixel element: It is a simple tag that can use GET requests to calculate page views (similar to tracking pixels).

• amp-anayltics extension component: This component is more advanced than amp-pixel. You can use it to measure any activity on your AMP page. It allows you to specify a JSON configuration that provides detailed information about what to measure and where the report is sent.

How to use AMP on a WordPress website?

In fact, one of the easiest ways to use AMP is to implement it on your WordPress website. You can use the official plug-in developed by Automattic/WordPress.

Step 1: Install WordPress plugin

Let's start installing! Download the plugin from the link above and install the plugin on your WordPress website. After installation, you just need to attach "/amp/" to the article page. If you don't enable a nice permalink, you can try?amp=1.

Step 2: Verify and adjust

The Google search console will get the AMP version of the article page from the meta tag, which will be attached by the plugin. However, the problem is that it usually takes several days to detect such changes.

So, what should I do now? To handle these tricky situations, I recommend using a combination of Chrome verification process and search console. To use the Chrome verification process, please visit any of your AMP pages in Chrome. Then append #development=1 at the end of the URL. Now press Control Shift I to open Chrome Developer Tools.

Refresh the page and it will display "AMP verification successful" or provide a detailed list of issues that need to be fixed.

You can see that installing plugins is not enough. You must verify each data by accessing the page and repeating the above steps to benefit from accelerating mobile pages.

Step 3: Verify the Schema tag

You have learned that verifying Schema tags is essential for your AMP page. I recommend using Google's structured data testing tool to test if your page has a valid schema tag. However, I found that WordPress has some problems with displaying the logo. So I made some modifications to overcome this.

Go to plug-in, click Editor, and select AMP. Change these lines in the editor to modify the plugin.

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

To:

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

Make sure to specify the location of the logo in the URL and specify the height and width accordingly.

Step 4: Integrate Google Analytics with AMP WordPress plugin.

Now, you are almost done. However, I prefer to use Google Analytics to track statistics. The AMP WordPress plugin does not actively activate amp-analytics, but it is very easy to execute.

To enable the AMP WordPress plugin to work with Google Analytics, go to Plugins ->Editor ->Select "AMP" and add the following code to the end of it.

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

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

After making this change, reverify your AMP page and your AMP page will be trackable.

Conclusion on Google AMP Project

Google hopes that the AMP project will provide users with a good experience. Still, the question is whether AMP can make everything super fast. The answer to this question is quite open-ended. If you don't optimize your website well, AMP will bring some significant improvements.

However, speeding up mobile pages is not a magic bullet. Technology to improve website speed is provided from the outset. AMP is just trying to combine and eliminate all the major slow loading factors and provide users with better solutions.

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

FAQs about using AMP in WordPress (FAQ)

What are the main benefits of using AMP and WordPress?

The main benefit of using AMP (accelerated mobile pages) with WordPress is the enhancement of the mobile browsing experience. AMP is a Google-backed project designed to make web pages load faster on mobile devices. It does this by streamlining HTML and using a thin version of CSS. This results in a significant increase in page loading speed, which can increase user engagement, retention and improve mobile SEO.

How does AMP affect SEO?

AMP can significantly improve your SEO because page loading speed is a ranking factor in Google's algorithm. By making your web pages load faster, AMP can help improve your visibility in search engine results, especially among mobile users. Additionally, Google typically highlights AMP pages in carousels highlighted in search results, providing further visibility.

Can I use AMP on my existing WordPress website?

Yes, you can use AMP on your existing WordPress website. There are several plugins available that can help you implement AMP on your WordPress website. These plugins help convert your existing posts and pages into AMP-compatible versions.

Will AMP affect the functionality of my WordPress website?

AMP limits certain HTML, CSS, and JavaScript elements to ensure fast page loading times. This means that some features of your WordPress website may not work as expected on the AMP version of your website. However, most AMP plugins offer options that can be added back to functionality by still complying with AMP standards.

How to customize the appearance of an AMP page?

CSS can be used to customize the appearance of AMP pages. However, since AMP restricts the use of certain CSS properties to ensure fast page load times, you may want to use a more streamlined approach to style it. Some WordPress AMP plugins offer built-in customization options.

How to check if my AMP implementation is successful?

You can use the AMP testing tool provided by Google to check whether your AMP implementation is successful. This tool will analyze your AMP page and report any errors that may prevent it from being provided as an AMP page in Google search results.

Can I use AMP without using plugins in WordPress?

Yes, you can implement AMP without using plugins in WordPress, but this requires a good understanding of web development and AMP standards. You need to manually create a separate AMP-compatible version of your posts and pages and manually add the necessary AMP HTML tags.

Does AMP support advertising and analytics?

Yes, AMP supports both advertising and analytics. However, because AMP restricts certain HTML, CSS, and JavaScript elements, you may need to use AMP-specific tags and scripts for advertising and analysis.

Can I disable AMP for a specific post or page?

Yes, most WordPress AMP plugins offer options to disable AMP for a specific post or page. This is very useful if you have something that doesn't work well with AMP restrictions.

Is AMP a replacement for responsive design?

No, AMP is not a replacement for responsive design. While AMP can enhance the mobile browsing experience by making pages load faster, it does not replace the need to adapt to website designs of different screen sizes. It is best to use AMP in conjunction with responsive design for the best mobile user experience.

The above is the detailed content of How to Use AMP with WordPress. For more information, please follow other related articles on the PHP Chinese website!