How To Make Your WordPress Site Google AMP Ready

The AMP stands for the Amplified mobile pages and today I am going to tell you how to make your WordPress site Google AMP ready within next 10-15 minutes.

First let me tell you, why we need APM powered site. Most of the time when a page takes much time to load completely, user fly from the page. This increases bounce rate of the site. There are multiple ways to speed up WordPress site. Google AMP is the most promising service to serve optimized pages of your website to organic visitors and if you are WordPress user, it’s easy to implement.

In short, it is just for good user experience. Google suggests, “70% of cellular network connections globally will occur at 3G or slower speeds through 2020.” Thus, it is extremely important to optimize the site for mobile devices.

How Google AMP works:

AMP relies on AMP HTML and works by limiting set of technical functionality defined by the open source AMP spec. It makes use of various technical and architectural approaches that enhance speed and user experience as well. Google’s servers then cache the AMP pages and pre-render them in the background when people are still checking out for their search results.

As it relies on AMP HTML, the pages cannot become too bloated with tracking scripts and ads. As an estimate, it can load websites up to 85% faster and reduce 44% bounce rate.

No doubt, you give your best to make your mobile SEO. When Google launch AMP, you even jump on it to make sure your mobile site offers the best possible presentation of your content to a mobile device user.

But, Do You Really Need it? Google won’t tell you but it completely depends on you whether to use AMP or not. If you already have done everything you can to improve your site’s mobile loading speed, then you may skip AMP for your website/blog.

Now, let’s have a look at situations, when you may not need Google AMP.

1. While using Content Delivery Network (CDN):

CDN host your contents including audience queries and route them the networked server that’s physically closest to each site visitor. CDNs use smart caching systems and different refined routing optimization algorithms to accelerate your site. While accelerating site speed, it offers other benefits also:

  • Reduces bandwidth consumption
  • Blocks data scrappers and other forms of spammers
  • Reduces latency by almost 50%

2. When your mobile site relies on single CSS reference:

CSS files are generally small. Having several of them means your server will respond separately to each audience queries. Combining all of your style sheets into single CSS file may speed up content loads.

Instead of using multiple CSS for your website/blog, put your all CSS code in an external file and host it on CDN. This will load only one CSS from CDN directly.

Note: Clean up comments and white spaces in your CSS file using tools like CSS minify. This will remove killing code bloating and improve load time.

Integrating Google AMP with WordPress

The very first step is to install AMP plugin. There is an AMP plugin in the WordPress Plugin repository. You have to install it. This plugin adds support for the Accelerated Mobile Pages (AMP) Project, which is an open source initiative that aims to provide mobile-optimized content that can load instantly everywhere.

To install it correctly go to your WordPress Dashboard, in the plugin, section click on add a new link. Now search for AMP plugin using the search option and install it. After installing click Activate button. That’s it.

READ| AMP Testing Tool By Google To Test Website

Now, you can check if the plugin is working correctly or not just by putting amp at the end of the URL of your website. For example, https://www.infophilic.com/amp This will show you the AMP version of your website. See the picture below the amp version:

How To Make Your WordPress Site Google AMP Ready
AMP Version

Once you confirm, your website working fine with AMP plugin you can customize your AMP version.

Customize AMP Using Plugin

There are multiple plugins available for the AMP customization, I would recommend you to use AMP for WP – Accelerated Mobile Pages. It is the best plugin that I found for the AMP customization. The developer of this plugin has an eagle eye on the new features and he tries to give all the possible features of AMP through this plugin.

To install, this plugin head over a WordPress dashboard and in plugin section add new plugin. Install AMP for WP – Accelerated Mobile Pages and activate it. After activating the plugin you can see Welcome tab under AMP where you can customize your site’s AMP version. See the picture below showing the customize panel. Click image for full view.

Customize Google AMP
Customize Google AMP

SEO & AMP

You must be very well familiar with the SEO. After integrating AMP on your WordPress site you have to work on some SEO factors. If you using Yoast SEO then you can make AMP version of your website SEO friendly just by installing Glue for Yoast SEO & AMP.

