How to Integrate Google AMP in your WordPress site

Do you know 40% of all visitors abandon websites that take more than 3 seconds to load? To reduce the time of loading in mobile devices, Google has brought Accelerated Mobile Pages (AMP) technology. With AMP your website pages will become super light weight and get super fast loading speed. Google AMP is definitely going to make your visitors much happier now.

It is well known fact that Google is giving preference to AMP Websites in mobile search. Moreover AMP plays a key role in SEO to:

• Website Loading Speed is an important SEO factor. If a website is having a poor loading speed (greater than 3 seconds), then it will hardly get a good rank in the SERP.
• Bounce rate is directly proportional to Poor loading speed. Thus to reduce Bounce Rate you should have a fast loading website.

In the below images I have shown the AMP pages on first rank in Google for keyword donald trump.

You can do the search for different keywords in your mobile phones and see how AMP Pages are getting top ranks there too.

Understanding How Google AMP Works

AMP is designed for speed and for this it has laid down some rules:

• No JavaScript or jQuery allowed except for AMP JS Library. This ensures a fast rendering of the web page.
• All CSS must be inline so that it cannot block page load.
• Font triggering must be efficient.
• Images load only in lazy manner, when you scroll down to them.
• Certain HTML tags like iframe are not allowed.

You can check all the rules given here.

The first thing to know is that you don’t have to create a separate AMP site, instead AMP functionality should be integrated in your current website itself. By this I mean your desktop version of all pages need to point towards their respective AMP versions. This will tell Google that your web page has an AMP version ready to include in mobile search results.

Google caches AMP pages (Google AMP Cache), and serve these from its cache, and this provides a fast user experience in mobile devices.

Integrating Google AMP in WordPress

By now you may have made up your mind to integrate Google AMP in your website. I say if you are a WordPress user then you are on a good side.

AMP integration in WordPress is easiest. You just need to install the AMP Plugin.

After activating this plugin all your WordPress Post will become AMP compatible.

How to Check Google AMP Version

To check an AMP version in a web browser, add amp/ or ?amp=1, after the post URL. For example our AMP version of SEO Terms article is https://www.yogihosting.com/seo-terms/amp/.

Configuring Google AMP in WordPress

Now I will tell you how to configure different areas of AMP version of your site. For this you need to install AMP For WP plugin.

After activating it click the AMP link in your WordPress. Then click on the General tab.

The General tab offers some important settings like putting a logo on the AMP version of your site, choosing the front page, adding Google Analytics, enabling/disabling non-amp pages links in footer and header and few other settings.

I would recommend you to upload a logo, turn on the Mobile Redirection and enter your Google Analytics ID.

Next click on the Design tab to customize the design of the AMP version of your site. Here select the design, out of the two options given there – Design One and Design Two.

Next click the link AMP Page Builder & Color Settings to Enable and reorder Design Elements and change the Header’s text, background and link colors.

Next click on the SEO Tab, this section works only if you have installed Yoast SEO Plugin. The options listed here make sure the AMP version uses these tags from Yoast Plugin.

• 1. Add Meta Tags from Yoast.
• 2. Yoast Custom Description for AMP page.

The Menu Tab lets you to set or create a menu for the AMP version of your site. Make sure to have an AMP menu for your site so that visitors can navigate properly.

In most cases assign your website main menu to the AMP menu. The below picture explains how to do this.

The Advertisement Tab allows showing Adsense Ads under different areas of your AMP site. To show Adsense ads in an area, first turn it ON, then add AD Size, Data AD Client and Data AD Slot.

Copy your Adsense code in notepad and find the values against the texts that are – Data AD Client & Data AD Slot.

The Single Tab let you to enable Social Icons and Next – Previous links, and also do some other settings on your post pages (AMP version only).

I would suggest you to keep the Social Icons and Next-Previous links ON.

You can turn on the Social Icons from the Social Tab.

In the Structured Data Tab make sure to set your site logo.

If you want to Show any custom Message to your visitors then do it from the Notifications tab.

The Translation Panel tab is for non-English websites only. So if your website is in French then you can put, French words for English words, on your AMP pages only.

AMP Testing Tool by Google

Although AMP Plugin will make sure that all your Posts are correctly made AMP compatible but unknowingly you can add non-compatible HTML tags in the post description. This will bring AMP errors in your post.

Google has provided a very good tool through which you can test your post for AMP error. This AMP tool is available here.

AMP Errors From Google Search Console

Instead of checking each and every post for AMP errors you can simply add your website to Google Search Console. It notifies you as soon as it finds any AMP errors in your site.

All AMP errors are listed at Search Appearance > Accelerated Mobile Pages section of Google Search Console.

AMP has already become a decisive factor in Google Mobile SERPS. What are you waiting for? Go and install AMP plugin in your WordPress site and reach out to millions of mobile users.