This site uses cookies and other tracking technologies to make possible your usage of the website, assist with navigation and your ability to provide feedback, analyse your use of our products and services, assist with our promotional and marketing efforts, and provide better user experience.

By using the website, you agree to our Privacy policy

Accept and continue

Report a bug

Cancel
28
How-to 9 min read September 26, 2019

Configuring accelerated mobile pages on a website: how to avoid mistakes

Accelerated mobile pages allow you to quickly load a website on portable devices. At the same time, a resource is ranked higher in mobile search results. In order for accelerated mobile pages to work properly, you must correctly use HTML tags, CSS, and JavaScript code.

What are the Accelerated Mobile Pages

Accelerated Mobile Pages is a technology developed by Google that allows you to create mobile pages that are optimized for mobile devices. These pages are different from the usual ones by special tags, more compact code and the inclusion of a JavaScript library which allows loading pages faster on mobile phones or tablets.

These pages are downloaded to Google AMP Cache and then transferred to a portable device immediately from it, if necessary. In this case, Google assumes the role of CDN (Content Delivery Network) which is a network of servers with specialized software that speeds up the content transfer to users.

According to the developers, using this technology allows you to instantly load pages from the Google cache. With responsive design, AMP pages can be used for both mobile and desktop versions, but their functions will not work in case of a standard desktop search.

If there are technical problems, the website's AMP pages will be loaded in the standard way from the server of the hosting provider, however, in this case, loading will take less time than without using the technology. AMP pages are displayed in an expanded format and with a special lightning-shaped icon:
Google AMP pages
To be displayed in this way, pages must meet a number of requirements. If they do not comply with the AMP rules, search engines can index them as usual pages. You can use the AMP validator to check your pages:
Validator AMP pages

How to create accelerated mobile pages

You must follow the following rules to create correctly working AMP pages:

  • accelerated pages should have the same content and functionality which are available on standard pages;
  • AMP pages should use friendly URLs similar to canonical pages. For example, with the main address site.com/news, you can use the URL amp.site.com/news for an accelerated page;
  • you need to follow the rules described by Google to add structured data;
  • pages must be created in accordance with the AMP HTML specification;
  • you must use the HTTPS protocol for all the features of AMP pages to be available;
  • check AMP pages for errors before publishing them:
Checking AMP pages for errors

Google AMP: setting up step by step

1
The page should begin with the <!doctype html> statement.
2
Next, add the <html ⚡> or the <html amp> tag.
3
The AMP page must contain the <head> and <body> sections. The <head> section should begin this way:
<meta charset="utf-8">
4
Then, you specify a link to the canonical page:
<link rel="canonical" href="https://site.com/some-canonical-page.html">
5
Then, you fill in the viewport meta tag:
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
This tag is used to set the width and initial scale for the viewport on portable devices.
6
The next element is the AMP Boilerplate code. This code is designed to hide the page until it is fully displayed, and then darken it to improve performance. It is used by Google to set the parsing order of the DOM and CSSOM.
7
The last required element of the <head> section:
<script async src="https://cdn.ampproject.org/v0.js"></script>
The created page should look like this:
AMP page structure and its HTML code

Accelerated mobile page generators

The content of the <body> tag of an AMP page created according to the instructions above can be manually filled in or generated automatically.

You can use the following AMP generators to save time and minimize the risk of errors:
AMP Boilerplate Generator
It allows you to get an AMP template by customizing it based on the selected parameters:
#2

It allows you to create an AMP by only adding one line of code:
Mercury AMP Page Converter

HTML &AMP — tag rules

To add various multimedia elements to accelerated pages, you must correctly use the AMP HTML tags. Pages with broken or incorrectly used HTML tags will not be validated and will not appear in Google search results.

HTML tags for AMP are divided into three groups:
1
Those that can be used in their original form according to certain rules. For example, you can add the <a> tag, but it must contain the target = "_blank" attribute.
2
Modified ones. The most popular AMP tags: <amp-img> which is for adding images, <amp-video> for adding videos, <amp-audio> for adding audio files.
3
Forbidden ones. This group includes the tags <frame>, <project>, <applet>, and other tags.