READ| How to install and Setup Yoast SEO WordPress Plugin

All you have to install Glue for Yoast SEO & AMP plugin, no further setup required.

UPDATE:

You won’t be needing the AMP by Automattic plugin from now. Use only AMP for WP – Accelerated Mobile Pages if you want customized AMP version.

You can also use Glue for Yoast SEO plugin for the customization. This also allows you to choose default featured image for the old articles. You can even integrate Google analytics code from the same plugin.

Conclusion:

So this is how you can make your WordPress site Google AMP ready. It will hardly take 10 to 15 min to work on. Follow each step carefully. If you have a further query or need some help, drop a comment below in the comment section.

ALSO READ

Subscribe to our newsletter

To be updated with all the latest news, offers and special announcements.

Comment Policy: Your words are your own, so be nice and helpful if you can. Please, only use your real name and limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

8 COMMENTS

  1. Hello Amit, I am still confused how to make an existing wordpress website AMP ready. Do we need to edit the html/css/javascript or doing the things mentioned by you in this article are sufficient to make the website AMP ready? I am still wondering how just installing a plugin can make a website AMP friendly?

  2. I use the theme newspaper tagdiv. I want to use the AMP plugin feature. Should I enable AMP feature from tagdiv or AMP for WP accelerated? or should I enable both?

      • I have activated the plugin amp from tagdiv, but in google webmaster there is an error amp. please make a complete tutorial on installing the right plugin amp from tagdiv ..

        • I really have a long list of topics to cover. I have added your suggestion to my todo list.

          AMP is a little bit tricky to configure. May I know what errors you’re facing?

      • 1. Inline ‘style’ attributes are not allowed in AMP documents. Use the ‘style amp-custom’ tag instead.
        2. Custom JavaScript is not allowed
        3. URL not found (404)

        how to fix the problem? please help. thanks.

        • You should use AMP Testing Tool to check the errors for each page and fix them. If you don’t have knowledge about programming then it’s recommended to hire a developer. Many time 404 errors are because of spammy comments so avoiding URL in comments is the best solution.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

GET STARTED

Start WordPress Blog: Ultimate Guide For Beginners

Here is our step by step guide for beginners to start a WordPress blog.

Top 6 Best WordPress Theme Frameworks

There are many websites themes which are created by using a framework. Likewise, WordPress Theme frameworks also becoming so popular. The framework allows you...

The Most Essential WordPress Plugins

Here, I have listed some excellent plugins which will surely add more features and new functionality to your WordPress blog.

Tips to Speed Up WordPress Performance

Here, I am sharing some tips to speed up WordPress performance. All you need to modify .htaccess file on your server and add some plugins.

The Ultimate Guide to Harden WordPress Security

Learn how to improve WordPress security. Here are some basic security concepts that will help you to harden WordPress security.

How to Setup CloudFlare Free SSL for WordPress Blog

Google has announced that they will count HTTPS as a ranking factor which means if you using HTTPS you will get a higher position...

DEALS

SiteGround Hosting

Web Hosting Crafted For Superior Experience

POPULAR NOW

Get almost 100% PageSpeed on Newspaper theme

The newspaper theme is the most popular premium theme for a self-hosted WordPress blog. The theme is developed by team tagDiv. You...

How to Remove jQuery Migrate in WordPress?

jQuery Migrate greatly simplifies the process of moving older jQuery code to a higher jQuery version by identifying deprecated features. It then restores deprecated...

How To Reduce Admin-Ajax Server Load In WordPress

To increase better user experience, we always end up by increasing site speed. After clicking a website link seems like a simple thing. But...

Best Guide on Removing v=XXXX string from WordPress URLs

You might have noticed strange v=xxxx string in your WordPress URL. This string is comprised of an apparently arbitrary letter and numbers added as a parameter...

Tips to Speed Up WordPress Performance

Here, I am sharing some tips to speed up WordPress performance. All you need to modify .htaccess file on your server and add some plugins.

How to Display Featured Image Before or After Entry Title in Genesis

Learn how to add featured image to a single post or a page in Genesis child themes. You can set it to display featured...