How to Setup Google AMP in WordPress

Did you ever feel that websites with rich content are taking more time to load on your mobile device? Yes. It takes more time to load a rich content website on mobile than on your desktop. Because CSS and JavaScripts take some to run on mobile devices compared with a desktop. We have a solution called AMP. Let’s discuss how can we set up a Google AMP in WordPress.

In mobile view, we don’t always need the full contents in a website other than the exact matter in it. Accelerated Mobile Project (AMP) is a perfect solution to this problem. The AMP Project is an open-source initiative aiming to make the web better for all.

The project enables the creation of websites and ads that are consistently fast, beautiful, and high-performing across devices and distribution platforms. Since it is a Google-backed project, it’s known to be Google AMP.

You may be already familiar with AMP pages I think. Did you see a lightning icon on the left side of some Google search results on mobile view as the screenshot below? Yes. It is an AMP page.

I know it needs some more explanation about Google AMP.

What is AMP?

Accelerated Mobile Project(AMP) is an open-source library that provides a straightforward way to create web pages that are compelling, smooth, and load near instantaneously for users. It is supported by many different platforms, and it’s compatible across all major browsers. The AMP pages are built with 3 core components

• AMP HTML: AMP HTML is HTML with some restrictions for reliable performance.
• The AMP JS: The AMP JS library implements all of AMP’s best performance practices manages resource loading and gives you the custom tags mentioned above, all to ensure a fast rendering of your page.
• AMP CACHE: The Google AMP Cache can be used to serve cached AMP HTML pages.

Pros of AMP

• SEO BENEFITS
• RANK HIGHER ON GOOGLE
• FASTER LOADING

Cons of AMP

• You can not show widgets and popups since AMP pages use limited CSS and JS.
• Analytics rather than Google Analytics are not supported in AMP pages.

Here I am explaining the steps in setting up Google AMP in WordPress, setting up Google Analytics with AMP pages and setting up Google Adsense in AMP pages. This tutorial can be followed by anyone even if you are just a starter in WordPress.

Setup AMP in WordPress

So let us start to setup AMP in WordPress.

1. Install AMP for WordPress plugin

First, we need to install AMP plugin in WordPress. This plugin is developed by professionals including Google and WordPress. This helps us in setting up amp pages for all your posts. Instation of AMP plugin can be done from our WordPress Dashboard.

Select the Plugins menu, and press Add New button.

Search for AMP in the search box, install the AMP for WordPress plugin and active it.

2. Install Yoast SEO plugin

Yoast SEO is another plugin which helps you a lot in SEO of your WordPress site. Sometimes, you already have installed Yoast SEO before. If not, you can install and activate it from the Plugins menu as you did in the previous step.

3. Install Glue for Yoast SEO & AMP plugin

This plugin makes sure the default WordPress AMP plugin uses the proper Yoast SEO metadata and allows modification of the AMP page design. This is simply the glue between Yoast SEO and AMP plugin as the name suggests. We need to install and activate this plugin also.

4. Enable AMP

After the Installation of AMP for the WordPress plugin, we can see a new Menu named AMP on your WordPress Dashboard. There are two options in it. General and Analytics. From the General option, we can enable whether your WordPress pages need to be Accelerated or not. As a default, our posts will be AMP-enabled.

We can customize more from Yoast SEO -> AMP -> Post types

5. Customise the design of the AMP page

We can customize options such as colors and color scheme from  Appearance -> Customize -> AMP.

There are extended options to customize our AMP page with AMP icon, default image, colors, extra CSS etc. This can be done from Yoast SEO -> AMP -> Design.

6. Enable Google Analytics for AMP pages

Since AMP pages are not hosted on your server, the traffic to your AMP pages will not be shown on your Google Analytics statistics. So that you need to set it up manually.

Go to AMP->Analytics and a new analytics option with the JSON configuration shown below. You have to change UA-XXXXX-Y with your Google Analytics tracking ID.

{
  "vars": {
    "account": "UA-XXXXX-Y"
  },
  "triggers": {
    "trackPageview": {
      "on": "visible",
      "request": "pageview"
    }
  }
}

Note: The JSON configuration I added only supports tracking pages. There are more options such as Event tracking, Social interaction etc. which can be learned from the below link.

https://developers.google.com/analytics/devguides/collection/amp-analytics/

Insert the script in your header.php file.

<script async custom-element="amp-analytics"
    src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js">
</script>

7. Enable Google Adsense for AMP pages

As a default, AMP pages remove the Adsense script we have given. So we need to give additional Adsense code to show ads on AMP pages. AMP pages perfectly support Auto Ads for AMP in Google Adsense. This can be enabled from your Google Adsense account.

Enable Auto Ads for AMP in Google Adsense.

Insert the script in your header.php file.

<script async custom-element="amp-auto-ads"
        src="https://cdn.ampproject.org/v0/amp-auto-ads-0.1.js">
</script>

Now on your posts, insert the AMP Adsense code with your current Adsense code of anywhere you wish to place your ad on the AMP page. You have to replace ca-pub-XXXXXXXXXXXX with your Adsense client ID.

<amp-ad layout="responsive" width="300" height="250" type="adsense" data-ad-client="ca-pub-XXXXXXXXXXXX" data-ad-slot="7066793776"></amp-ad>

Summary

So here in this article, we learned the steps to setup Google AMP in our WordPress blog. We also setup Google analytics and Google adsense for this AMP pages.