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 three methods to Activate AMP for your website (use any one of the method)
- Login to WordPress Admin option panel –> Plugins –> Add New –> Search for “Accelerated Mobile Pages” (By Ahmed Kaludi, Mohammed Kaludi) –> Click Install –> Click Activate.
Accelerated Mobile Pages is successfully activated.
- Click Here to download Accelerated Mobile Pages Plugin by Kaludi Brothers.
- Login to WordPress Admin option panel –> Plugins –> Add New –> Upload Plugin –> Choose file (Navigate to your Downloads folder then Select Downloaded zip file) –> Install Now –> Activate.
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.
Testing the AMP
After activating the AMP, Google will automatically index the amp pages in the search console.
Checking the Errors In Google Search Console (Webmaster Tools)
If Google detects any error in your AMP page, that page won’t be visible or distributed in the Google search result(In mobile).
- Login to Google Webmaster Tools (Search Console)
- Select Website
- Navigate to Google Search Console –> Accelerated Mobile Pages (Here you can see the errors of AMP for your website)
Checking the Errors Individually
There are Three different methods for checking AMP error on Website.
Method 1 : (Google AMP Test)
This is official Amp Test website you can check this AMP page.
Enter your URL to test this AMP page valid or not. After URL you need to enter /amp. Click on test URL button.
If this URL is an AMP page it will show the message valid AMP page.
Method 2 : (AMP Validator)
This is official website ampproject AMP Validator you can individually check this page is AMP or not.
Enter URL for eg. (example.com/amp) after that click on validate button. if this page is AMP it will give validation status pass otherwise fail. After URL /amp is mandatory to write.
Method 3 : (AMP Chrome Extension)
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.
This page is valid it will show Green color .
If in this page have an error it will show Red color.
I decided to test the loading speed of one of the AMP enabled pages and compare it with AMP and NON-AMP. We have chosen a site one is non amp and second is amp we are compare same site.We tested this site on Gtmetrix.com. gets a standard loading speed of 4.3 seconds, But with AMP the page is loaded 3.8 Seconds. Almost 10x less the loading speed of Non-AMP Page.
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 option panel -> go to Settings -> General ->Advertisement Tab -> Select the size of Ad and paste the Publisher Id and Ad Slot Id to their respective fields.
We have 6 Advertisement Positions if you want more Advertisement we have Ads for wp extension it’s a free extension.
for more details of click on Advertisement.
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 options panel –> Navigate to AMP (This opens the AMP settings Panel) –>Settings -> Go to General tab ->Analytic
If you want more details click on Analytic.
For more basic setup for Making other Required Changes click on Configuring AMP options / settings.
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.
That’s it for this tutorial!
We hope it helped you. If you have any feedback or questions, then please share them in the comments section below.