According to the report published on Statista, 52.2% of total website traffic is generated through mobile phones, up from 50.3 percent in 2017. This astounding increment of mobile generated web traffic made website owners and especially the amateur starting as a blogger, deliberating regarding website optimization for overall performance including SEO and CRO.

And that’s how accelerated mobile pages have quickly become the standard element for most websites. Nowadays whenever we search on Google we find some sites with AMP mark before website description. This is Google’s new open source initiative mobile users. This feature helps content-rich web pages to load 15-80% faster than normal mobile web pages without compromising functionalities prior to mobile devices.

Pros of using AMPs

  • Improved page load speed
  • Better search engine rank
  • Boost mobile traffic
  • Better click-through rate (CRT)

Though the ease of AMP implementation varies and depends upon your content management system. WordPress is by far the most preferred CMS and it has numerous WordPress themes and plugins to chose from. Here we will show you how to set up Google AMP on your WordPress site to make it load faster on mobile devices.

Setting up Accelerated Mobile Pages or AMP in WordPress 

Step 1:  Install and active the AMP plugin

The most convenient way to implement Google AMP on your WordPress site is to install and active the AMP plugin by Automattic, the official partner AMP open source initiative.

Activating the AMP plugin will dynamically create AMP version of your WordPress site which will load faster on mobile devices. You can now access any single post of your website by appending /amp/at the end of your website URL. For instance

http://example.com/2018/3/blog-post/amp/

This will show you AMP version of your site. You can also customize the design and overall UI using AMP to see how your website will look on mobile devices. And to do that just go to Appearance » AMP. You will see the simulated version of mobile displaying the preview of your website.

You can customize the header text color, background and link color as well as theme and as you start customizing you will be able to see the preview of your site in simulated mobile.

Click on save and publish button. And you are done.

Step 2:  Advancing the AMP for SEO

Most likely you will be done with the first step but if you are intending to drive organic traffic (and of course you are!) to your website we can further customize it for SEO and also improve design elements. To do so, just follow these simple steps.

The official AMP plugin comes with very limited functionalities and UI customization options for your WP site and it is not quite an enough. Hence, we will need few more plugin in order to get most out of the AMP to embrace the WordPress site not only for speed but overall SEO.

Go to plugins » Add new and the first plugin we will install is Yoast-SEO. Install and active it (if you have already installed it follow the next step).

Time to install and activate the second plugin and it is called Glue for Yoast SEO & AMP.

Now, the problem with AMP is that the standard Metadata used by AMP plugin isn’t the relevant and optimized metadata especially if you are dealing with SEO plugins like Yoast. Hence, we will need to customize the Metadata and Meta tags to overcome the SEO issues and that’s where Glue plugin can help you.

Upon activating the glue plugin go to Yoast SEO » AMP » Design and you will find the number of advanced customization options.

From here you can enable AMP for pages, post, and even media. Under the design area, you upload images specific to AMP for your website’s logo, background image and more which will be used when your posts do not have manual images.

Moreover, you can also customize content, link, and backquotes. Further, you can access the area ‘extra CSS’ and ‘Extra code in <head>’ where you can add codes and Meta & link tags manually.

Click on Save and publish button.

That’s it!  Your website, even with rich content, will load faster than normal, become mobile friendly and create huge organic traffic using AMP.

You can even add Google analytics to your AMPs to get the idea regarding how your users interact with your website and other relevant data.

There are the number of other plugins you can use to add related features to your AMP website.

As we know every coin has two sides and we have seen the prolific side of AMPs. Now, let’s go through opposite side or cons associated with implementing AMPs for WordPress site.

AMP uses the stripped-down version of CSS, HTML, and JavaScript resulting limited features on your mobile site. You will not be able to load certain widgets, Facebook like button, email subscribe box and other dynamic scripts. The same thing goes with advertisements. And even real-time updating will not work in some cases.

Since Google AMP is compatible with Google Analytics, you can’t add any other analytic platform to your WordPress site.

We hope this guide will help you to set up Google AMP on your own WordPress site and extend its functionalities even further for mobile users. As there are pitfalls along with gains, you must analyze, for certain period of time, how AMPs affects your website & user experience and come to conclusion that whether AMPs are required or not.