AMP Guide – How to Set up and Test Accelerated Mobile Pages

Accelerated Mobile Pages (AMP) were created back in 2015 by Google and other companies such as Adobe and WordPress as a new standard for fast loading mobile websites.

The importance of mobile friendliness for websites continues to increase, and AMPs play a particularly important role here. So we’ve created this step-by-step guide for setting up and testing Accelerated Mobile Pages. We’ll explain how they work, whether it’s worthwhile investing your time in AMP, and more.

What does AMP mean?

AMP (Accelerated Mobile Pages) is an open-source page format that you can use to create user-oriented versions of your web content (AMP websites, AMP Ads, AMP Mails or AMP Web Stories) that are optimized for mobile devices. The format reduces your pages to the essentials (for example, a shortened HTML code is used), and it therefore ensures a higher loading speed.

As Google posted in the Webmaster Central Blog: “AMP was introduced to dramatically improve the performance of the web and deliver a fast, consistent content consumption experience. In keeping with this goal, we’ll be enforcing the requirement of close parity between AMP and canonical page, for pages that wish to be shown in Google Search as AMPs.

How does AMP work?

AMP enables faster loading of web content by using shortened HTML code, asynchronous JavaScript and decentralized loading via a content delivery network.

The three pillars of the AMP framework at a glance:

• AMP HTML: This is a particularly slim HTML code that promises small file sizes and can therefore be loaded quickly. If an AMP page is called up, only one request is made, which also increases the loading speed.

• AMP JavaScript: Accelerated Mobile Pages are based on asynchronous JavaScript. This allows instant rendering without scripts blocking loading.

• AMP CDN: The Content Delivery Network (CDN) stores AMP pages in the cache and thereby speeds up the loading process when the pages load. All documents required for page construction are loaded from just one source.

Why do websites need AMP?

AMP is not an official ranking factor, but when implemented correctly it does deliver significantly better mobile page speeds. And this in turn plays an important role in the winning higher search engine rankings.

A smartphone is now sufficient for browsing the web in most cases. However, with mobile Internet connections generally being slower, it’s particularly important to optimize loading speeds on mobile. And this is exactly where AMP comes in.

There are other ways to improve your website’s mobile page speed and usability (check out our ebook on Mobile Website Optimization ), but AMP is definitely one option to consider.

Let’s look at the advantages and disadvantages of AMP…

2 advantages of AMP

• Pages load in near real time:  The biggest advantage of Accelerated Mobile Pages is their speed. By using AMP, pages on mobile devices are rendered almost in real time, which has a positive effect on the user experience when visiting your website.

• User-friendly ads:  In addition to websites, AMP can also be used for ads and other formats. AMP also helps to make advertisements more appealing to the target group, to attract more attention and to strengthen their effect.

It’s worth noting that in the past, AMP pages were given preferential treatment when creating search enhancements such as top stories and news. In addition, Accelerated Mobile Pages were marked in the search results with a special AMP badge (↯). However, since Google’s Page Experience Update 2021, these advantages no longer apply.

2 disadvantages of AMP

• Limited functionality:  AMP pages usually only offer a limited range of functions and limited possibilities for web designers. Depending on the desired functionalities and design requirements of the website, a balance must be struck between speed and these requirements.

• Hard-to-measure impact:  There are case studies from the AMP project in which websites with AMP were able to achieve significantly lower bounce rates and higher conversion rates. However, the general data on this is not particularly reliable. Whether AMP is worthwhile for your own website should therefore be decided on a case-by-case basis.

Tip: If you’re not sure if AMP is right for your website, you might find our article on the  impact of AMP on traffic and conversion rates helpful.

How to set up Accelerated Mobile Pages

Accelerated mobile pages can be developed from standard websites. Nevertheless, a few adjustments must be made:

• Document type (Doctype): At the beginning of each AMP HTML document, you will find the document type:  <!doctype html>.

• Use the <meta charset=”utf-8″> character set.

• Each AMP page must have a corresponding html tag. You can use <html ↯> or <html amp>.

• Each AMP HTML page must contain <head> and <body>.

• You should insert a canonical tag on your AMP page which refers to the original page. If there is a standard URL, the tag should link to it.

Example:

<link rel="canonical"href="https://www.meineseite.de/url/zur/original-version.html" />

The original URL is referred to here.

<link rel="canonical"href="https://www.meineseite.de/url/zur/AMP-Seite.html" />

The canonical refers to the AMP page itself here.

• For the AMP page to be perfectly adjusted to the respective output screen, it should contain a view port.

<meta name="viewport" content="width=device-width,minimum-scale=1">

• This line must be inserted in the header to load the content through the AMP CDN.

<meta name="viewport" content="width=device-width,minimum-scale=1">

The advanced tag for the <head>-area must also be implemented:

