Use AMP to 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 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.

AMP implementation in WordPress sites is quite straightforward.

• Install & activate AMP wordpress plugin
• Paste the following code in your htaccess file
  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.