1. Home
  2. Getting Started
  3. Step-By-Step Guide to Implementing AMP on WordPress

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.

add-plugins-amp-demo-wordpress-google-chrome-2016-10-04-18-48-41

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

Plugins-‹-AMP-Demo-—-WordPress-Google-Chrome-2016-10-04-18.42.40-1

Method 2:

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

AMP-Toolbox-Accelerated-Mobile-Pages-—-WordPress-Plugins-Google-Chrome-2016-10-04-19.49.30

 

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

Uploading Plugin

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.

FireShot-Capture-6-Compare-Reports_-www.saveitor_-https___gtmetrix.com_compare_udloBHF5_5Q6DCsVc

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)

Search-Console-Home-Google-Chrome-2016-10-04-20.20.53

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

AMP-Validator-Chrome-Web-Store-Google-Chrome-2016-10-04-22.07.52

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

Accelerated-Mobile-Pages-Project-Google-Chrome-2016-10-04-22.23.52
Image Source: ampproject.org

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

My-ads_-Google-AdSense-Google-Chrome-2016-10-04-20.41.51

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

Accelerated-Mobile-Pages-Options-‹-AMP-Demo-—-WordPress-Google-Chrome-2016-10-04-21.16.09

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

AMP Adsense Ads Screen Shots

Adding Google Analytics

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

Analytics-Google-Chrome-2016-10-04-21.23.38

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

Accelerated-Mobile-Pages-Options-‹-AMP-Demo-—-WordPress-Google-Chrome-2016-10-04-21.29.22

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

Accelerated-Mobile-Pages-Options-‹-AMP-Demo-—-WordPress-Google-Chrome-2016-10-04-21.47.43

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

Accelerated-Mobile-Pages-Options_-http___ampforwp.com_demo_wp-admin_admin.php_

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.

Updated on August 21, 2017

Was this article helpful?

Related Articles

Comments

  1. Well explained in detail
    And how to add ads in between post content,
    Is there any way show ads of other than AdSense

    1. Hi Srinivas,

      I’m glad that you found the blog post useful, regarding your question on how to add ads in between post content? We have got a lot of request from the AMP community for this feature and we have released an Extension called “Advanced AMP Ads”, with this you can add in-content ads as well as Sticky ads. Link to the extension is https://ampforwp.com/advanced-amp-ads/

      And regarding your second question, we will add support for other ad providers as well in future updates.

      If you have any question, please feel free to ask.
      Mohammed Kaludi

  2. Pingback: Step-By-Step Guide for How to Insert ADS between post content in AMP - AMP for WordPress

  3. Pingback: Why Accelerated Mobile Pages (AMP) is must for every Website - AMP for WordPress

  4. Thank you for sharing such an awesome information about AMP. There is very rare and true information about AMP on the internet. This will help me lot.

    1. Hey Catalin,

      That is strange, can you please tell me which other plugins you are using with this one?

      I would be more than happy to help you and make your site AMP compatible.

      Mohammed Kaludi

  5. Thanks alot for this wonderful plugin. but please i noticed that at times the mobile redirect doesn’t work it still takes me to the desktop version.

    And then i will like to increase the number of post on the front page from 10 to about 15.

    I also noticed my google adsense does not display on operamini browser

    Lastly it will be much better if the comment box is on the amp version instead of redirecting to the normal version.

    I will be very grateful if you can answer this questions .

    Thanks

  6. Should my mobile version of my website automatically point to website.com/amp ? We want our mobile to look the same and only if you choose to go to amp do you get those pages

  7. How about a tutorial on the Design section? or “Launch Page Builder”?
    all I see is raw css or html code, what am I to make of that?
    are we to hand write our html to build an amp version from scratch?

    1. Yes, David, that’s a good idea.

      Can you please let us know what are you trying to achieve? so that I can understand, it will help me improve the plugin and the user expectation.

      Regards,
      Ahmed

  8. Hi, I’m looking (but haven’t found) an editor to create amp page. – include images, the barest formatting (color, background, horizontal lines) etc. Am I missing something, or is that something not quite ready yet?

    I haven’t gone ‘live’ with amp until I can make the pages look a little better (especially an image).

    cheers

    1. Hey Anand,

      You can enable search by in AMP pages by following these simple steps shown in the screenshot http://take.ms/MKzl9

      Thank you,
      Happy AMPing

  9. Your AMP Plugin delivers more options than AMP Plugin By Automattic! I Have a question do I need to install Yoast glue plugin to validate this amp plugin of ours?

    1. Hey Subhasish,

      Great to hear that you liked the plugin. You did not need to install Yoast glue plugin to validate or work with AMPforWP plugin. Our plugin validates more pages, has more compatibility and more control than any plugin out there in the market.

      Thank you for writing to us,
      Mohammed Kaludi

  10. I have downloaded and installed AMP, Accelerated Mobile Extension; and AMPWoocommerce and my product page will not display any of the products. Any ideas on why?

    They are currently deactivated so customers can see the products and add to the cart but I really need a mobile version.

    1. Hey Kimberly,

      There are alot of factors, there mightbe conflict with other AMP plugins, make sure you have only one AMP (plus AMP from Automatic that we recommend). But if you could share your website url, so I can check what is the issue.

      Thank you for writing to us,
      Mohammed Kaludi

  11. Hi, I have installed the pluguin ana I think every thing is ok bur in google console appears the next message
    We did not find any Accelerated Mobile Pages in your site
    Accelerated Mobile Pages (AMP) are an open-source initiative to provide web pages that load fast and look good on mobile devices, even over slow networks.

    Perhaps some time must go on before Google woruld detect any change?
    Thanks

    1. Hey Xavier,

      Yes, please give some time to google to crawl and index your AMP pages and then it will update the Google Console information. Which usually takes 5-15 days depending on the crawl rate of your site and how often you add new content.

      I’m sure your site will rock with AMP.
      Mohammed Kaludi

  12. Hi,
    I recently activated AMP on my website https://www.androidsage.com/
    Using this plugin. Everything looks fine, but some of the older post URLS are showing a lot of errors in Webmaster tool AMP section including
    Issue Severity, User-authored JavaScript found on page, Syntax error, Prohibited or invalid use of HTML Tag, AMP markup missing or incorrect, Invalid usage of AMP tags, Use of deprecated tags or attributes, AMP markup missing or incorrect, etc.

    There are 136 URLS with these errors and over 500 posts indexed. But when I test the error posts via AMP validator, there are no errors show. Even when I visit these URLs, there are no errors a such. The posts are all valid when I test

    Is there a way to stop these errors to show up in Google webmaster tools?

    Some of the examples with errors in webmaster are here:

    https://www.androidsage.com/2016/06/26/update-att-galaxy-note-5-to-n920aucu2bpe6-android-6-0-1-marshmallow/amp/

    https://www.androidsage.com/2016/06/10/install-huawei-mate-8-marshmallow-emui-4-1-firmware-update-with-b320-download/amp/

    Can you give me a solution?

Add A Comment