How to Properly Setup AMP on WordPress Website?

  • Post author:

Do you want to boost the speed of your WordPress website from 10 seconds to 0.8 seconds?

If yes, then setting up AMP for your WordPress website is the best option. After enabling AMP your website seems to load instantly.

It helps you to rank higher on Google‘s mobile search results, get more organic traffic and lowers the bounce rate. There are still some drawbacks of AMP, that you’ll see below in detail.

General Background

What is AMP?

AMP stands for Accelerated Mobile Pages which is an open-source web framework that was initiated by Google on October 7, 2015, with the intent of making user-first webpages. It is incomparable to Facebook Instant Articles.

By the end of 2019, the number of internet users reached almost 4.8 billion. Out of them, approximately 54% of users browse the internet from mobile devices and 46% of users consume internet form PC.

AMP was started with the intention of making the web faster and smoother with a better user experience for mobile browsing.

AMP webpages are made with AMP HTML, JavaScript, and Caches. AMP pages are conveyed by Google. Cloudflare also supports AMP cache.

The official WordPress AMP plugin was launched on 7th December 2018. This makes webmasters easily transform normal webpages to AMP without having any coding skills.

Currently, more than 2 billion AMP webpages are on the internet.

MUST-READ: How to Write an Optimized Blog Post that Easily Ranks in 2020?

How does AMP Works?

In AMP webpages, JavaScript is allowed but it cannot delay the page rendering. In other words, AMP loads the text and layout of the page instantly without waiting for JavaScript to load.

The third-party JavaScript, images or ads must have stated their size in the HTML, in this way AMP knows the component’s size as well as the position without waiting for them to load.

This is how AMP determines the layout of the entire page and doesn’t allow anything to re-layout, which makes webpages load faster.

Also, AMP only allows inline CSS with no more than 50KB size, this also makes page speed faster.

Similarly, AMP only loads the needed content of the webpage that the user could see.

This is how AMP accelerates the page speed and it seems to load instantly.

AMP website on search results

Pros of AMP

There are some pros that the website owner has from AMP. Google encourages AMP because it is believed that AMP increases user experience on the web.

  1. Increases page speed: This is the biggest benefit of AMP. It makes the webpages load instantly when a user clicks on the link.
  2. Improves Google ranking: AMP also increases mobile ranking, however, it is not a direct ranking factor for Google. But, as it increases page speed and lowers bounce rate, it can improve ranking.
  3. Lowers bounce rate: Google already confirmed that an increase in page load time also increases the bounce rate. AMP is supposed to load 10 times faster than non-AMP sites. Google reported that an increase in page load time from 1 second to 10 seconds can cause a 90% bounce rate.
  4. High click-through rate: Google encourages AMP, so, shows an icon on Accelerated mobile pages in search results that can increase the CTR of a website.
  5. Improve user experience: Since there is a limitation on JavaScript, AMP-enabled webpages don’t change based on user activities. AMP only shows what is necessary for users with limited ads, JS, and animations.
  6. Decreases server load: AMP cache is saved on Google’s servers. To put it another way, AMP pages directly load from Google’s server which decreases the load on your server.

MUST-READ: 7 Things You Should Know Before You Start A Blog

Cons of AMP

We learned the benefits of an AMP website. Now, let’s look at some cons of AMP. Because of the following drawbacks most of the website owners don’t apply AMP on their WordPress website.

  1. Limitations on JavaScript and CSS: You cannot control the execution of JS on the basis of user activities as well as JS cannot block the page rendering. Similarly, only inline CSS with a maximum of 50KB size is allowed on AMP.
  2. Less Control over UI: Since AMP has limited and almost fixed User Interface, you cannot fully customize your webpages and decide what to show to the users.
  3. Search Console Errors: Not all the website owners are master at web development. Many of you cannot set up AMP correctly which causes many errors on Google Search Console which develops another headache.
Showing Error for AMP website in Search Console
  1. Tracking problem: Because of the limitation with JS; analytics of traffic, ads, and tracking any other activities of users on the website become less accurate.
  2. Less control over your webpages: As you know, the cache of your AMP website is stored on Google servers, this means Google can decide what to show or what not to show to the users of your AMP website.

Should you use AMP?

With all the Pros and Cons of AMP, it’s hard for people to decide whether it is worthy to make AMP website. In this section, you’ll be clear whether to make an AMP version of your website or not.

Let’s analyze the Pros of AMP once again. We can see that the only dominating benefit of AMP is page speed.

This shows, if the page loading speed of your website is fast (something around 1 second) then there is no need to make an AMP website.

You’ve to sacrifice a lot just for the sake of speed. You can have different options to speed up your website without switching to AMP. Think about it.

But, if you can’t do anything now to decrease the webpage loading time of your website, it is worth considering making an AMP version of your website.

If you have an e-commerce website, I recommend not to use AMP. Instead, find the alternatives to boost page speed such as opting for a good web host, optimizing images, CSS & JS.

