Now I’m writing this post for three reasons.
One, to help out a very good friend of mine.
Two, for anyone else who is looking for clear-cut plain English instructions on doing this without losing their mind.
And three, because I couldn’t find a simple 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 its important for bloggers and owners of news blogs to have this set up properly.
What is AMP?
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 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, to allow for fast loading of course, 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 I haven’t noticed anything here in the UK using 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 setup on your WordPress blog, the easiest way possible, step-by-step.
Quick note: I just want to quickly mention that for this to work, I will assume you have the WordPress SEO by Yoast plugin already installed. If you don’t, the Glue for Yoast plugin obviously won’t work, but I’m sure you already knew that. Just a quick heads up that’s all.
Step One: Install the plugins
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.
Step Two: Configure
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.
Step Three: Customise
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 colours, link colours, apply custom CSS and more.
Play around with the customiser until you find a perfect match to your blog’s identity. To find the hex colour 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 customising, 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 particular post, you would see something that looks like this. 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 Analytics tracking code if you already use the Google Analytics plugin, tracking will automatically take place apparently.
OK so let’s go through a quick recap:
- Ensure you have Yoast SEO insalled.
- Install and activate AMP plugin by Automattic.
- Install and activate Glue for Yoast plugin.
- Configure types of posts you’d like to apply Amp to on your site.
- Add some style to your Amp pages using the built in design tool in Glue for Yoast plugin.
If you want to stay on the safe side of Google’s rules, do this immediately before the updates occur. There’s been plenty of warnings from Google, and from people talking about this on Webmaster forums, that this is coming. So be prepared, get your site Amped up.
Checking results in Webmaster Tools
Don’t forget to log into your Google webmaster console in few days 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 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 even.
Best of luck – Fabrizio Van Marciano