Most of you must have been reading about Facebook’s Instant Articles and Google’s Accelerated Mobile Pages HTML. Well I bet it will also be good news for you to hear you can bring the Instant Articles and AMP HTML pages into your WordPress’ world by simply using two awesome plugins.

For those who have not heard of Facebook Instant Articles nor Google’s AMP HTML. These are both techniques that allow the loading of pages and posts in a way faster way for mobile visitors either finding your page via Google or Facebook. I will discuss these two briefly and then move on to the implementation on WordPress

Facebook Instant Articles

Facebook Instant Articles allows publishers – not everyone just yet – to publish articles using their Instant Articles technology on their platform.

This allows the quick loading of normally kind of slow loading articles due to images, scripts and what not. Imagewize has requested for becoming a publisher, but has not been officially allowed in as of yet. We will have to wait and see when we are allowed in. Can’t wait!

AMP HTML

Google nowadays will indicate whether a site is mobile ready or not, but it will now also indicate whether or not a page is AMP Powered. Here an example of a search result where Google indicates that the BBC is using AMP for mobile pages:

Just like for Instant Articles Google is using the lightning icon next to the article to indicate that this article will be loaded faster than regular articles on mobile. The great thing about AMP is that you can start using it right way and out of the box using the plugin discussed a bit later on in this post. Pages and archives are not supported out of the box though and regular users need to append `/amp/` to enjoy faster loading articles.

If you wonder whether AMP is only offered by Google as a provider. No, there are other partners that are working with Google on this including Automattic ergo the plugin. But so far Google is the main one working with the open source technology. And I doubt Bing will be showing AMP powered in search results any time soon.

Combining it all in WordPress

To make this all work in WordPress you need to add to plugins. One is AMP by Automattic and the other is Page Frog. The former is exclusively for working with AMP, the latter for both AMP and Facebook Instant Pages as well as some configuration options.

AMP for WordPress

With this plugin you can actually take care of the actual implementation of Google AMP HTML on your WordPress site. It generates AMP HTML for all your pages that is accessible adding /amp/ at the end of the url of the page or post you have running with AMP using Page Frog. Out of the box this plugin does not allow any tweaking. Without it Page Frog cannot work with Google’s AMP either though so do install both for all the magic to work!

Page Frog

Page Frog should be added to WordPress to allow a more fine grained control over what pages should run with AMP and Instant Articles and to add Facebook Instant Articles which is not added to WordPress with AMP of course. Page Frog can be checked out here. Here below a screenshot of my current setup. As seen is Facebook not done yet as I am not allowed in as a publisher yet, but AMP is purrin’ like a kitten. As for Apple News, well as seen that feature is not implemented as of yet..

Page Frog Settings

One of the advantages besides using Page Frog for both Facebook Instant Articles and AMP is that you can decide what type of posts you want to use it for, whether you want to include existing posts and pages.

Here Page Frog AMP settings for Imagewize:

You can also preview all posts in both Facebook Instant Articles and AMP HTML using the post sidebar where a box for preview is added:

Pretty cool huh!

Well that is it for now. As soon as I have some more experience with both WordPress AMP and have Facebook Instant Articles Access I will update the post again.

Jasper has been working with web frameworks and applications such as Laravel, Magento and his favorite CMS WordPress including Roots Trellis and Sage for more than a decade. He helps customers with web design and online marketing. Services provided are web design, ecommerce, SEO, content marketing. When Jasper is not coding, marketing a website, reading about the web or dreaming the internet of things he plays with his son, travels or run a few blocks.