Jon Fletcher 2020-07-23

How do I use Google AMP?

The first thing to clear up is that AMP (Accelerated Mobile Pages) is not strictly a Google product. Although initially developed by Google as an alternative to Facebook’s Instant Articles, AMP is now an open-governance and open-source HTML framework for building mobile pages. 

By limiting the HTML and Javascript options in this framework, it ensures all pages are built to very light specs, making them optimized for mobile web browsing, fast loading, and as AMP pages may be cached by a CDN, high-speed serving.

AMP is better for the user, not for the developer 

Part of the AMP mission is that the user experience comes before anything else. Written into the core vision of AMP, they say that they’re not going to make it easy. Making the user experience better comes above any problems you might have creating AMP pages. 

User Experience > Developer Experience > Ease of Implementation. 
Google’s attitude is that it’s better to make the publishers learn how to use AMP, rather than try and make the users accept slower pages. To deliver this faster experience, AMP is composed of three main elements.
AMP HTML This means the specific HTML that you’re allowed to use for AMP. Basically, it avoids code that works slowly on mobile devices and limits you to a pared-down version of CSS. 

AMP JS AMP JS is a specific JS library, designed for mobile use that you can use to write your scripts. AMP blocks third-party JavaScript. 

AMP Cache This is a proxy-based CDN that fetches AMP HTML pages, caches them and improves page performance automatically. All images load from the same origin, using HTTP 2.0 and a built-in validation system so the page doesn't depend on external resources and ensures the markup meets the AMP HTML specification.

In addition to these main components, over the course of the project, AMP has developed 10 ‘commandments’ of AMP pages to guarantee against bad performance. 
  • Execute all AMP JavaScript asynchronously 
  • Size all resources statically 
  • Don’t let extension mechanisms block rendering 
  • Keep all third-party JavaScript out of the critical path 
  • All CSS must be inline and size-bound 
  • Font triggering must be efficient 
  • Minimize style recalculations 
  • Only run GPU-accelerated animations 
  • Prioritize resource loading 
  • Load pages in an instant

This can seem like a lot of rules and a lot of development work which means many publishers avoid using AMP at all. But, as AMP is a framework, these rules are ready-built into it. Publishers just need to learn how to add the AMP framework around their content. In this blog post, we’re covering everything you need to know to start using AMP, and how to get the best results in terms of traffic, engagement, and monetization.

Convert or create? 

If you’ve been looking at ways to start using AMP, you’ve probably seen tools that will offer to automatically convert your content, including the official AMP WordPress plugin. This can be appealing but conversion rarely gives you the seamless transition you expect. 

Most sites use a lot of CSS and Javascript that AMP doesn’t support. In converting, it throws away the Javascript —not supported—and gives you 50KB of inline CSS which means a lot of your styles and themes get discarded. Simple elements that use these classes, like a hamburger menu, will be broken or removed in your converted AMP page. 

Other, but more time-consuming ways to use AMP are to create an AMP version of a standard content page and use it to create AMP versions of all your future content. Or, publishers can mark up the HTML of their page with the AMP library and manually resolve any validation errors.

Building an AMP page You can use a standard boilerplate markup to create an AMP page that’s available here

Like a menu, you select the features you need your AMP to give and it will generate the code template for you. Copy and save it as a .html extension.

Toggle features on/off and the code adapts to what you need.

You can then style the page and the elements according to your branding. AMP pages use CSS for styling, but due to the performance needs, you can’t reference external stylesheets or use certain styles that will lead to poor page performance. 

You can get the full guide to supported AMP styles here. 

Layouts and elements are also strictly regulated. Rather than using CSS, elements such as images are adjusted to fit the width of its container element, the height is set automatically, using an aspect ratio.

With your styles and content set, you then need to pair your AMP page with your standard version (if you have one). To do this, put a link to the AMP page in an HTML tag in the source code of your original page. 

Search engines can discover the link to the AMP version of a webpage instead of the standard version. If you only want the AMP page, you still need to add the canonical link to the head, you just point it back to your AMP page like so:

You can then use a local webserver like Apache 2 or Nginx to preview your page like a normal HTML site. Once it looks correct, you can validate if search platforms consider the page to be a valid AMP site by following these steps:

  • Open your page in your browser 
  • Add "#development=1" to the URL, for example, http://localhost:8000/released.amp.html#development=1
  • Open the Chrome DevTools console and check for validation errors

Once all validation errors are resolved, you will be ready to publish your AMP page! 

Converting HTML pages to AMP

But what if you have a lot of good content that you created in HTML, that you want to start seeing more search traffic go to? You can also convert a traditional HTML page to AMP HTML. 
To convert a page you need to copy the entire code from your article’s HTML file and paste it into a new file, with the .amp.html extension.

  • Let’s imagine we’re converting story.html 
  • We would copy all the code and save it as a new file called story.amp.html

You then need to add the AMP library file which will tell you exactly what you need to fix in order to make this file a valid AMP page. To add the AMP library, you have to add the following script to the bottom of the < head > tag:

Then, just as in creating a brand new page, you need to use your local web server like Apache 2 or Nginx to load your page and open the developer console. Checking the Javascript output, you should see: Powered by AMP ⚡ HTML. 

At this point, It’s likely that your page bears some resemblance to your content, but is not quite right.

The next step is to check for validation errors. To do so, follow the same process as a new page:

  • Open your page in your browser 
  • Add "#development=1" to the URL, for example, http://localhost:8000/released.amp.html#development=1
  • Open the Chrome DevTools console and check for validation errors

Now, the developer console is going to show you where the real work to be done. 

As AMP has strict tramlines for what can and can’t be part of your page. Depending on the original content and build of your HTML page, you have to go through each error and resolve them according to the specs of AMP here. 

You can see a full list of the validation errors and their fixes here

When you have resolved the validation errors and previewed the page, whereupon it looks good, it’s time to add the canonical links between the pages. The AMP markup to the original page code mean there is already a link tag in the < head > back to the canonical page like this:

What remains to be done is to link the canonical article to the AMP page by including a < link rel="amphtml" > tag in the head section of the original article. 

In the head section of story.html, add < link rel="amphtml" href="/story.amp.html" >. The articles are now paired. 

Bidirectional linking allows search engines to understand the relationship between our regular HTML page and the AMP page, and which is which. 

The final step is to add structured data to help your content to feature in the rich results elements of SERPs. Depending on the content, you can choose the right structured data schema from

Complete the information in the schema, add it in the < head > tag of your AMP page via an application/ld+json type script tag, and validate it using the Google Structured Data Validation Tool until you see 0 errors and 0 warnings. 

You have now successfully converted html to AMP! The next step is to read our guide to monetizing your AMP page, and start earning revenue from ads. 

Marfeel is an active contributor to the AMP project, and as a publisher platform, we are able to create rich, seamless, and monetized AMP pages from publisher content. If you’d like to try our AMP solution, with a guaranteed increase in revenue, click here to try a free demo.

Latest Articles

‹ Back to Blog Home

Get the headlines

Sign up to get the best headlines direct to your inbox

Your name
Your email