What is AMP — Accelerated Mobile Pages

What is AMP

AMP stands for “Accelerated Mobile Pages”. It's a new standard for mobile pages that was born from a collaboration between Google and Twitter.

Some good AMP example?

  1. Why not take a look at the AMP version of this very article?
  2. The Guardian website has an awesome AMP implementation, that even Google has praised openly.

Do I have to replace my mobile website with AMP?

No! You can build an AMP version of your ARTICLES and keep it side by side with your existing version of your website. If you apply the rules described below, Google will distinguish the AMP version of your article from the canonical version, so they will both coexist. You don’t need to remove anything from your website.

How important is AMP?

In case you didn’t already get it, it is VERY important when it comes to mobile search. Google has openly announced in its webmasters tools section that, it will take into account the pages that utilize AMP for mobile searches, and promote them over non-amp pages.

How hard is it to create an AMP version for my pages?

If you are running WordPress then its pretty simple to have AMP, almost out of the box by simply installing three plugins.

  1. Download the AMP Plugin from Automatic.
  2. Optionally Download the PageFrog plugin to provide basic styling to the AMP plugin you already downloaded. This is a very good plugin that will also help you implement Facebook Instant Articles together with AMP.
  3. If you are running Yoast SEO, download the “AMP Glue” plugin to put together Yoast SEO with the AMP plugin you downloaded.

How can I validate my AMP page?

Now we described what is AMP, how important it is and how to have it in your website, it is good to know how AMP pages validate, to ensure our pages are ok.

What is AMP consisted of?

Take a look at this youtube video with Paul Bakaus about what is AMP Project and the three parts its consisted of, that we will explain in the next few lines.

1 — AMP HTML

This “light HTML”, consists of basic HTML elements. That is elements like span, strong, p, and so on will work, but you cannot use more complex structs like forms.

2 — AMP JAVASCRIPT

AMP loads its own javascript, and that's mainly what it makes the webpage be aware of the rules to apply to the rest of the page content. Mainly this javascript will load the necessary libraries, and mostly forbid you to use any other javascript that downloads content yourself. There are some additional js libraries to use other than the core one, but they are amp libraries to enable features like analytics, or adverts and so on, so no third party javascript here, sorry!

3 — AMP CDN

If your AMP page validates, then google will cache it at its CDN (Content Delivery Network) for faster serving. So even if you have a slow server, once the valid AMP page is cached, it will be served by the Google servers instead, thus making it even faster. So you end up with a very slim page, delivered by a very optimized CDN.

How can Google tell which version is AMP and which Canonical?

One of the most basic things, when you build an AMP version of your article pages, is that you declare on the AMP version what is the canonical version of your website, and on your canonical page you declare which one is the AMP version (amphtml).

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ioannis Anifantakis

Ioannis Anifantakis

MSc Computer Science. — Software engineer and programming instructor. Actively involved in Android Development and Deep Learning.