How to Enable Accelerated Mobile Pages (AMP) in WordPress

Last updated on by admin

Accelerated Mobile Pages, also known as AMP, is an open source project aimed to make your website content and ads faster and high-performing on mobile devices. In this article, I will show you how you can enable AMP in WordPress and serve your website content instantly to your mobile visitors.

Accelerated Mobile Pages (AMP)

AMP pages are built with 3 core components:

  1. AMP HTML: AMP HTML is your HTML page source code with custom AMP properties that apply restrictions on certain elements for reliable performance.
  2. AMP JS: AMP JS is the JavaScript library that ensures fast rendering of your AMP pages.
  3. Google AMP Cache: Google AMP Cache is a proxy-based content delivery network that fetches your AMP pages, caches them and serve these cached AMP pages to your visitors to improve the performance.

How to Enable AMP in WordPress

All the AMP components mentioned above have a set of guidelines that explain how an AMP HTML page can be built. Since we are on WordPress we don’t have to worry about manually creating an AMP page or understand its code. We can just do it with a plugin.

AMP Plugin Installation

OPTION 1

screenshot showing how to search for the official AMP plugin for WordPress

  • Go to Plugins > Add New from your WordPress dashboard.
  • Enter “AMP” in the Search box.
  • Find the one developed by Automattic.
  • Click Install Now and Activate.

OPTION 2

  • Download the AMP plugin on your computer.
  • Go to Plugins > Add New > Upload Plugin from your WordPress dashboard.
  • Click Choose file and select the zip copy of the plugin from your computer.
  • Click Install Now and Activate.

Once the plugin is installed WordPress will automatically create an AMP version of each web page for Googlebot to index the next time it comes to crawl your website.

Testing Your AMP Pages

When the AMP plugin is active, you can check how an AMP page looks like by appending /amp/ to the end of the URL. For example, if your post URL is http://example.com/2017/07/hello-world/, you can access the AMP version at http://example.com/2017/07/hello-world/amp/. If you do not have pretty permalinks enabled, you can do the same thing by appending ?amp=1, i.e. http://example.com/2017/07/hello-world/?amp=1

screenshot showing how to check the AMP version of a page in WordPress by adding amp to the URL

If your website is connected to Google Search Console, you can check how many AMP pages have been indexed and whether Googlebot found any critical error indexing it.

screenshot showing the index status of accelerated mobile pages (AMP) in Google search console

After an AMP page is indexed it should start to appear in mobile search results with a special AMP icon. This lets the users know that an AMP version of this page is available.

screenshot showing the amp version of a page snippet in the google search engine results page

GET 60% OFF WordPress Hosting Here

Leave a Reply

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