Installing AMP in WordPress

Installing AMP in WordPress

What's AMP?

Last October, Google announced AMP as an open-source initiative to provide faster mobile web browsing. As described by TechCrunch, many see AMP as an attempt by Google to compete better with Facebook's Instant Articles and mobile applications which increasingly provide faster, more streamlined browsing. I tend to agree.

Pages optimized with AMP will appear in a mobile browsing carousel at the top of Google Search results, relegating traditional HTML articles to further down the page. And they'll load almost instantly.

Honestly, I'm skeptical of AMP for bloggers and small publishers. We often write great content that struggles to make it to the top of Google Search results. Now, we have to implement yet another technology on our limited resources in hopes that our content appears at the top. Interestingly, while large media publishers appear, I'm not seeing blog posts in AMP search results and neither are other WordPress bloggers:

I also suspect the UX of burying other search results below the carousel will work well for Google.

When I worked at Microsoft, I helped launch MSN News in 1995 as part of the MSN Online Network which launched with Windows 95, Microsoft's answer to AOL. MSN News required a custom application viewer which ran on a version of Microsoft's Media Viewer platform, the framework that had enabled their earlier CD content efforts. But, within a year, we had to prepare for the web and our merger with NBC—it later became MSNBC.com. We had to customize our publishing framework to generate both Media View and HTML simultaneously. This created a number of new complexities.

AMP reminds me of all those efforts. It's an extremely different, highly constrained version of HTML which requires vast changes to your site and any advertising you might be using.

The Free WordPress AMP Plugin

The good news is that WordPress has launched a free AMP plugin that helps you implement AMP without a lot of extra development. However, it has a lot of limitations. The design of your site is heavily constrained, and there are conflicts with other WordPress plugins, common optimization techniques, and more. AMP will also now become an additional burden for WordPress theme developers.

AMP is in its infancy, and I'm disappointed that Google chose to create an entirely new framework rather than work with publishers to optimize HTML5 to more quickly configure how pages should load, what should load first, and how to lay out text quickly. This would have been a more enlightened approach. But then, the Google teams are geniuses.

Despite my concerns, in this tutorial I'll walk you through installing the AMP plugin for WordPress and the Yoast SEO Glue for AMP plugin, which gives you a bit more control over the final appearance of your site.

It turns out all of my AMP-enabled website pages on JeffReifman.com were breaking because of the error: The tag 'script' is disallowed except in specific forms. However, on PublishingwithWordPress.com, there were no errors:

In an upcoming series at Envato Tuts+, I describe how I managed to customize JeffReifman.com to reach a Google PageSpeed of 100. This required using custom features of W3 Total Cache to place some minimized JavaScript features near the bottom of the page before </body>. AMP doesn't allow this, and the WordPress AMP plugin is unable to filter it out.

I need to do more research to determine if W3 Total Cache will turn it off for me for certain paths such as /amp/ (unlikely) or if I need to find another solution. Placing these scripts back up in <head> will break my Google Page Speed. Interestingly, I also recently discovered that using Google DFP advertising on my site also breaks Google Page Speed. Google is a challenging search master, and it doesn't make it easy to use all of its technologies together.

In Closing

Frankly, I'm not sure your blog's AMP pages will ever see the light of day near the top of search, nor am I sure you will successfully earn much revenue from them without additional customizations. Google seems to be tailoring AMP for major media publishers with the resources to best optimize views for brand, aesthetic and revenue.

Essentially, AMP is the path of a questionably valuable optimized web for the open-source community, while Facebook's Instant Articles are for the chosen elite of the "great" walled garden. I'd much rather have seen Google build a prioritized loading model into HTML5 with accompanying scripts.

To me, AMP just makes it harder for small publishers to remain relevant. I'm glad WordPress is keeping up the effort to help, and I'm sure theme designers will too, but many shortcomings remain. I think Google has missed the mark at really helping anyone but the biggest web publishers here.