Amp. What is it and what does it eat?

general information

AMP is a technology of accelerated mobile pages, which is developed by independent developers and is actively promoted by Google in its search engine. Yandex has not yet connected to this initiative, but I am sure that soon they will either implement this standard, or come up with something similar in the way they work.

The point is that the site uses special tags, the number and functionality of which are strictly limited. The task of the developer is to collect a hodgepodge of available schemes that will solve the problem of the customer.

Google finds these special tags and caches information in them. After that, when the user searches for something in Google, the browser loads the information from the Google CDN into the special iframe and, when clicking on the link, opens the already loaded page in a special window.

Pages with AMP are ranked higher than other search queries due to the fact that they meet the requirements for fast loading and are adapted for mobile devices.

In fact, all such pages are static or conditionally dynamic, as they allow the use of submitting forms, as well as an iframe.

Applications: news sites and portals; catalogs (without the use of filters); lightweight mobile version of the site (if the functionality satisfies); hint pages to interest the user and lure to the main site.

Further I will tell about the main features of AMP.

Lack of custom scripts

The first and most important difference from standard sites is the impossibility of inserting "ordinary" scripts. That is, most of the functionality tied to a dynamic change (actions on click, animation, filtering, modal windows) becomes inaccessible.

The solution is to use the available components and iframe.

Available components allow you to achieve, albeit not complete, the implementation of the usual features, but they represent a worthy replacement and are optimized for fast loading.

With their help, you can make a side menu, carousel, form submission, loadable content, advertising, and more.
Each component is associated with its js-library, which must be connected to use it on the site.

All available types of components with examples of use can be found on this site .

Absence of regular <img> tags in the document.

All images on the page should be described in a special <amp-img> , which makes it difficult for the user to insert images through a text editor. For other elements where the output of images is registered with “hands”, it is enough to correct the layout. Also, if you are using a carousel or lightbox, you need to insert analogues from the components.

There should be no inline-styles in the page code.

Another feature that should affect the text editor in the first place, since the editing of styles takes place inline. Elements with style=“color:…”, attributes are not valid, and changing the color or font size will write this property to the code.

Structured data structure

To include articles in the “Top Stories google” collection, data schemes with brief information about the articles, author, publisher, company logo, as well as the date of publication and modification of the article should be added to the pages.

The use of structural data is not a prerequisite, but in order for the search engine to correctly display the data and changes during editing, you need to put this scheme on the site. In fact, using AMP without this scheme becomes meaningless.

Example 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": "2015-02-05T08:00:00+08:00", "dateModified": "2015-02-05T09:20:00+08:00", "author": { "@type": "Person", "name": "John Doe" }, "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 required. For the data structure, there is also a validator. Completion information and required fields for an “article” type scheme can be found here .

You can also 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 logo requirements:
  https://developers.google.com/search/docs/data-types/articles#AMPlogo guidelines
  I want to note that the size should be no more and no less than 60x600px at least on one side. It is advisable to observe a height of 60px (for example, 450x60px). Images of smaller sizes, but in the same proportions as 60x600px (for example 450x45px), will not pass the test.

  
  
• Date of publication and date of change
  Date of publication is a required parameter.
  Date of change - recommended.
  Although I would refer both parameters to mandatory, as Google caches the content of articles, and it is impossible to know when it will check all articles on the site again. Therefore, if the last modified date is different, it will be easier for the search engine to understand what a new cache needs to be done. Otherwise it is possible that the user will not see important changes.

Links canonical and back to her

In order for the search engine to understand that there is an AMP version of the page, it must contain a link:
<link rel="amphtml" href="https://www.example.com/url/to/amp/document.html">

And on the AMP page there is 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 tasks. It can be used for the "light" mobile version of the site, or for certain sections that do not require high functionality. A good solution for information sites, blogs, online magazines. Where you need to convey to the user content as quickly as possible and in a simple form. For large and complex projects, AMP will not replace the mobile or adaptive version, at least at this stage.

I managed to implement part of the functionality on the site of our IT-company Wellsoft , in the news section (adaptive image, form, text, structured data; in addition, if the opportunity arises, this article will go to the “Top stories” gallery).

To all AMP articles in Google search results, adds an AMP icon, and first of all shows AMP pages from mobile devices. In addition, they are ranked higher than non-AMP pages.

UPD: we spent a lot of time studying and implementing the technology, but in the end we decided that we didn’t need AMP, so the new site (release was 1 November 2017), there are no pages with AMP anymore. We can share the details of who is interested (contacts on the site).