Last week, I came across this blog post by Neil Patel. I was psyched to learn about AMP (accelerated mobile pages), especially because it’s the solution given by Google to make your mobile pages faster, thus optimising the experience for mobile users. I won’t go into the history of AMP (you should read Neil’s post instead), but whatever I read made me believe I need to implement AMP on my website too. I made mistakes, had to look beyond Neil’s post for help, so this post is like an easy guide to accelerated mobile pages (AMP) – it basically covers my experience on how I started AMP on my website.
Accelerated Mobile Pages (AMP)
Because it’s about the speed of a website, AMP can turn out to be a major ranking factor in Google. And since I read this at Neil’s website, I knew I had to get started. But how?
So you have regular HTML, and now there is AMP HTML. When I searched through it, I understood one thing – there is no way I can implement AMP HTML on my 8-year-old website without some help.
But first I had to understand how AMP worked. Neil helped me in that too – he had this post by Paul Shappiro, from Search Engine Land, mentioned in the blog post. So I read the post to get a better understanding. It was an excellent read.
Getting Started with AMP
Both posts (mentioned in this post) were excellent. Very detailed. And precise. However, when I followed the steps mentioned in Search Engine Land post, my mobile posts came out weird. Even though validation worked, I didn’t like the styling my mobile posts adopted automatically. I couldn’t control the styling.
So it was back to good ol’pal Google Search to make my day. (By this time, I had spent around 2-3 hours on this).
And fortunately Google gave me this post by Yoast. And I find it to be the best of the lot!
Now, without further ado, here’s my easy guide to accelerated mobile pages (AMP):
Step 1. Install AMP Plugin by Automattic.
This is a no-settings plugin. You install it and activate it and leave it. No settings to set. No need to look at it ever again. And this is the culprit who was making my posts look weird. I wanted to style my pages MY WAY. So Yoast suggested a plugin called PageFrog that is being popularly used for Facebook Instant articles as well as Google Accelerated Mobile Pages.
Step 2. Install PageFrog plugin.
As mentioned above, PageFrog is a great plugin to control the styling and tracking of your Facebook Instant Articles as well as Google AMP. I almost got stuck on the Facebook Instant Article part of the plugin, but fortunately I was able to move on and configure the plugin to my liking for Google AMP.
It’s pretty straight forward to set up the plugin, and best part is you can add Google Analytics directly. However, this is not the end. Next up..
Step 3. Install Glue for Yoast SEO and AMP plugin.
This is a plugin that merges with your existing Yoast for SEO plugin, and helps you better style your content. Try to fill out every field so that you don’t errors in the future. For explanation on this, read Part II of the Yoast post.
Step 4. Validate
Validation via Google takes time, as expected. Google will not know instantly that you have set up AMP on your website. So the next best thing is a Chrome extension called Desktop AMP. This will load the AMP version of your posts instead of the regular one, thus giving you the ability to check the AMP version. And yes, this is where you’ll feel real-time amazement at how quickly the post loads.
You can also manually add “/amp/” to the end of the posts you are trying to check their AMP version.
Step 5. Wait for Errors
As Yoast mentioned, there might be an onslaught of errors brought to you because of this AMP set up in Google Search Console, but if you pay attention, you can resolve these issues immediately.
Be sure to check back to track the AMP pages in your website along with your regular ones. Here’s a snapshot of my regular post vs the AMP post..
Also Note: Social media icons/links are not enabled in AMP yet. I did try a plugin called Mashshare but it didn’t work as expected. If you happen to come across any, comment below.
Getting started with Google Accelerated Mobile Pages (AMP) is no biggie, especially if you are on WordPress. However, as always with any other setup, you have to carefully choose the settings and styling of the plugins you would need to download, install and activate to make your mobile pages load faster. I can’t say I’m super happy with the styling options I have in my hands right now, but still, this is a good start.
So what do you think about my easy guide to accelerated mobile pages (AMP)? Comment below (be nice!)..