If you decide to choose AMP, continue reading below to properly set up AMP on your WordPress website without doing any mistakes.

Thanks to WordPress AMP plugins. They make it very easy for us to go AMP without any coding skills.

MUST-READ: Learn SEO [Free SEO Course] | Understand Basics

Why Google encourages AMP?

Do you know? 3.5 billion Google searches are made per day worldwide. In other words, approximately 40,500 Google searches are made every second.

Now, you understand why page speed is an important aspect of the Google ranking algorithm.

If all the websites delay 1 second in loading, then Google loses 40 thousands of traffic, so do other websites.

And, around 54% of searches are done by mobile devices i.e. approximately 1.9 billion searches a day.

Also, Google tried to create a monopoly over the web by introducing AMP, which is to say, people should show what Google wants to the users.

Google is known to show users the best results that provide the best user experience. It focuses on users rather than webmasters and wants to show people what they want not what webmasters want.

I think because of the above reasons Google encourages AMP.

How to setup AMP on the WordPress website?

The official WordPress plugin was introduced on December 7, 2018, by Google, Automattic, and other contributors.

Many WordPress plugins are available other than this plugin that makes an AMP version of your WordPress website.

It is very easy to set up and designs the AMP website in WordPress. Let’s go step by step to setup AMP properly on your WordPress website.

  1. Log in to your WordPress website and search for amp on add new plugins.

The first one is the WordPress official plugin. This plugin lacks options for customizing the WordPress AMP website.

Installing WordPress AMP for WP plugin

So, we install the second plugin (AMP for WP) to make the WordPress AMP website. Install and activate this plugin. Learn more about installing a WordPress plugin.

  1. Upon activating the plugin you can check how your amp website looks like by default.

Add ‘amp’ at the last of any URL of your website (for example and see the amp version of a webpage. Now you want to set up some settings and customize the website.

  1. After activating the plugin, you can customize many things, some of which are described below.

Learn more about customizing the WordPress website like a pro.

AMP header and footer on WordPress website

To customize AMP header go to AMP> Design> Header from the WordPress admin area. From here you can set the design of the header and navigation menu.

Designing Header for AMP website in WordPress

To create a navigation menu go to Appearance> Menu and check the ‘AMP Menu’.

AMP menu to show AMP on WordPress website

Go to AMP> Settings> General to upload a custom logo. Now, you can upload a custom logo for your WordPress AMP site.

Adding-loAMP website for mobile devices

The design of footer like footer text can be changed from AMP> Design> Footer.

Configuring Google Analytics on your AMP WordPress website

Add Google analytics on your AMP site on WordPress from AMP> Settings> Analytics. You’ll be asked for Tracking Id. Follow the below simple steps to find the Tracking Id of your website.

  1. Open Google Analytics on a separate browser tab.
  2. On the side panel, click on Admin. Then, you’ll find an option for tracking code inside tracking info. Copy the tracking code and paste it into WordPress.
Finding Tracking code in Google Analytics to link AMP website in WordPress

Adding Ads on AMP Website

Adding normal Google Ads directly into your AMP website causes many JavaScript errors.

Google Search Console shows many pages with errors, so, you can’t add AdSense ads directly. You can add ads from different platforms other than AdSense using the AMP plugin.

  1. You can add different ads from AMP> Settings> Advertisement in the WordPress admin area.
  2. Display ads can be added to the AMP website using the plugin. Create a display ad in Google AdSense and copy the data-ad-client (ca-pub-55545xxxx655) and data-ad-slot (43445xx5324) from the code. Then, paste them in the WordPress AMP advertisement.
Adding ads in AMP Website in WordPress

AMP in Google Search Console

After setting up AMP on your WordPress website you may want to see how your AMP website is performing.

You may see many errors in the Google Search Console if AMP was not correctly set up.

It takes some time for AMP pages to be crawled and indexed by Google. So, you’ll start seeing AMP pages in Search Console after a few days. You’ll find AMP under the Enhancement menu.

Selecting AMP for a WordPress website

What if you want to disable AMP?

You can easily disable AMP on your WordPress website. Google doesn’t drop your ranking for disabling AMP. It’s your choice whether to use it or not.

You can simply deactivate the AMP plugin to disable Accelerated Mobile Pages from your WordPress website.

But, there is still something you should take care of. When you keep your AMP website live for a long time, Google indexes those pages and show them into search results.

Disabling AMP suddenly causes many AMP links to broke, which is bad for SEO. Therefore, you have to redirect those AMP links into non-AMP. To do this simply install a redirection plugin in WordPress.

Learn about doing SEO yourself to rank higher on Google.

This is how you can use AMP on your WordPress website to boost speed.

I think this post was helpful.

Don’t forget to share:


Binod Bhatt

I'm from Baitadi, Nepal, a professional web developer, and a passionate blogger. I have more than three years of blogging experience and have worked for the success of many blogs and business websites. More... Find me: Facebook | Twitter

Leave a Reply