A quick guide to setting up AMP on WordPress

In today's mobile-centric world, fast page loading is a prerequisite for user satisfaction. Additionally, site speed affects conversions and bounce rates.

Users today expect mobile sites to load as fast as their desktop counterparts. According to the calculations of Amazon, a 1-second delay in page loading could lead to a decrease in annual revenue of $1.6 billion.
Accelerated Mobile Pages (AMP) has quickly become the standard for how fast pages should be created. AMP loads 15-80% faster than regular mobile pages without sacrificing functionality. The complexity of implementing this technology largely depends on the CMS used. That being said, WordPress can be a great testing environment to see what your accelerated pages might look like.

To set up AMP on WordPress, follow the next 7 steps.

Note. This guide assumes that you have activated the Yoast SEO plugin when setting up WordPress. If this is not the case, you can skip the parts of the manual that relate to it. You can implement AMP functionality without it. However, we highly recommend using this plugin if you are serious about SEO optimizing your WordPress site.

Step 1. Install and activate AMP plugin (s)

To start implementing AMP, you need the AMP plugin from Automattic. This is the basic plugin you need to get AMP pages to work.

AMP plugin from Automattic

It will automatically generate AMP-compatible versions of your posts. To view them, you need to add /amp/ to the end of the URL. For example:
  • Original URL:  https://example.com/bing-audience-targeting-in-market-custom-audiences-277080/
  • AMP URL:  https://example.com/bing-audience-targeting-in-market-custom-audiences-277080/amp/

Please note that as a result of using this plugin, only posts will be AMP-compatible, not pages. To make pages AMP-compatible, you will need to install an additional plugin (details below).

After installing the AMP plug-in, you can add other plug-ins to extend its functionality. There are several free options to choose from. We recommend using the following:

  • AMP for WP - Accelerated Mobile Pages. Among the features of this plugin are Google AdSense integration, rel = canonical support, a user-friendly AMP page builder, and the ability to create AMP content that differs from the content of standard mobile pages.

AMP for WP

  • Glue for Yoast SEO & AMP. With this plugin, you can make pages, posts, and media AMP compatible. Glue for Yoast also ensures that the default AMP plugin is using the correct metadata. Just like the AMP plugin for WP, it allows you to customize the appearance of AMP pages. In addition, it allows you to select an icon and change how the site logo will look on the AMP page.

Glue for Yoast SEO & AMP

Note. For this plugin to work, you need to install and activate the Yoast SEO plugin.

Step 2: set up Google Analytics

To set up Google Analytics, you first need to find your site's tracking ID. To do this, follow these steps:

  • Sign in to your Google Analytics account. 
  • Click  Admin. 
  • In the drop-down menu in the ACCOUNT column, select the desired account. 
  • In the RESOURCE menu select the required resource.
  • In the RESOURCE section, select the Tracking  > Tracking Code. The ID will be located at the top of the page. It must start with UA.

Copy your Tracking ID, then login to WordPress. On the left navigation bar, go to AMP> Analytics and paste the ID in the Google Analytics field. Then click "Save Changes".

Google Analytics field

Step 3. Configure Glue for Yoast SEO plugin settings

In this step, we'll go over the basic configuration options for the Glue for Yoast SEO plugin that was mentioned in the first step. You can skip this step if you decide not to install this plugin.

Our recommended configurations will allow you to customize the look of AMP pages and enable AMP support for several types of content.

To get started, go to Yoast SEO> AMP> Post Types. This is where you can specify which post types should be AMP compatible.

Configure Glue for Yoast SEO

On the second tab, "Design," you can customize the look of AMP pages: apply CSS styles, customize font and link colors, load a custom AMP icon, and set a default image for pages that have no images associated with them.

Step 4. Check AMP settings

Now that we've created AMP URLs, it's important to make sure they work as expected. If they are not configured correctly, Google will not show them in search results.

There are several solutions for validating AMP URLs. Pick a couple of master pages and test their AMP versions using one of the methods below. As mentioned in the first step, to view AMP pages, you need to add /amp/ to the end of the standard URL.

  • Option 1: AMP Page Checker Tool

    • Follow the link: https://search.google.com/test/amp
    • Enter the URL you want, click "Check", rate the result - whether or not the page meets the AMP criteria.
  • Option 2. Developer Console in Chrome Browser

    • Open the AMP page in a browser. Add the following phrase to the end of the URL: # development = 1. Example: https://example.com/healthy-spaghetti-squash-pad-thai/amp/#development=1
    • Open the developer console (press F12 or from the Chrome menu select "More Tools", then - "Developer Tools") and check the page for validation errors. If everything is ok, the validation should succeed.

Developer Console

  • Option 3: AMP Validator

    • Follow the link: https://validator.ampproject.org/
    • Enter the address of the AMP page in the "URL" field, click "Validate".
    • The tool will find and highlight errors in HTML code.

AMP Validator

Note. You can also use the AMP Validator Chrome extension to get the same results right on the page.

Step 5. Add the most important AMP pages to Google

  • When using the AMP Page Checker tool, you can click Add to Google as soon as you get a positive checkout result.
  • Alternatively, if you are logged into Search Console, you can add the page to Google directly in the search results:

Search Console

While this step is not necessary, Google will only index the AMP page if it is internally linked or contained in an XML sitemap.

Step 6: Check the AMP report in Search Console

Google Search Console gives you the ability to manage all AMP pages in one place.

Google Search Console

It will show the number of indexed pages and the errors found when scanning them. Once you identify the gaps, you can fix them using the tools described in step 4.

Step 7. Check page loading speed

After going through all the previous steps, evaluate the benefits. Test the loading speed of Accelerated and Standard Mobile Pages with an appropriate tool (such as WebPageTest ) and compare the results.

page loading speed

Get started with AMP

In the near future, Google will launch a mobile-first index and will start taking into account the download speed of mobile pages in rankings. Therefore, AMP implementation is now becoming critical for sites. By following the steps above, you can quickly and easily set up AMP on your WordPress site.

Source: Search Engine Land
Add comment

Add comment