General Information
How AMP works? The idea is that the site uses special tags, the number and functionality of which are strictly limited. The task of the developer is to select the most appropriate schemes from those available that will solve the customer’s problem.
Google finds these special tags and caches their information. After this, when the user searches for something via Google, the browser loads information from Google’s CDN, into a special iframe and when the link is opened, it simultaneously opens the already loaded page in a special window.
Google AMP pages are ranked higher than other search queries because they meet the requirements for fast download and are better adapted for mobile devices.
In fact, AMP pages or Google accelerated mobile pages are static or conditionally-dynamic, because they allow the use of sending forms, as well as iframe.
Areas of application: news sites and portals; catalogs (without the use of filters); lightweight mobile versions of the site (if it satisfies the functional aspect); lead pages, which main aim is to catch the user’s attention and lure him/her to the main site.
Next, let’s talk about the main features of AMP website.
Lack of Customized Scripts
The first and most important difference from standard sites is the impossibility of inserting “regular” scripts. That is why the functional side, which helps to create dynamic changes (click-through actions, animations, filtering, modal windows), becomes unavailable.
The only solution is to use the available components and iframe. Available components allow achieving partially the implementation of the usual features that are worth replacing and optimized for fast loading. With their help, you can make a sidebar, carousel, send a form, and upload content, advertising and so on. Each component is associated with its js-library, which has to be on for its proper functioning on the site. All available types of components with examples of their use can be found on this site.
Lack of Conventional ![]()
Tags in the Document
All images on the page should be used in a special tag, which makes it difficult for users to insert images using a text editor. For other elements, where the output of images is written with “hands”, it is enough to correct the page layout. Similarly, if you use a carousel or lightbox, you need to insert analogs from the components.
The Use of Inline-styles are Forbidden
Another feature will primarily affect the text editor, as the editing of styles made is inline. Elements with such attributes as style=”color: …” are not valid, and changing the color or font size will write this property into the code.
The Structured Data
If you wish to include an article in the “Top stories Google” list, you should add to the page such information as data schemas with brief information about the articles, the author, the publisher, the company logo, as well as the publication and modification dates of the article.
The use of structured data is not a prerequisite, but if you wish a search engine to display data and changes when editing correctly, you need to put this scheme on the site. In fact, using AMP without this scheme becomes meaningless.
Example of a data schema for an “article” page:
<script type = "application / ld + json">
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"mainEntityOfPage": {
"@type": "WebPage",
"@id": "https://google.com/article"
},
"headline": "Article headline",
"image": {
"@type": "ImageObject",
"url": "https://google.com/thumbnail1.jpg",
"height": 800,
"width": 800
},
"datePublished": "2018-02-05T08: 00: 00 + 08: 00",
"dateModified": "2018-02-05T09: 20: 00 + 08: 00",
"author": {
"@type": "Person",
"name": "John Majson"
},
"publisher": {
"@type": "Organization",
"name": "Google",
"logo": {
"@type": "ImageObject",
"url": "https://google.com/logo.jpg",
"width": 600,
"height": 60
}
},
"description": "A most wonderful article"
}
</ script>
Some values are obligatory to use. For the structural data schema, there is also a definite validator. Information on filling and mandatory fields for the “article” type scheme can be found here.
There you can find information on other types of schemes (Books, Courses, Music, Podcasts, Recipes, Reviews, TV and Movies, Videos.)
Some features:
Company’s logo
There are a number of requirements for the logo. Firstly, the size should not be more and not less than 60×600 px at least on one side. However, it is desirable to use the height of 60px (for example, 450×60 px). Images of the smaller sizes, but in the same proportions as 60x600px (for instance 450x45px) will not stand the test.
Date of publication and date of change
The publication date is an obligatory parameter, though the date of change is recommended. Although we would take both parameters to be mandatory, as Google caches the content of articles, and it is impossible to find out when it will check all articles on the site again. Therefore, if the date of the last change is different, it will be easier for the search engine to understand that you need to make a new cache. Otherwise, there can be a situation when the user does not see some important changes.
Canonical links and inverse to it
For the search engine to understand that there is an AMP-version of the page, it should contain this link:
<link rel="amphtml" href="https://www.example.com/url/to/amp/document.html">And on the AMP page – there should be a back link:
<link rel="canonical" href="https://www.example.com/url/to/full/document.html">
CSS 50 kb
CSS styles are written inline, and their size should not exceed 50kb.
Conclusion
AMP is an interesting technology, but only for narrow-oriented tasks. It can be successfully used for “light” mobile version of the site, or for certain website sections that do not require high functionality. It is a good solution for information sites, blogs, online magazines, where you need to create a user-friendly content to attract user’s attention fast and in a simple form. For large and complex projects, AMP will not replace the mobile or adaptive version, at least at this stage of its development.
Google adds the AMP icon to all AMP articles in the SERP, and from the mobile devices AMP page will display firstly. In addition, they are ranked higher than pages without the use of AMP. If you want to get to know what is SERP and its peculiarities, you can read it in our knowledge base.
