What is AMP — Accelerated Mobile Pages

So what is AMP? How will it change our website? Is it any useful? How hard is it to implement? How important is it? Should I replace my mobile website with AMP? What is Accelerated Mobile Pages anyway?

The above are some of the many questions someone has about this new SEO trend for mobile searches. We hope that if you read through the end of this article, most of these questions will be answered.

Visit the official site about the AMP Project and see the Google Blog AMP Announcement.

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.

Mobile Phones suffer from low speeds generally. Sometimes you don’t even have a 3G connection and realize you are on 2G. But even with 3G you still suffer some major internet lags occasionally.

Modern mobile websites usually provide a good interface for mobile screens, but that doesn’t mean those sites are optimized for mobile use because even though they might look nice on a small screen, they are still very heavy when it comes to loading times.

Google and Twitter approach was to produce a set of rules that AMP would enforce. If you don’t follow these rules for every “mistake” in your code your AMP validation will fail and your page won’t be considered “AMP”. So all sites that decide to follow the Accelerated Mobile Pages rules have to follow them. So mostly AMP enforces you to follow these rules, or your page is simply not AMP.

AMP was built based on existing open web technologies. So there is nothing “NEW” here.

So “What is AMP?” The best answer is…
AMP is a set of rules enforcing “light HTML”, with “no javascript”, “light internal CSS”, and a strong Google driven free CDN (Content Delivery Network), to cache those pages automatically and ensure much faster loading times for mobile devices.

AMP launched by Google on 26-February-2016, so it's pretty new, and all those who will catch up will benefit a lot when it comes to mobile search ranking over those who have not implemented AMP yet.

Here you can find a pretty explanatory article with a video about what AMP is by MOZ. Also, you will need to take a look at the official amp introduction about what is AMP.

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.

Open any of the Guardian articles, and then simply replace the “www” at the start of the URL with “amp” and you will see the amp version of that article instead of the standard one.

• Normal Guardian Article: https://www.theguardian.com/us-news/2016/jul/17/baton-rouge-gunman-gavin-e-long-cosmo-setepenra-marines
• AMP Guardian Article: https://amp.theguardian.com/us-news/2016/jul/17/baton-rouge-gunman-gavin-e-long-cosmo-setepenra-marines

Additionally, Google provides an amp demo, that you can see from a mobile device’s web browser.

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.

Even if you have a secondary mobile website on some another domain (e.g. mobile.example.com), you don’t need to take it down. You can still have an AMP version side by side with the canonical version and the mobile version.

At your AMP implementation, all links pointing to your categories, and menus and main page, will point to the canonical version of your site. So you only really need to make an AMP version for your articles, not your entire website.

If your website doesn’t contain any articles, you can really skip the rest of this document since the AMP HTML allowed is so slim, you cannot do much more than contain some article in an AMP driven page.

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.

Especially since (at the time this article was written) AMP was so recently announced, don’t miss the opportunity to be of the first few to implement it, and differ from the “crowd”.

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.

Once this is done, you will have an amp version on your pages
if for example, you have
http://www.example.com/my-article
then your AMP version of the same article will be
http://www.example.com/my-article/amp/

If you don’t have WordPress or want to manually make an AMP alternative for your posts, you will have to manually make all the necessary changes. You can read directly from the Official AMP Tutorial and start building your first AMP page!

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.

Well… its really simple to validate AMP! All you have to do is open your AMP URL in Chrome, and then add #development=1 at the end of your URL and go to the Chrome developer tools console to see if your AMP document validates or not.

http://www.example-com/myarticle/amp/#development=1

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.

So, briefly, AMP consists of the following

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.

In addition to that, certain HTML elements have been replaced by amp based similar elements. For example the <img> tag now becomes <amp-img>. The reason for this is because the AMP-JS makes pre-calculations on some things, like the image height, so it knows the exact page rendering dimensions before even the images get downloaded. Similarly, there are many more HTML tags that are AMPified.

Importing external CSS scripts is forbidden and you have a limited set of CSS instructions you can use internally in your page. This is to save repeated server-client roundtrips.

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.

It is just a speculation, but Google stopped the PageSpeed CDN service in August 2015. It is much likely they did that so they use the PageSpeed CDN service to host the new AMP 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).

So if your main article is on http://www.example.com/my-article and the AMP version is on http://www.example.com/my-article/amp/ then you have to put the following code.

On the canonical version (http://www.example.com/my-article) you need to put in your HTML the code <link rel=”amphtml” href=”http://www.example.com/my-article/amp/” />

On the AMP version (http://www.example.com/my-article/amp/) you need to put in your HTML the code <link rel=”canonical” href=”http://www.example.com/my-article/” />

And this is how Google will know of the existence of both versions of your articles.

So, What is AMP? Hopefully, you now have some better idea. If not please leave a comment and will be happy to provide an answer if possible.