AMP Pages in WordPress – the Easy Way

It’s interesting to see Google really pushing AMP (Accelerated Mobile Pages) and featuring sites that are AMP-ready more prominently in its mobile search results.

What’s AMP? Good question. It’s one I’m going to let my friend and colleague Jen Lombardi, owner of Kiwi Creative, explain, as she did in this blog post for the EdUI conference. She says:

With faster cellular data networks and increased access to Wi-Fi, people have come to expect that websites will load quickly and be easy to explore. But what if pages didn’t just load fast…but instantaneously? That was the goal of a group of publishers and technology companies that started the open source initiative named The AMP (Accelerated Mobile Pages) Project.

Introduced by Google on February 24, 2016, AMP pages now load 85% faster than standard mobile web pages…and this speed matters. According to one study, mobile pages that load one second faster experience up to a 27% increase in conversion rate.

Google says this:

The Accelerated Mobile Pages (AMP) Project is an open source initiative that embodies the vision that publishers can create mobile optimized content once and have it load instantly everywhere.

It’s interesting to watch Google reach into this space. Many of our sites today are responsive, but I find that even when responsive, the sites are huge, often unoptimized messes. This is especially prevalent in WordPress, where each plugin adds its own javascript and CSS files, and it doesn’t take long for a simple one page website to be well over 1MB in size. That’s crazy, especially on mobile.

AMP is forcing developers to reconsider the information they’re presenting, but the reward is more visibility in Google.

While AMP pages are getting pushed big time by Google, implementing this new technology can be tricky. For example, all your CSS must be inlined and not in external files. One more thing – that CSS has to be less than 50k. Search Engine Land has a deep dive into how to create these pages.

Want to see an AMP page in action? Here’s a post I did about Instagram a few months ago, but in AMP format. Have a look not only at the design but at the code inside it. You’ll get a taste for how much you have to shift, style wise, from external files into the actual HTML file.

As this site is created in WordPress, I turned to an AMP plugin created by Automattic.

Spoilers: there’s no setup or config for this. You install it, turn it on, and that’s it. It does all the work in creating the correct template, inline CSS, and body copy in all the ways Google wants it to be. My pages are also passing the AMP Validator tests. Yay.

AMP validation results for this site

This plugin also adds a meta tag to your regular WordPress theme, again with no added work on  your part, alerting Google that an AMP version of that page exists. It looks like this:

<link rel="amphtml" href="https://www.highedwebtech.com/2016/06/07/instagram-breaketh-their-api/amp/" />

That’s enough for Google to know there’s and AMP version and present it, if necessary, to site visitors via search.

Now, if you’re like me, you’re mind is traveling down the rabbit hole of all sorts of web development issues – issues like SEO, analytics, design, and more.

Read Jen’s post above as she covers SEO and design nicely, but AMP does allow developers to do analytics, ecommerce, and even advertising. This post from Google talks about how to integrate Google Analytics into AMP pages. If you use Jetpack and WordPress stats, this is another thing that the AMP plugin sets up automatically for you.

If you use WordPress, you should try this plugin. If you don’t use WordPress, the process to implement AMP can be more difficult and time-consuming, but if you rely heavily on Google, the reward may be worth the effort.