Clicky

  1. Home
  2. Getting Started
  3. 2. Settings & Options
  4. Step-By-Step Guide for Implementing AMP on WordPress

Step-By-Step Guide for 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 three methods to Activate AMP for your website (use any one of the method)

METHOD 1:

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

Method 2:

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

METHOD 3:

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

    • 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

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.

This page is valid it will show Green color .

If in this page have an error it will show Red color.

Speed Test

  1. Gtmetrix:

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.

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

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

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.

Ask your Questions Directly!
If you can't find the solutions in this article, then just ask us in the comments and we will answer it for you!
Updated on April 8, 2019

Was this article helpful?

Related Articles

Need Support?
Can’t find the answer you’re looking for? Don’t worry we’re here to help!
Contact Support

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

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

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

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

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

  8. I used your plugin on my blog but images are not showing up what is the solution

    1. Hey Emran,

      Have you enabled Featured Image from the post builder? Like this http://take.ms/FRYMl

      Hope this will resolve your issue.
      Mohammed Kaludi

    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?

  13. hello Team i am currently using Version 0.9.97.43 of amp when i update to the latest one my single post page become very strange, all spaces and line break are not visible as content become incomprehensible as spaces between lines were removed. how to fix this problem.

    1. Hi iLyricsHub,

      When we rollback to the Version 0.9.97.43 and then update to the latest version the single posts are appearing fine will you please contact our support team – https://ampforwp.com/support/ we will personally help you.

  14. Hello, thank you for the plugin. Today the Google Search Console has the following message for me: “Server error (5xx). First detected: 5/19/19. Status: Error” for https://www.resumetech.guru/finding-arete-your-purpose/amp/ which was last crawled on May 18, 2019. Since I’m new to WP and not a programmer, could you please advise how to fix this issue?

    Thank you in advance.

Leave a Comment