How to Implement and Optimize AMP in WordPress

Do you have Accelerated Mobile Pages working? Unless you’re a major news outlet like The Guardian, you probably don’t. In this post, we’ll talk about what AMP is and what it’s not, how it will be hugely important for SEO (or totally irrelevent), and lastly how to get it working on your own WordPress site. And in the next post we’ll cover how to install the analytics, which will answer the question which is hovering sword of Damocles-like above this whole project: Is AMP worth the trouble? Or is it another crazy scheme like Rel Author which won’t catch on?

Accelerated Mobile Pages: Possibly a Big Deal

Starting on Wednesay, February 24th, two days from the writing of this blog post, Google will start presenting AMP in its mobile search results.

First, let’s remove the two major misconceptions that the name “Accelerated Mobile Pages” has already given you and everyone else. AMP is absolutely not a way to speed up your site’s load time. In fact, AMP is a tool for bypassing your site’s speed entirely. Second, AMP is not a way to deliver mobile content to your users and it’s not the newest successor to responsive design.

Accelerated Mobile Pages allow Google to present extremely fast content through mobile search. If you’re not on a mobile device, Google won’t show you AMP content. And to ensure the fastest possible loads, Google will cut you and your second-rate hosting out of the equation entirely by caching your AMP content on Google’s own servers.

So basically, you’re jumping through hoops to give Google content to present to their users, through their hosting, using their stringent quality standards, and without the design and features that you’ve worked so hard to implement on your site.

Take a look at this very post in AMP format, presuming you’re not doing so already. All you have to do is type “/amp” at the end of the URL and go:
https://tastyplacement.com/how-to-implement-amp-and-google-analytics-in-wordpress/amp
Are you back? Doesn’t look like much is going on, does it? It’s supposed to be simple and cookie-cutter because everything here is about speed.

What Does AMP Mean for SEO?

If your site doesn’t pull any search traffic for the terms which provoke AMP search results, then this won’t amount to anything. If Google displays AMP results for your keywords, then it means choice rankings right at the top of the page. If there’s anything which is more of a no-brainer for SEO than automatic #1 rankings for a sizeable chunk of your organic traffic, please mention that in the comments.

At the moment, the AMP results demo only seems to show for very current news topics. You can expect that to expand as more publishers push into Accelerated Mobile Pages. Try opening this link in a mobile device to see it in action.

Getting AMP Working

The first step is to get the official AMP plugin for WordPress installed on your site. The team working on this piled on a bunch of updates under the wire before the big day. Just last month it gave some pretty raw results, with broken code displaying visibly on most pages.

Currently, the plugin only works on posts. It will not do regular-old pages or archive pages or anything like that. And it doesn’t have to. Remember, the mission for AMP is pretty narrow right now. It’s all about delivering content fast for mobile searchers and they won’t need any of that stuff.

The plugin is going to do all the heavy lifting of making the meta-tag markup work and having most of the content validate. You just need to make it look good and fix anything overly ugly.

Sprucing It Up

Out of the box, the AMP template for WordPress is pretty vanilla, but that’s kinda the point. You will want to customize it with your logo. The developers of the plugin want you to make your changes using hooks. This is the WordPress way and in the long term it will be the most future-proof strategy.

The AMP template will only display a 32×32 image. You may already have a favicon file of this size, but if not, shrink down your logo and then upload it to the WordPress media library.

To add that image, drop this function at the bottom of your theme’s functions.php file:

///////////////adding the site icon to AMP///////////
add_filter( 'amp_post_template_data', 'xyz_amp_set_site_icon_url' );

function xyz_amp_set_site_icon_url( $data ) {
// Ideally a 32x32 image!!!!!!!!!!!!!!!!!
$data[ 'site_icon_url' ] = get_site_url() . '/wp-content/uploads/YOURLOGONAMEHERE.jpg';
return $data;
}

If you want to make more sweeping changes, you will have to put together a custom template, but that’s probably not worth the effort until you know how much traffic you’re getting through the AMP initiative.

Troubleshooting AMP in WordPress

Most likely there’s going to be some problems. The AMP plugin broke our front page because we had our site name saved with a couple of capital letters. I found that the Digg Digg plugin broke AMP. Our caching plugin also caused strange results. Like usual, plugin conflicts will be the source of most of your problems.

To check to see if your page validates correctly, just add “#development=1” to the end of your AMP URL in Chrome. Then right-click, inspect element, and click on the “console” tab. If you haven’t made any mistakes, then you’ll get the all-clear validation:

If you don’t, then you have more work to do.

Once Google has crawled the site, they’ll let you know if any of the pages failed to validate in Search Console.

Maximizing Your AMP Traffic

You will notice that the AMP template doesn’t have a menu or footers or sidebars, or all the bells and whistles we expect from WordPress. All this hypothetical traffic from Google mobile search won’t mean anything if you can’t keep visitors on your site. So try adding this code to your functions.php, so any users who get to the bottom of your content won’t be left hanging:

////A little message for the end of AMP pages/////
add_action( 'amp_post_template_footer', 'callToActionAmp' );
function callToActionAmp() {
	$sitelocation = get_site_url();
	?><div class="content"><h3>Get more great infotainment <a href="<?php echo $sitelocation; ?>">on our main site</a>!</h3></div><?php
	return;
	}

And that should more or less have you set up for Accelerated Mobile Pages. Let us know if you get any meaningful traffic from it!

In the next post we’ll talk about how to get Google Analytics working on your AMP pages.