The right way to add AMP (Accelerated Mobile Pages) to your WordPress site

Home / Web Development / The right way to add AMP (Accelerated Mobile Pages) to your WordPress site

Accelerated Mobile Pages

Google’s Accelerated Mobile Pages (AMP) have been around for a couple of years, but they have come back into the spotlight with the recent Google search update changing things (again!) for mobile searchers. We all know Google is on a mission to reduce page load times and whether you like it or not, the tech giant is forcing the web community to adhere to new standards. As for search engine optimisation (SEO), at Blak Ink Media we saw quite a dramatic fluctuation in rankings after the recent algorithm update, which appears to be rewarding sites that offer a better user experience on mobile devices.

We expect many websites that have so far not bothered to implement AMP will now be rushing to get it set up on their website.

Here is how you can get started with AMP in less than 30 minutes.

How can I add AMP to my WordPress website?

The good news is it’s pretty easy to set up AMP for your WordPress website. Here are a few simple steps:

1. Install and activate these two AMP plugins.

You’ll need to install the official WordPress AMP plugin:

AMP for WordPress – https://wordpress.org/plugins/amp/

Assuming you’re already using Yoast SEO (if you aren’t, you should be), you also need to grab their AMP plugin:

Glue for Yoast SEO & AMP – https://wordpress.org/plugins/glue-for-yoast-seo-amp/

2. Configure the AMP plugin

There’s not much to configure, but once the WordPress AMP plugin is activated, you’ll see a new “AMP” item in your WP Admin menu. Click on it to go to the General settings. This is where you select which post types you want AMP to be active for. In most cases, you just select “Posts”. This makes your blog posts available in AMP format, but not your pages or other post types. Depending on your website and content, you might have additional post types that you can activate such as products or portfolio.

3. Add some basic styling to your AMP pages

This part uses the Yoast SEO plugin. Under the SEO admin menu item, you’ll see a new “AMP” menu item. Click on that and you’ll see an option page with three tabs: post types, design, and analytics. Ignore “post types” as you’ve just set that, click on “design”.

Here you can select a 32px x32px icon and set some basic colours. We suggest you set the header colour, title colour, and link colours just to keep your amp pages on brand. AMP supports a lot of CSS styling options, so you can get quite fancy and recreate much of the styling you have on your non-AMP pages. You can add any custom CSS in the box on this page, but that’s not the goal of this post, so let’s continue to aim at getting AMP set up quickly.


Need us to help? Accelerated Mobile Pages set-up is included for all our website development and SEO clients.


4. Add your Google Analytics code

AMP has a special way to set Google Analytics code since custom JavaScript is not supported. Setting up Google Analytics is actually one of the most confusing parts of setting up AMP on your website. Some blogs suggest you edit the plugin template files – this is not the right way to do it and if you simply paste your tracking code here you’ll end up with invalid pages.

The right way to do this is in the Analytics tab of the Yoast SEO AMP options. But you can’t just paste in your normal JavaScript code – it has to follow a special format to be valid. If you enter any invalid code then this page will not save the field. You’ll know you’ve got it right when the field saves the data.

The format for your analytics code should be as follows. Just change UA-xxxxxxxx-x to your tracking ID.

<amp-analytics type="googleanalytics">
<script type="application/json">
{
"vars": {
"account": "UA-xxxxxxxx-x"
},
"triggers": {
"trackPageview": {
"on": "visible",
"request": "pageview"
}
}
}
</script>
</amp-analytics>

5. Validate your AMP pages and make sure the Google Analytics code is working

Your AMP pages will have an /amp/ suffix on the URL. For example: yourdomain.com/blog-post-name/amp/

Go ahead and visit the AMP version of your blog posts and check the real time view in Google Analytics. You should see your visit being recorded. Then you can use Google’s tool to validate your AMP page by putting your AMP URL in here: https://search.google.com/test/amp

If you don’t see anything, it might be your cache plugins – just clear the cache and it should work.

Once you’ve checked everything is working you now just have to wait for Google to start indexing your new AMP pages. You can keep an eye on this through Google Search Console, just go to Search Appearance -> Accelerated Mobile Pages to see the current index status of your new AMP pages.

Comments(0)

    Leave a Comment