How To Make Your WordPress Site Google AMP Ready

8
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.

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