What is AMP?

What is AMP?

If you’ve been on the web in the past few weeks, you may have seem some articles and buzz about AMP. But what exactly is AMP and why do you need to be concerned with it? This handy guide from Elementary Digital will get you caught up with this new development from Google which is crucial for your mobile SEO campaign.

AMP stands for Accelerated Mobile Pages. It’s a way to build your web pages using static content that render quickly. In action, AMP is made up of three different parts.

This is the restricted HTML for reliable performance and with a number of extensions for the content beyond the most basic HTML. AMP HTML is custom AMP properties which extend the basic HTML. This simplest file looks like this:

<!doctype html>



<meta charset=”utf-8″>

<link rel=”canonical” href=”hello-world.html”>

<meta name=”viewport” content=”width=device-width,minimum-scale=1,initial-scale=1″>

<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>

<script async src=”https://cdn.ampproject.org/v0.js”></script>


<body>Hello World!</body>



Most of the tags in AMP are the same as regular HTML; however there are some AMP-specific ones.

img Replaced with amp-img.
video Replaced with amp-video.
audio Replaced with amp-audio.
iframe Replaced with amp-iframe.


This JS library allows the rapid rendering for the AMP HTML pages. It implements the AMP best performance practices, helps to manage resource loading and gives you the custom tags which allow for the rapid rendering for your AMP page.

One of the largest optimisation factors is that everything comes in asynchronously from external resources so nothing is blocked from rendering on the page. iFrames are all sandboxed, layouts are pre-calculated before they are loaded on the page and slow CSS selectors are disabled.

This is optional and delivers the AMP HTML pages.

The Google AMP cache is a content delivery network which is proxy based and delivers all of the valid AMP documents. AMP HTML pages are fetched and cached which improves page performance automatically. Using Google Amp Cache means that all JS files, documents and images are all loaded from the same origin using HTTP 2.0.

There is also an inbuilt validation system which sets a guarantee that the page will load. This runs assertions which help to identify whether the page meets the AMP HTML specifications.

There is an alternative version of the validator which logs any validation error into the browser console so that you can correctly identify what the changes in your code mean to the performance of the page and the user experience.

Google are pushing AMP pages very hard. You need to make sure that you are using this on your site if you want to have an impact on mobile search – it’s bound to have a significant affect on mobile rankings.

Keep your eyes peeled for more content about AMP, what it means for digital marketing and how to add it to your site.

Author Owen Radford

More posts by Owen Radford