How to setup Google AMP Pages in WordPress

Posted by on

Google has announced a new project, Accelerated Mobile Pages (AMP) so at the Publishers could create a mobile-friendly content which loads quickly on mobiles and smartphones. In this post, I will provide the complete guide about- How to setup Google AMP Pages in WordPress.

Page Speed is one of the crucial SEO factors, and Google has adapted it as an absolute ranking signal to deliver better results which render fast on mobile devices. Thus, there is a good chance for you to increase your Google Rankings.

You might like reading: Pros and Cons of Accelerated Mobile Pages (AMP)

In Google search, we often encounter with some websites which get stuck on mobile. The prime reason for this is the site may not be mobile-friendly, or it must be too large to load. Such sites may lose their rankings on Google mobile search results due to Page speed.

Thus, setting up AMP is essential for WordPress sites to rank higher on Google mobile search.

Google AMP only supports in the latest version of browsers like Chrome, Firefox, Edge, Safari and Opera. So you better update your mobile browsers to experience the new AMP pages in a flash.

Here’s how you can implement Accelerated mobile pages on your WordPress site.

Setup Accelerated Mobile Pages using WordPress plugin

Team Automattic has created an excellent plugin using which you can easily enable AMP on your WordPress website. When you install this plugin, all the mobile version of your site pages will change their URL structure by adding /amp suffix to them.

Then AMP URL will look like https://www.3nions.com/how-to-setup-google-amp-pages-in-wordpress/amp

So let’s start with the process to add AMP on your WordPress site.

Very first, you have to install and activate the AMP Plugin from the WordPress repository.

That’s it! You just enabled Accelerated Mobile Pages on your WordPress site by installing this small plugin. After installing you can check the AMP version of your website, simply by visiting AMP in your Appearance menu (Go to WP Dashboard » Appearance » AMP).

How to setup Google Accelerated Mobile Pages in WordPress

Image credits: WPBeginner

You can also test the AMP version of your website on your mobile phone browser by adding /amp in end of the URL of your any post.

Due to some reasons, Accelerated mobile pages may not function properly on WordPress Pages, but the fix is near to arrive.

In WordPress AMP settings you can set your Site’s icon, AMP theme and you can change your header colour. But remember that your header colour and link colour will be the same for all the AMP Pages.

Now, what about Designing your AMP Pages or changing this limited layout. Sounds Cool?

There are many WordPress plugin which you can use to design your AMP Pages.

Design? Yes, you can change your header, logo size, fonts, add a menu to your AMP pages, Footer, links colour, insert ads, etc. Some of them are PageFrog, AMP For WP, and my favourite one Yoast SEO Glue.

At 3nions, We are using Yoast SEO Glue to design our AMP Pages. Very Frankly, it is easy to install and configure. One more benefit of installing this plugin is that it will use proper Yoast SEO meta data to index your AMP pages Faster on Google.

After successfully installing and activating Glue for Yoast SEO & AMP plugin, head over to SEO » AMP. From there you can apply the changes to your AMP design.

Below is the screenshot where you can enable AMP for different elements of your site such as Posts, Pages and Attachments.

Just next to the Post Types tab, you will find the design tab, where you can change the style of your AMP Pages. It will let you to-

  • Change your site logo or icon
  • Set the default featured image for posts on AMP.
  • Change AMP Header colour, title and text colour.
  • Style Blockquotes and links.
  • Insert Extra/Custom CSS and meta tags.

The screenshot below thoroughly describes the design options for AMP.

So this is how you can quickly develop your Accelerated mobile pages in WordPress.

Why should you enable AMP in WordPress?

Most of the WordPress themes have overstated Responsive layout. In such situations, the mobile browsers are unable to fetch web pages.

AMP layout is a clean HTML & JavaScript framework which renders fast on mobile devices. Why? Because of Google AMP Cache.

All the AMP elements of a website are stored on the Google CDN in the form of cache. When the visitors visit your site using mobile, Google serves them the content in rocket speed. Hence, it’s a win-win for both you and your visitors.

Another great thing is AMP allows only asynchronous JavaScript to render. Thus, this helps to keep JavaScript from delaying page loading. This overall process results in a fast and proper rendering of web pages.

Related post for you: How to fix – Eliminate render-blocking JavaScript and CSS in above-the-fold content

Furthermore, you can also implement Ads on your AMP Pages. It’s incredible because AMP is neither affecting your Ad revenues nor your site design.

Thus, if you care about your content and visitor’s readability, you should look forward to embracing this Google AMP feature in your WordPress site.

Cons of Google Accelerated Mobile Pages

  • The back side of the Google AMP is that it will not directly affect your Google Rankings as we all know that faster page speed means more click-through rates and longer time on site. It is just an assumption in the case of AMP.
  • I implemented Google AMP on my site 3nions. I didn’t saw much variations in my rankings. Maybe Google takes some time to index the Accelerated mobile pages.
  • In WordPress, setting up AMP is, however, easy but when you go toward further CMS’s the mode becomes severe. It is hard to setup AMP for HTML & PHP websites.
  • Since this is the development stage of Google AMP, some page elements like videos still take some time to load while the text content loads quickly.
  • Without using a plugin, it is nearly hard to add Google AMP in WordPress.

Closure

  • If you are looking forward to adding AMP on your WordPress site, then remember that the contents in your sidebar and footer will not be visible in your AMP pages.
  • You can also try AMP for WP plugin as it has more advanced features and styles for Google AMP. Also if you want to show your Adsense ads on AMP version of your site, this plugin is a perfect fit.
  • After installing the AMP plugin, it will take some time to index all of your pages. You can track them directly using Accelerated mobile pages option in Google webmaster tools.

Related articles for you:

I hope now you can easily setup AMP for your WordPress site. If you hitch up to something in between, let me know in comments. We’ll work on it together.

Liked this post? Don’t forget to share it on your social profiles and let your friends know about the Google AMP WordPress Setup.

Share This Post

Last updated: September 6, 2017

Authored by :

I'm 3nions's co-founder and an individual contributor to the team. Besides being a Web Enthusiast, I like writing on SEO & Marketing. Also, I'm a Co-founder and Managing Director of illustrake.

6 comments

A unique content about AMP, I’ve never ever heard about AMP and now I’ve learned something today from 3nions. Thank you Prakhar for sharing such a great content here. I really enjoyed a lot a way which you described in fantastic lovable language.

Hi, Sameer. Thank you for passing by and sharing your review about the article. I’m happy that you find this content useful. Keep visiting.

Hey Prakhar,

It’s always recommended to have a mobile-friendly website. Whether you choose a WordPress theme or just to add any image, make sure that it does work perfectly on every device.

Google is taking it seriously because people are engaging with the phones more than ever before.
Yoast can be something people should use.

~Ravi

Having a mobile friendly website has become a crucial thing because of increasing number of mobile visitors.

Thanks for passing by Ravi Sir.
Greatly appreciated.

Any website designed in today’s time needs, by all means, to be responsive in nature. That’s the need of the hour, and one must move ahead by utilizing and applying the same

Abhishek Nale

When I found AMP pages ranks higher in Google…I tried that! And it works…

I learned how to do that…from 3nions ….when Mihir Shared that on FB

Thank You Prakhar..for This Awesome Post..

-Abhishek Nale

Leave a Reply