InfoPhilicHow toHow to setup Google AMP for WordPress

How to setup Google AMP for WordPress

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 the 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, the user fly from the page. This increases the 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 a WordPress user, it’s easy to implement.

In short, it is just for a good user experience. Google suggests, “70% of cellular network connections globally will occur at 3G or slower speeds through 2020.” Thus, it is essential 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 the 44% bounce rate.

No doubt, you give your best to make your mobile SEO. When Google launches 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.

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%

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.

Enable AMP using official plugin

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.

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?ampThis 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 (Reader mode)

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

Customize AMP

The plugin comes with three Template modes:

  • Standard
  • Transitional
  • Reader
AMP template modes
Available Template modes in official AMP plugin

This plugin gives you the ability to enable AMP version for content types and templates, including singular and archive templates.

Supported templates in official AMP Plugin
List of Supported templates in official AMP Plugin

If you want your full site to be served on AMP, then you can enable AMP for all templates and content types.

Adding Analytics to AMP pages:

The plugin has an option to add analytics code to all AMP pages on your site. Just go to analytics and add following code in the box.

{
	"vars": {
		"account": "UA-XXXXX-Y"
	},
	"triggers": {
		"trackPageview": {
			"on": "visible",
			"request": "pageview"
		}
	}
}
Adding Google Analytics code in AMP
Adding Google Analytics code in AMP

Don’t forget to change ‘UA-XXXXX-Y’ to your actual property ID.

If you are using MonsterInsights plugin for Google analytics then you can enable addon for AMP.

MonsterInsights Google AMP Addon for all mobile visitors to your AMP-enabled pages.
MonsterInsights Google AMP Addon for all mobile visitors to your AMP-enabled pages.

Enable AMP using AMP for WP plugin

AMP for WP Accelerated Mobile Pages is the popular plugin to enable AMP for WordPress websites. The plugin gives you all the customization options to make your AMP looks professional.

If your theme is not AMP ready, this plugin can help you. The developers of this plugin have an eagle eye on the new features, and they try to give all the possible features of AMP through this plugin.

To install this plugin, head over a WordPress dashboard, and in the plugin section, add a new plugin.

Install AMP for WP – Accelerated Mobile Pages and activate it. After activating the plugin, you can see the Welcome tab under AMP, where you can customize your site’s AMP version. See the picture below, showing the customize panel. Click the image for full view.

Customize Google AMP
Customize Google AMP

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

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 are using Yoast SEO plugin, then there is no need to do anything as the functionality of this plugin is now part of both Yoast SEO and the official AMP plugin.

READ| How to install and Setup Yoast SEO WordPress Plugin

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.

You'll also like:
Continue to the category
Amit Malewar
Amit Malewarhttps://www.infophilic.com/
Amit Malewar has been the tutorial writer since 2013. His passion for helping people in all aspects of technology flow through the expert coverage he provides. In addition to writing for InfoPhilic, Amit loves to read and try new things.

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

  2. 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?

LEAVE A REPLY

Please enter your comment!
Please enter your name here

GET STARTED
POPULAR NOW

How to Calibrate battery on your android device

For smartphone users, battery problems are the biggest concern. So to overcome this problem I am writing this short tutorial to calibrate battery. Battery issue...
DEALS

Backup Buddy

BackupBuddy is the original WordPress backup plugin that you can install on any self-hosted WordPress site.
spot_img