<style amp-boilerplate>body{-webkit-animation:-amp-start 8ssteps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8ssteps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8ssteps(1,end) 0s 1 normal both;animation:-amp-start 8ssteps(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><styleamp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>

• In order for search engines like Google to recognize that a corresponding AMP version exists when crawling a conventional page, you should also refer to AMP versions on your standard website. The rel attribute is used for this. It is inserted in the <head> area and links to the AMP version.

<link rel="amphtml"href="https://www.meineseite.de/url/zur/AMP-Version.html" />

AMP in Google Search

In order for your AMP pages to perform well in Google searches, you should make them as relevant and user-friendly as possible. According to Google, the same guidelines apply here as for all conventional web content.

In addition, Google provides specific guidelines for AMP pages that you should definitely follow:

• AMP pages must conform to the AMP HTML specification

• The content must correspond to the content of the standard page and be usable in the same way for visitors

• The AMP-URL scheme must be understandable for visitors

• Structured data guidelines must be followed when using markup

• The pages must always be compatible with AMP and the corresponding AMP markup must be complete and valid.

Structured data on AMP pages

You can also label your AMPs with mark-ups. It is therefore possible, for example, to perfectly display news or recipe pages on mobile devices in the SERPs. For example, news articles can be displayed with a corresponding markup in the so-called “carousel” from Google.

A news AMP article may be marked in this way:

{
"@context": "http://schema.org",
"@type": "NewsArticle",
"headline": "Titel",
"datePublished": "2017-11-11T11:11:00Z",
"image":"logo.jpg"
}

Inserting logos on AMPs:

• Only the image file formats .jpg, .png or .gif should be used.

• Animated logos are not supported.

• Do not use an icon, but either word mark or the complete logo.

• Place the logo on a white or transparent background so that it can be displayed in the SERPs.

• Create your logo in exactly 60×600 pixels in landscape.

Inserting images on AMPs:

You have to adjust the HTML code to correctly display images on AMPs. The references to images in the source code have to be adjusted – you replace <img src> with <amp-img src>.

An example:

<amp-img src="tollegrafik.jpg" alt="Image" height="400" width="800"></amp-img>

Adjust the background color of your AMPs

In principle, AMP pages are very simple. If you would like to change the color of the background, you can adjust the following elements.

<style amp-custom>
/* any custom style goes here */
body {
background-color: white;
}
amp-img {
background-color: gray;
border: 1px solid black;
}
</style>

Remember that to save time, AMP pages can only use one style sheet.

Why the rel-attribute on your standard page is so important

Your standard website should link to the AMP version: insert a rel-attribute into the <head>-area of your standard website, and this then links to the AMP version:

<link rel="amphtml"
href="https://www.meineseite.de/url/zur/AMP-Version.html" />

In principle, the same directives apply to AMPs as for all Google-friendly websites. In order for your page to appear in the Google SERPs, it must comply will all important AMP specifications, its content must be identical to the content of the standard page, and the URL schema should be understandable for users.

Furthermore, Google specifies that the page must be compatible with AMP. The compatibility applies also to inserted structured data.

Implementing AMP via plugins

To save time, you can implement AMPs with plugins which are often available from Content Management Systems:

How to test and review AMP pages

Once you have set up your AMPs, they can be checked easily in the Google Search Console. The only requirement for this is that your website has to be saved in the Search Console.

Log in as normal and click on “AMP” under “Enhancements” in the left-hand column. The number of indexed AMPs will then be displayed, and you will also receive all important error notifications:

Figure 1: Testing AMP implementation via Google Search Console

When analyzing your data, remember that changes and adjustments are not always immediately shown in the Google Search Console.

If you would like to test the implementation of AMP HTML on any page, including ones which you do not have access to in Google Search Console, then the free Google AMP test tool is also available:

Figure 2: Test Accelerated Mobile Pages with the Google AMP test tool

A third option for testing AMPs is with the AMP Validator from the AMP project. This can also be used to check AMP ads and emails:

Figure 3: Check AMP websites, ads and emails with the AMP Validator

Frequently asked questions regarding AMP

• Can I use AMP for online shops as well?

Yes, any website can be delivered via AMP, including online shops. However, you should always carefully consider whether AMP is suitable or worthwhile for your website. You can find more information in our post about the pitfalls and possibilities of AMP in e-commerce .

• Does AMP also work with ads?

Yes, ads can also be delivered via AMP. The aim of the AMP project is to make ads faster, avoid interruptions and therefore create a better user experience. It will also improve visibility, click rates and monetization of ads.

• Is an AMP page duplicate content?

No, AMP pages are not considered duplicate content as long as they are implemented correctly. Although the creation of an additional AMP page creates “duplicate content”, the canonical tag can be used to refer to the original version so that search engines understand the context of the pages.

By linking regular HTML pages to existing AMP pages via rel=”amphtml”, Google receives another signal that explains the connection between the pages.

• Is it possible to create a mobile website with just AMP?

Yes, AMP pages can use schema.org markup to markup structured data. As with conventional websites, only meaningful properties that correspond to the actual content should be used for AMP pages.

• Can AMP be combined with Markup similar to schema.org?

Yes, the project page from AMP recommends using schema.org to identify structured data. However, it is pointed out that you should only use properties that make sense. (Source: ampproject.org)

AMP summary

Accelerated Mobile Pages are a sensible solution for making mobile-optimized websites even faster.

By loading the pages faster, the user experience for website visitors will improve, which can have a positive effect on the digital success of your website, by cuttting bounce rates and improving conversion rates.

As with any website customization, however, there are a few things to consider when implementing AMP. In order for AMP pages to appear in Google search, you must adhere to the technical requirements and Google’s guidelines. Depending on your website type, the use of AMP will vary in effectiveness.

You should therefore carefully weigh the costs and benefits of introducing AMP on your website before you get started. If you do decide to use AMP, this guide will hopefully give you a good basis for the implementation of your project.

Other resources related to AMP

• Google AMP Site Guidelines

• AMP Project Guide for creating AMP Pages

• AMP Launch on Github

• Template for an AMP product page for online shops on Github