Blog: WordPress
Mobile phone

Integrating Google AMP and WordPress

Avatar for John Locke

John Locke is a SEO consultant from Sacramento, CA. He helps manufacturing businesses rank higher through his web agency, Lockedown Design & SEO.

In October of 2015, Google debuted a new project called AMP, or Accelerated Mobile Pages.

The project is open-source, with other companies like Adobe, Twitter, Vox Media, BBC, The Guardian, and The New York Times also contributing to this project.

So what is AMP? And why does it exist?

For the last few years, web use has been predominantly on mobile devices. But many people have bad network connections — often on 3G or less networks.

Numerous usability tests have shown that many customers leave a site if it doesn’t load in less than three seconds.
But the weight of the average web page has also grown at a steady pace, at the same time that mobile use is going up.

What this adds up to is lost revenue for tons of companies, and a poor experience for people browsing the web on their phones. In particular, media companies that rely on advertising to pay the bills.

Faster Mobile Pages

As web pages get heavier, the slower pages load, meaning the less people browse some of the top publishing sites.

The solution: strip out all the unnecessary cruft from web pages, and serve a much slimmer page to mobile visitors instead.

AMP favors function over style. By default, many elements like JavaScript, comments, contact forms, social buttons and e-commerce are stripped out.

The result: pages that are very fast.

Many people believe that Google started this project in direct response to Facebook Instant articles, which also load very quickly, and gained a lot of traction with large-scale publishers. The big difference between these two is that AMP is open source, and can be self hosted, while Facebook Instant Articles are only part of the Facebook ecosystem.

How AMP Works

AMP creates a second version of existing pages. Desktop users are served the regular URL; mobile users get the regular URL with /amp/ appended to the end.

Only one stylesheet is served. Flash and certain embeds are disallowed. You must use HTML5 for audio and video support. The input element is disallowed. And many HTML elements are replaced by AMP specific elements (For example: img becomes amp-img).

A stripped-down version of the page is served to mobile devices.

AMP and Advertising

Some ad platforms will still work with AMP pages, with some tweaking. Over 20 major ad platforms have collaborated on this project to make sure that advertising will still be possible on AMP pages.

This is achieved by using the AMP-specific amp-ad element. More information can be found on the AMP Project site.

AMP and Analytics

There are a couple of ways you can address analytics with AMP in a general sense. Google recommends you use Adobe Analytics or the AMP-specific element amp-pixel to track certain actions.

If you have a WordPress site, and want to start using AMP pages, there’s another method. (More on this in a second.)

So let’s talk about that — how to integrate AMP with WordPresss.

Using AMP and WordPress Together

So, I’m currently experimenting with using AMP and WordPress on one of my own side projects that’s more of a straight-up blog.

What I recommend for WordPress sites is to use a few plugins to get functionality, style, and analytics working correctly with your AMP pages.

AMP For WordPress (Automattic)

The first plugin you should install is AMP by Automattic.

This plugin will create the /amp URLs and code for your Posts. Pages and archives aren’t currently supported – but the AMP project is aimed more towards news articles and serialized posts. So if you’re considering using AMP with your WordPress site, that’s more of what you’d want to use it for anyway.

What you’ll notice right off the bat is your posts probably look completely minimal and devoid of style when you go to the /amp/ URLs.

To override the CSS, you can create a directory in your theme folder called amp and add a file named style.php there. If you’ve created override templates for WooCommerce or BuddyPress, this works in a similar fashion.

Alternately, you can add a custom function to your functions.php file to add specific CSS to the AMP version of your pages.

In the following example, I’m stripping out the Sharebar icons and adding some extra margin to the bottom of images.


/**
 * Custom AMP styles
 *
 */

add_action( 'amp_post_template_css', 'xyz_amp_my_additional_css_styles' );

function xyz_amp_my_additional_css_styles( $amp_template ) {
    // only CSS here please...
    ?>
    amp-img {
        margin-bottom: 24px;
    }
    <?php
}

If you want to build custom templates for your AMP pages with the Automattic AMP plugin, most of that is done in PHP. You can add that via a custom plugin, your functions.php file, a child theme, or a mu-plugin (Must Use).

The documentation for the AMP for WordPress plugin can be found on their GitHub page.

Glue For Yoast SEO & AMP

Glue for Yoast SEO & AMP is plugin that was recently created by Joost deValk to output the correct metadata with the Yoast SEO plugin.

AMP Yoast SEO

There’s a walk-through of how to set this up with the Automattic AMP plugin on the the Yoast site.

There is some small design overrides you can perform with this plugin, like setting the logo, and the color for the header, body text, and links.

AMP Yoast Glue

Yoast has stated that this plugin will likely be rolled into the regular Yoast SEO plugin by the end of 2016.

If you already have the Google Analytics for Yoast premium plugin installed and configured, your Google Analytics info will already be synced up to your AMP pages.

If you don’t have this plugin, there’s another way to track your WordPress AMP pages in Google Analytics.

WordPress, AMP, and Analytics

There’s a new plugin from WP Valet called AMP Analytics. It does one thing very simply, and that is add your AMP pages to your regular Google Analytics information.

There’s one input in AMP Analytics > Settings, for your Google Analytics ID.

AMP Analytics

This gets output in the AMP page footer as JSON data using the amp-analytics element.

Do You Need To Use AMP?

AMP pages are meant for a specific type of web publisher. If you rely heavily on your blog as a news feed, media stream, or as a source of content-related revenue (ad monetization), then AMP is probably something you need to be looking at.

Google shows AMP results on the top part of mobile results for certain searches – usually news items.

If you’re site is primarily e-commerce, or relies heavily on JavaScript for site functions, or has many contact forms that need to stay in place, then AMP may not be for you — yet.

Remember that the web is a constantly evolving place. Search, and other forms of digital marketing are a constantly moving target.

Avatar for John Locke

John Locke is a SEO consultant from Sacramento, CA. He helps manufacturing businesses rank higher through his web agency, Lockedown Design & SEO.

2 comments on “Integrating Google AMP and WordPress

  1. I hope, that using AMP has some benefits. Thanks to Automattic, implementation is very simple. I must try the AMP Analytics plugin.

  2. I’m thankful that there are plugins that make AMP development a bit easier to integrate with WordPress. The documentation on the AMP Project site is pretty straightforward, but the biggest thing is having two copies of the pages — one for regular pages, and one set of AMP pages.

    One thing that I should also mention is duplicate content, which many people realize can be bad for SEO.

    Using the setup described in the article for WordPress, the regular page uses the rel="canonical" tag, and that tag is also on the AMP version of the page. So, search engines will know that the regular version of the page is the canonical version no matter what.

Join the Conversation

Your email address will be kept private. Required fields marked *.