Step-By-Step Guide to Implementing AMP on WordPress

Accelerated Mobile Pages (AMP), a simple and elegant solution that can streamline the information much faster without all the extra baggage that a typical website has. It loads instantly and dramatically improves the performance of the mobile sites. AMP is an open source initiative build in collaboration with many different partners. AMP is just like a normal HTML website with a couple of restrictions on the extra baggage. So let’s implement AMP on WordPress.

Walk through the below steps to enable AMP for your website

There are two methods to Activate AMP for your website

METHOD 1:

• Login to WordPress Admin panel –> Plugins –> Add New –> Search for “Accelerated Mobile Pages” (By Ahmed Kaludi, Mohammed Kaludi) –> Click Install –> Click Activate.

• After Activating the plugin, You will see a Message saying “This Theme requires following Plugin: AMP, Begin Installing Plugin” –> Click on Begin Installing Plugin –> Install (Check the below Screenshots)

Method 2:

• Click Here to download Accelerated Mobile Pages Plugin by Kaludi Brothers.

• Login to WordPress Admin panel –> Plugins –> Add New –> Upload Plugin –> Choose file (Navigate to your Downloads folder then Select Downloaded zip file) –> Install Now –> Activate.

After Activating the plugin, You will see a Message saying “This Theme requires following Plugin: AMP, Begin Installing Plugin” –> Click on Begin Installing Plugin –> Install

(OR)

Extract the downloaded Zip files

Login to your FTP client (Here we are using Filezilla) –> Navigate to Root Directory –> WpContent –> Plugins –> Upload the extracted folders

Login to WordPress Admin panel –> Plugins –> Now Activate the uploaded plugins.

After Activating the plugin, You will see a Message saying “This Theme requires following Plugin: AMP, Begin Installing Plugin” –> Click on Begin Installing Plugin –> Install

Speed Test

I decided to test the loading speed of one of the AMP enabled post and compare it with AMP and NON-AMP. We have chosen a blog post with has content with images. We tested this Blog Post on Gtmetrix.com. Blog post gets a standard loading speed of 11.1 seconds , But with AMP the page is loaded 1.2 Seconds. Almost 10x less the loading speed of Non-AMP Page.

Testing the AMP

After activating the AMP, Google will automatically index the amp pages using the amp tag, To test AMP version of the website, Simply, Add /?amp at end of the URL. For Example (http://Example.com/?amp)

Checking for Errors

If Google detects any error in your AMP page, that page won’t be visible or distributed in the Google AMP cache.

There are Two different methods for checking AMP error on Website.

Method 1

• Login to Google Webmaster Tools
• Select Website
• Navigate to Search Appearance –> Accelerated Mobile Pages (Here you can see the errors of AMP for your website)

Method 2

The AMP chrome extension automatically scans for the validation errors and will notify you when you are on amp page.

• Open Chrome Browser (If you don’t have one download from Here)
• Click here for Chrome Extension Page –> Click Add to Chrome –> Add Extension

Now Open your AMP Activated Website, Check AMP chrome extension on Top Right Side.

Adding Advertisement

Now google allows you to place Advertisements in AMP page.

Go through the below steps for adding Advertisements in AMP page

• Login to Google Adsense Account –> Go to My ads tab –> Create New Ad Unit or Select Existing ad unit of any size –> Copy the AD Slot Id and Publisher Id

• Login to WordPress Admin panel –> Navigate to AMP (This opens the AMP settings Panel) –> Go to ‘Advertisement’ Tab –> Select the size of Ad and paste the Publisher Id and Ad Slot Id to their respective fields.

To check the ads open up the Website by /?amp in End (http://Example.com/?amp) disabling the adblocker. (Check the Screenshot below)

Adding Google Analytics

Login to Google Analytics Account –> Go  to ‘Home‘ tab –> Copy Analytics Code

Login to WordPress Admin panel –> Navigate to AMP (This opens the AMP settings Panel) –> Go to General tab

Making other Required Changes

Adding Logo and Changing Color

Login to WordPress Admin panel –> Navigate to AMP (This opens the AMP settings Panel) –> Go to General tab –> Click on Upload and Select the Image from Existing Media or Upload new Image –> Click on Select And Change the color Click on Select Color –> Then Select any Color which is suitable for your website –> Save Settings

There are lot options which will make your website more eye-catching

Conclusion

Google AMP pages look kind of interesting because the AMP enabled pages to load 4x faster than standard pages. Integrating AMP on WordPress website is easy and it enables you to stay on top in all Search Engines, glean the rewards without any hard work.