WordPress and AMP: How to Create AMP Pages for Your Content

Do you want to create AMP pages in WordPress? A few years ago, Google started to get AMP pages through our eyes, and for everyone who has a WordPress blog, it has become easier to create a version of this type of “ultra-fast” pages. In this article, I will tell you some tricks

Back in 2016, we received an email like this from the Google Search Console Team indicating that we could create pages ready for AMP:

«Prepare your website for the launch of Accelerated Mobile Pages (AMP) in Google Search

Google has detected that your website has content that can benefit from a feature that we will soon offer in Google Search results. This function is based on Accelerated Mobile Pages (AMP), small lightweight HTML pages optimized to load very quickly on mobile devices. Google will soon show valid AMP pages with special features in the Google Search results. Pages on your website that meet AMP requirements may be displayed in search results with these new features.

We invite you to be one of the first people to use this interesting technology. The following steps will guide you through the process of creating AMP pages for your content».

Since then, many things have happened, and the story has evolved quite a bit. Nowadays, we can configure more options in WordPress with AMP.

WordPress and AMP: Common mistakes and how to fix them

Do you know how to create AMP pages for your WordPress content?

If you have a page created with WordPress, you have some very easy things to change to comply with this new standard: You just have to install the Accelerated Mobile Pages (AMP) plugin.

What will you get by installing this plugin in WordPress?

You will automatically generate an AMP type of URL with several options available. The first thing you have to do is go through a configuration screen like the one you see in the image below:

There are three modes you can activate:

  • Standard: Integrates AMP as a structure for your site using the templates and styles of the active theme to generate AMP responses. This means that your site is first-AMP and your canonical URLs are AMP!
  • Transitional: Use the templates of the active theme to generate nonAMP and AMP versions of your content, allowing each canonical URL to have a corresponding (paired) AMP URL. This mode is useful for the progressive transition to a fully AMP site.
  • Reader: Formerly called classic mode, this mode generates AMP content paired using simplified templates that may not match the look of your site. You can only serve as AMP entries/pages in reader mode. No redirection is performed for mobile visitors; AMP pages are served through AMP consumer platforms.

What is the most recommended mode?

With Standard mode, you will achieve the highest speed gain on all your pages and on all devices, including computers. It is the one I recommend. It is the easiest to manage since all errors that can be generated are automatically corrected. But if you want to keep pages and post AMP differentiated from non-AMP pages, the way forward is Transitional. You will have AMP pages and NO AMP pages living together.

You can leave the other options as you see them in the image (or you can activate the cache if your page allows it).

Google will be responsible for indexing these special pages and then display them in the search engine if the visitor comes from a mobile device, so there is no need to do any redirection.

You can test the validity of your AMP pages at:

  • Check errors in structured data
  • AMP errors: Open the URL in Chrome and add #development=1 to the end of it. Then you have to open the console in Chrome’s developer tools.

It may take at least 1 week for Google to re-track all the content of your website again, so be patient.

Remember to put your Google Analytics code in the corresponding section of the plugin!

You go to the Analytics section of the AMP Plugin and add the following in JSON Settings:

{
    "vars": {
        "account": "UA-XXXXXX-Y"
    },
    "triggers": {
        "trackPageview": {
            "on": "visible",
            "request": "pageview"
        }
    }
}

Where UA-XXXXXX-Y is the personal tracking code of your Analytics page and that you can check in your Analytics account.

In the “Type” field you put google analytics, and the ID section generates it dynamically. Save it and everything is ready. You have more information here – adding Analytics to your AMP pages.

Leave a Comment

Your email address will not be published. Required fields are marked *

*