Why and How to Use AMP to Your Mobile Pages

What is AMP?

It is a project from Google & Twitter, designed to create very fast mobile pages. Google announced the launch of the Accelerated Mobile Pages (AMP) project on February 25th. This open source framework was first announced on October 2015 with the goal to provide a fast loading mobile environment for publishers and ultimately a better mobile experience for users.

Why is AMP Implementation Important?

AMP implementation actually provides 3 important SEO benefits:

The first is that AMP pages are significantly faster compared to non AMP ones (and we know that load time is a ranking factor) in a mobile environment. As Google says, with AMP implementation you can get from 15% to 85% performance improvement.

The second benefit is the little green lightning bolt which will be shown underneath the AMP result in Google making the organic listing more attractive for the user.  Apart from that, AMP results appear at the top of the SERP, pushing the rest of the results (even the local ones) below the fold and giving publishers who implement AMP a great “visibility” advantage.

The third important SEO benefit is that AMP implementation may be a ranking factor itself. Especially if you are running a publishing site with a lot of content, you should definitely start implementing AMP as we speak!

How Amp looks like on Google SERPs

 

accelerated mobile pages

How does AMP work & how can you apply it

AMP is basically a stripped down form of HTML. In order to AMP your site you need to have 2 versions of each article’s page. The original & the AMP version. The original version must include <link rel=”amphtml” href=”http://www.example.com/blog-post/amp/”> meta tag pointing to the AMP version and the AMP version should include a rel=canonical to the standard original desktop version.

For optimal results, make sure to also include schema.org implementation to specify the content type of the page.

Do not forget to validate your AMP pages using “developer tools” in Chrome extension.

If everything goes as expected, Google Search Console will pick up the AMP version of your pages, even if it takes a while. But when it does, you will be able to see something like this:

amp on webmastertools

 

How to Apply AMP in WordPress Sites?

mobile

AMP implementation in WordPress sites is quite straightforward.

RewriteEngine On

RewriteCond %{REQUEST_URI} !/amp$ [NC]

RewriteCond %{HTTP_USER_AGENT} (android|blackberry|googlebot-mobile|iemobile|iphone|ipod|#opera mobile|palmos|webos) [NC]

RewriteRule ^([a-zA-Z0-9-]+)([/]*)$ https://example.com/$1/amp [L,R=302]

  • Edit CSS files so that your AMP pages follow your website’s styling.
  • Don’t forget to place canonical tags that will point to your original pages.

AMP restrictions

  • The AMP version does not permit the use of form elements & Javascript.
  • All CSS must be inline and less than 50KB in size.
  • Images should use the custom amp-image element and dimensions should be declared explicitly.

Additional Information and Resources

  • ampproject.org – The main project web page, where you’ll find a technical intro, tutorial, GitHub repository, and more.

 

If you have any more useful tips to add about Accelerated Mobile Pages (AMP), feel free to make a comment. Subscribe on webseoanalytics and start sharing your thoughts with us.

 

 

TRY THE WSA TOOLBOX

Leave a Reply