AMP and WordPress implementation

AMP and WordPress implementation

Updated: 20/03/2019.

In this post I’ll explain what needs to be done in order to make a WordPress website work with AMP post versions. I made a separate post that explains what AMP is. I’ll try to do it concisely, with step-by-step instructions. Let’s begin.

Contents:

  1. Install and setup AMP plugin
    1.1. Installation of AMP plugin
    1.2. Connecting AMP with Google Analytics
    1.3. Setting up AMP options
  2. Install and setup Glue for Yoast SEO & AMP plugin
  3. Adding Google AdSense ads
    3.1. Setup on AdSense control panel
    3.2. Adding code to the website
  4. Testing – validation
  5. Note: caching plugins


1. Install and setup AMP plugin

1.1. Installation of AMP plugin

Install this AMP plugin:

AMP plugin that works fine Picture 1
AMP plugin that works fine
Picture 1

There are several plugins, this one is practically made by AMP authors and, so far, has worked fine for me (how to install a WordPress plugin).

1.2. Connecting AMP with Google Analytics

This step is not necessary, but it’s good to have data on visit number etc. I use Google Analytics.

See on Google Analytics what your website Tracking-ID is.

Google Analytics Tracking ID Picture 2
Google Analytics Tracking ID
Picture 2

If you aren’t using Google Analytics, you should. Lots of articles on the Internet about how to set it up and use it, won’t go into that in this post.

Go to AMP plugin options, enter all the data as shown in picture 3, but change XXXXXXXX-Y with your Tracking ID.

AMP plugin setup Picture 3
AMP plugin setup
Picture 3

For easier editing, copy-paste code below, just replacing XXXXXXXX-Y with your Tracking ID.

{
    "vars": {
        "gtag_id": "<UA-XXXXXXXX-Y>",
        "config": {
            "<UA-XXXXXXXX-Y>": {
                "groups": "default"
            }
        }
    }
}


IF THE CODE IS ENTERED MANUALLY - not using the plugin menu, but by editing theme files, this is the full code version:

<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<UA-XXXXXXXX-Y>",
    "config" : {
      "<UA-XXXXXXXX-Y>": { "groups": "default" }
    }
  }
}
</script>
</amp-analytics>

If you are using some other analytics tool, amp-analytics documentation might help.

1.3. Setting up AMP options

A separate post is required to explain why it is done the way it is, for now, picture 4 shows how to set up AMP plugin:

Recommended AMP plugin setup Picture 4
Recommended AMP plugin setup
Picture 4


2. Install and setup Glue for Yoast SEO & AMP plugin

This plugin is an addition for Yoast SEO plugin (which I recommend). If you don’t want to use Yoast SEO, then you don’t need this plugin either (won’t even work). If you do, then by all means install Glue for Yoast SEO & AMP.

Glue for Yoast SEO & AMP plugin Picture 5
Glue for Yoast SEO & AMP plugin
Picture 5

Key functionality setup is shown in picture 6. For design/look options, “play” and choose what you like. 🙂

Setup of Glue for Yoast SEO & AMP plugin Picture 6
Setup of Glue for Yoast SEO & AMP plugin
Picture 6


3. Adding Google AdSense ads

…With two easy steps… 🙂 If you want ads on your site. If not, skip this step.

3.1. Setup on AdSense control panel

Choose Ads – Auto ads option, then select AUTO ADS FOR AMP tab, enabling auto ads there. Pictures 7 and 8 show it.

AdSense setup for AMP Picture 7
AdSense setup for AMP
Picture 7
AdSense setup for AMP Picture 8
AdSense setup for AMP
Picture 8

Now just go to:
Account – Settings – Account information
and note “Publisher-ID” number – it’s needed for the next step.

AdSense Publisher ID number Picture 9
AdSense Publisher ID number
Picture 9

3.2. Adding code to the website

I found many various code versions on the Internet (including AMP and Google documentation). The thing that worked for me is shown below, I added that to functions.php of the child theme:

// ads for amp - will be loaded into header

$print_amp_auto_ads = function() {
	$ad_client = 'ca-pub-xxxxxxxxxxxxxxxx'; // YOUR Publisher ID goes here
	if ( function_exists( 'is_amp_endpoint' ) && is_amp_endpoint() ) {
		?>
		<amp-auto-ads type="adsense" data-ad-client="<?php echo esc_attr( $ad_client ); ?>"></amp-auto-ads>
		<?php
	}
};
// For Paired/Native mode.
add_action( 'wp_footer', $print_amp_auto_ads );

// ads for amp end

Google recommends this be done adding code to AMP page head tag and body, but it didn’t work for me. Here’s Google’s code:

//  Head tag part:

<script async custom-element="amp-auto-ads"
        src="https://cdn.ampproject.org/v0/amp-auto-ads-0.1.js">
</script>


// Body tag part:

<amp-auto-ads type="adsense"
              data-ad-client="ca-pub-xxxxxxxxxxxxxxxx">
</amp-auto-ads>


4. Testing – validation

Use some of the testing tools and see if AMP page version passes the test. Some available tools:

A page that isn’t AMP valid shows errors like these when tested:

Failed AMP validation Picture 1
Failed AMP validation
Picture 10

Page that passes the test looks like this:

Successful AMP validation
Successful AMP validation
Picture 11


5. Note: caching plugins

There are numerous plugins for caching WordPress websites. Some of the optimizations that those plugins do can cause problems with AMP page validation. If you have problems validating your pages, try first disabling the caching plugin and, if that helps, try to figure which otpions cause problems (trial and error method).

List of problematic optimizations for LiteSpeed caching plugin:

(5) Optimize

  • Load CSS Asynchronously

(7) Media

  • Lazy Load Images
  • Lazy Load Iframes

I asked at the plugin’s support forum if it’s possible to add options for disabling these optimizations for AMP pages only.

Share...

Leave a Comment