AMP Boot Camp: Making Your WordPress Site AMP-Only

AMP, or Accelerated Mobile Pages, is meant to be displayed on mobile devices that often lack in the powerful hardware of the desktop computer. AMP pages are marked up in a special way, and keep speed in mind. They limit the tags that can be used, and feature a rule set of which can be looked at as “best practice” for keeping web pages light weight and fast.

Months ago, when dreaming up a new personal project, I decided that I was going to go AMP-only with it. I wanted to primarily focus on delivering excellent content, and maximizing conversions. Web page speed and cleanliness factor in heavily when it comes to conversions I feel.

I don’t browse the Web a whole lot on mobile devices, but I know others that do. And I know that many of these devices and their apps show more streamlined versions of web pages by default. And I know that some web browsers, even on the Desktop, have “clutter-free” or “distraction-free” viewing options, and people use them… a lot! At first, this felt disheartening to me. You see, I often spend a lot of time on the “look-and-feel” of a web page. But then it hit me. Rather than feeling the need to spend so much time on what turns out to be clutter anyway, why not create pages in the cleanest way possible, and use those pages for everyone? Sure, the pages will inevitably look a little different for different orientations, but still, I can work on one clean version that *most* everyone will see, regardless of device. AMP made sense to me for that.

Using the AMP WordPress Plugin Instead of Reinventing the Wheel

At the time, when thinking about all of this, there wasn’t anything in place for WordPress for getting AMP up and running. So my initial idea was to create an AMP WordPress theme. But since then, the first version of the AMP plugin came out, which creates AMP-versions of single post pages using a customizable (with hooks) template. This template is an extension to the currently activated theme in a sense.

At first, I didn’t like this route, because by default there are 2 versions of each single post page. While that is the desired effect in many cases, it isn’t for my case. I want just AMP-only pages for my WordPress posts. So, I wrote a quick plugin, for which I will share the code with you below, that allows me this option.

Now, please keep in mind that this approach won’t make your entire WordPress web site AMP-only. It’s just for single post pages. At present, the AMP plugin doesn’t convert pages (including the homepage), or archives into AMP-friendly code. So, it will use the appropriate template files from the currently installed theme for those pages. Myself, I am going to short-circuit WordPress to use AMP for everything, but that’s just a temporary fix until the AMP plugin sees new supporting versions. So, for today, I just want to share with you how to make single post pages AMP-only for your web site.

Advantages and Disadvantages for Creating AMP-Only Pages

There are some obvious advantages to going the AMP-only route, some of which include:

• having to maintain only one version of a web page (unless of course you also eventually want to tap into Facebook Instant Articles and/or Apple News)
• having a super fast Web page for all environments including mobile, TV, desktop, etc.
• having a clean, clutter-free, jank-free, Web page that has the potential for higher conversions and lower bounce rates

Now, while we could “hook” into the output and do extra things with it, we have to be careful to not break our AMP-pages when we do. Thankfully though, we can test them with various AMP validation methods.

Here’s a bunch more info if we want to make further customization to the AMP pages. For example, by default, featured images aren’t present in the output, only “attached” images.

The Code to Bypass Single Post Pages and Redirect to the AMP Versions

OK, I think that’s enough background. Below is the code needed so that the single post page template is bypassed from the currently activated theme, and rather, an AMP-only page is presented every single time, regardless of device. In other words, even desktop/laptop users will see an Accelerate Mobile Page.

This really only involves 2 steps.

First, we want to setup a permanent redirect from the single post page to the AMP version. Next, we want to modify the canonical URL on the AMP page to that of the AMP version. By default, and AMP version of a single post page in WordPress is the same URL as normal, but with “amp/” appended. It’s called the “AMP Endpoint” and can be retrieved with AMP_QUERY_VAR so there is no need to hard code it in, because it can be changed.

Below is the code to setup a permanent redirect from the non-AMP page to the AMP page.

<?php
function tthqkl_page_template_redirect() {
    if ( !is_singular() || is_amp_endpoint() )
    return;
    wp_redirect( get_permalink( $id ) . AMP_QUERY_VAR . '/', 301 );
    exit();
}
add_action( 'template_redirect', 'tthqkl_page_template_redirect' );
?>

In the above code, you will see that we are making sure we are on “singular” pages only. This refers to single post pages, as well as custom post types. We would look at just is_single() if wanting to look at standard posts only. The is_amp_endpoint() check prevents an endless loop. The “301” is the redirect status code, which makes this a “permanent” redirect.

Next, we just want to clear the default canonical URL from the AMP page (which is set to the standard post version), and make it the AMP URL instead.

First, let’s remove the canonical from the AMP pages:

<?php
function tthqkl_amp_remove_actions() {
    remove_action( 'amp_post_template_head', 'amp_post_template_add_canonical' );
}
add_action( 'amp_post_template_head', 'tthqkl_amp_remove_actions', 9 );
?>

Now, let’s add the correct canonical:

<?php
function tthqkl_rel_canonical() {
    if ( !is_singular() )
    return;
    $link = esc_url( get_permalink( $id ) . AMP_QUERY_VAR . '/' );
    echo "<link rel='canonical' href='$link' />\n";
}
add_action( 'amp_post_template_head', 'tthqkl_rel_canonical' );
?>

That’s all there is to it. Now you can click the “View” link from the WordPress Dashboard for a post, and then watch it direct right to the AMP version. Of course, make certain to have the AMP plugin installed before doing any of this 🙂 Then, you can right click the AMP page and “View Source” and search for the canonical URL to make sure it is set correctly (and that there is only one canonical URL present).

Now, all you have to do is focus on content and conversions, and drive some traffic. Not that you need to follow suit, but for my site, my intentions are to only have one singular call-to-action per page, with a tiny nav for the Legal Docs, About, Contact, etc. and a “Subscribe” link that just links to a MailChimp hosted subscribe form. I want to limit the options and clutter, and hopefully see better conversions because of it.

The WordPress optimization tips and tricks tutorial is also a good read.