Important update: This post has now been archived. Please check out the updated version of this post on improving page speed and core web vitals here.
Have you heard of AMP? It stands for Accelerated Mobile Pages, and in this post, I'm going to show you how you can add this feature to your WordPress blog using a simple plugin and a few tweaks of some settings.
Now I'm writing this post for three reasons.
One, to help out a very good friend of mine who recently asked for some advice about this.
Two, for anyone else who is looking for clear-cut plain English instructions on doing this without losing their marbles.
And three, because I couldn't find a simple enough step-by-step tutorial anywhere, that shows how to set up AMP in your WordPress blog, without tearing your hair out...
Before I start, here's a quick rant about what AMP actually is, and why it's important for bloggers and especially owners of news blogs to have this set up properly.
AMP stands for Accelerated Mobile Pages, and it's a concept that Google has been pushing out for some time now in their continued efforts to make mobile-friendly search a top priority.
To make it very simple for anyone to understand AMP, it was designed to make web pages load almost instantly when searched for and viewed on mobile devices.
What visitors will actually see is a completely deconstructed version of a web page, without styling or much in the way of design.
This is, of course, to allow for fast loading, where just the content and featured image is visible.
If you run a news blog, or if you have a blog full stop, it's imperative that you have AMP set up correctly, especially if you want to play by Google's rules in the future and ensure your content has priority in mobile search.
Now from what I've read elsewhere online through various forums, and from what I already know, AMP isn't enabled in every country as of yet.
Whether that's true or not, I can't tell you. Personally, though, I haven't noticed anything here in the UK using the mobile search... Yet.
In any case, if it isn't available yet in all countries, there's no doubt in my mind that Google will be making this the case in the coming months when they roll out their latest updates.
You can learn more about AMP here.
OK so enough chatter from me, here's how to ensure AMP is correctly set up on your WordPress blog, the easiest way possible, step-by-step.
Quick note: I just want to quickly remind you that for this to work, I'll assume you have the WordPress SEO by Yoast plugin already installed. If you don't, then the Glue for Yoast plugin obviously won't work.
Log into your WordPress dashboard and head over to plugins.
Do a search for "amp". When you see the AMP plugin by Automattic, hit the install button, then activate the plugin.
Now go back to plugins and hit add new again, then do a search for "Yoast amp".
When you see the Glue for Yoast SEO and AMP plugin, hit the install button, then activate button.
Head over to Yoast > AMP and first select what post types you'd like to apply AMP to.
By default, you'll notice that "posts" is automatically enabled. This is all you need for your blog, unless you'd like other post types enabled, such as your pages.
Once you're done, hit save changes.
Click on the Design tab to style how your AMP pages will appear on mobile devices.
Here you can upload an icon that's 32 x 32 px in size.
You're able to add a default image of 696 px wide for posts that don't have a featured image.
You're also able to change the header color, content text colors, link colors, apply custom CSS and more.
Play around with the customizer until you find a perfect match to your blog's identity.
To find the hex color codes of your website, use something like Photoscape. Or, if you're on a Mac computer, the Colour Picker app is very useful.
Once you're done customizing, hit save changes and you're done. You've set up AMP in your WordPress blog!
Now go and visit one of your blog posts, then add /amp/ at the end of the URL string to see what your post will look like.
For example, if you were to add /amp/ at the end of the URL for this exact post, you should see something that looks like the screenshot below.
This is what your visitors will see when they click on an AMP-supported page on your site, via mobile search.
You don't need to add an Analytics tracking code if you already use the Monster Insights Plugin, tracking will automatically take place (apparently).
OK so let's go through a quick recap of the steps above:
If you want to stay on the safe side of Google's rule book, do this immediately before the updates occur.
There's been plenty of warnings from Google, and from people talking about this on various Webmaster forums that this is coming, so be prepared, get your site AMPed up.
Don't forget to log into your Google webmaster console in a few day's time to check your Accelerated Mobile Pages index and errors reports.
If you get any errors perhaps you can refer to the AMP website for documentation.
As you can see from the image below, when I originally set up AMP for this site, I had a few errors which I had to take care of. Some errors are a lot more complex than others though.
Well, I hope this short tutorial has helped you out in some way. If you have any questions please don't hesitate to ask me in the comment section below, or send me an email if the comment section is closed.
Best of luck.
