How to Setup Google AMP in WordPress

Image is loading...

Did you ever feel that websites with rich contents are taking more time to load on your mobile device? Yes. It takes more time to load a rich content website on mobile than your desktop. Because CSS and JavaScripts take some to run on mobile devices compared with a desktop.

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

Image is loading...
Google Amp page of Techomoro in Google search result



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. AMP pages are built with 3 core components

  • AMP HTML: AMP HTML is HTML with some restrictions for reliable performance.
  • 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

  • SEO BENEFITS
  • RANK HIGHER ON GOOGLE
  • FASTER LOADING

CONS

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

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

  1. Select the Plugins menu
  2. Press Add New button

Image is loading...

3. Search for AMP in the search box.

4. Install the AMP for WordPress plugin.

Image is loading...

5. Activate the plugin.

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.

Image is loading...



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.

Image is loading...

4. ENABLE AMP

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

Image is loading...

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

Image is loading...



5. CUSTOMIZE THE DESIGN OF AMP PAGE

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

Image is loading...

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.

Image is loading...

 



6. ENABLING GOOGLE ANALYTICS IN 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.

  1. 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"
    }
  }
}

Image is loading...

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

Image is loading...



7. ENABLING GOOGLE ADSENSE IN 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.

  1. Enable Auto Ads for AMP in Google Adsense.

Image is loading...

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

Image is loading...

3. Now on your posts, insert the AMP Adsense code with your current Adsense code of anywhere you wish to place your ad on 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>

 

Image is loading...

 

Have a Nice Code

You May Also Like

About the Author: Syamlal CM

Hi, I'm Syamlal, the co-founder of Redmonark. I'm a developer, writer and also have a little bit of experience in graphic designing.

1 Comment

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.