JavaScript &AMP — terms of use

Adding custom java scripts to AMP using the <script> tag is prohibited. You can only add the AMP runtime to the header section by loading this script:
 <script src="https://cdn.ampproject.org/v0.js"></script>
  • to add interactive functions to the accelerated page, only special AMP elements are used that are similar in their properties to JS but do not negatively affect the download speed;
  • using third-party JS scripts in iframes is permitted because there they do not reduce the page loading speed;
  • when using the <a> tag in AMP, keep in mind that you cannot add "javascript:" to its beginning.

Outdated AMP elements

As of April 2019, there are no obsolete tags in the AMP specification. However, for the future, the error option "Unsupported elements" is added to the specification if unsupported tags (DEPRECATED_TAG) are used.

The same error will appear in the Chrome Developer Console when using unsupported attributes (DEPRECATED_ATTR) in tags.

To correct these errors, you will need to remove outdated elements and replace them with modern ones, according to the current AMP specification https://github.com/ampproject/amphtml/blob/master/validator/validator-main.protoascii.

Errors in the CSS style sheets

AMP uses stricter templates than standard HTML pages. A number of restrictions make loading faster. Keep in mind that each tag displayed on the page has its own templates. In order for the content to load correctly, the correct sizes must be specified.

The following AMP errors are associated with the style sheets:

  • STYLESHEET_TOO_LONG — the style sheet has exceeded the size limit of 50 000 bytes. In this case, you need to reduce the content of the <style amp-custom> tag to an allowed value;
  • CSS_SYNTAX — a syntax error in the style sheet. You need to fix the particular error;
  • CSS_SYNTAX_INVALID_AT_RULE — the use of an invalid rule. CSS directive error needs to be fixed.

Conclusion

  1. Accelerated mobile pages are a tool that allows you to get ahead of competitor websites in mobile search results thanks to the fast loading of pages.

  2. With proper design, websites in Google's mobile search results are displayed with advanced data and an icon indicating fast loading, which makes the snippet more attractive to potential visitors.

  3. You can create AMP pages yourself based on instructions, specifications, and templates, or you can use online generators.

  4. In order for the created AMP pages to appear in search results, you should avoid syntax errors and not use forbidden or outdated tags.
This article is a part of Serpstat's "Site Audit" tool
SEO Audit in Serpstat
Audit all the site or page in one click. A complete list of errors, sorted by severity, ways to resolve them and recommendations. Any frequency of verification and automatic email reports.
Run Site Audit

Learn how to get the most out of Serpstat

Want to get a personal demo, trial period or bunch of successful use cases?

Send a request and our expert will contact you ;)

Rate the article on a five-point scale

The article has already been rated by 0 people on average out of 5
Found an error? Select it and press Ctrl + Enter to tell us

Share this article with your friends

Sign In Free Sign Up

You’ve reached your query limit.

Or email
Forgot password?
Or email
Back To Login

Don’t worry! Just fill in your email and we’ll send over your password.

Are you sure?

Awesome!

To complete your registration you need to enter your phone number

Back

We sent confirmation code to your phone number

Your phone Resend code Queries left

Something went wrong.

Contact our support team
Or confirm the registration using the Telegram bot Follow this link
Please pick the project to work on

Personal demonstration

Serpstat is all about saving time, and we want to save yours! One of our specialists will contact you and discuss options going forward.

These may include a personal demonstration, a trial period, comprehensive training articles & webinar recordings, and custom advice from a Serpstat specialist. It is our goal to make you feel comfortable while using Serpstat.

Name

Email

Phone

We are glad of your comment
Upgrade your plan

Upgrade your plan

Export is not available for your account. Please upgrade to Lite or higher to get access to the tool. Learn more

Sign Up Free

Спасибо, мы с вами свяжемся в ближайшее время

Invite
View Editing

E-mail
Message
Optional
E-mail
Message
Optional

You have run out of limits

You have reached the limit for the number of created projects. You cannot create new projects unless you increase the limits or delete existing projects.

I want more limits