HomeFeedback Tracker

AMP. What is it and what is it eaten with?

general information

AMP is an accelerated mobile page technology developed by independent developers and actively promoted by Google in its search engine. Yandex has not yet joined this initiative, but I'm sure they will soon implement either this standard or come up with something similar in terms of the principle of operation.

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

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

Pages with AMP rank higher than other queries in search due to the fact that they meet the requirements for fast loading and are adapted for mobile devices. And if the AMP page URL contains an error (5XX), then check my reference and you should be able to fix the problem.

In fact, all such pages are static or conditionally dynamic, as they allow the use of form submissions, as well as iframes.

No custom scripts

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

The solution is to use available components and an iframe.

Available components allow you to achieve, albeit not complete, the implementation of familiar features, but they represent a worthy replacement for them 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 own js library, which must be connected in order to use it on the site.

Absence of normal <img> tags in the document.

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

Page code should not contain inline styles

One more feature that should be touched upon in the first place is the text editor, since style editing takes place inline there. Elements with attributes like style="color:..." are not valid, and changing the color or font size will write this property to the code.

Conclusion

AMP is an interesting technology, but only for narrow tasks. It can be used for a "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 content to the user as quickly and in a simple form as possible. For large and complex projects, AMP will not be a replacement for the mobile or responsive version, at least at this stage.

I managed to implement some of the functionality on the website of our IT company Wellsoft, in the news section (adaptive image, form, text, structured data; in addition, if such an opportunity arises, this article will fall into the “Top stories” gallery).

Google adds an AMP icon to all AMP articles in search results, and from mobile devices, first of all, shows AMP pages. Plus, they rank 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 don’t need AMP, so the new site (the release was on November 1, 2017) no longer has AMP pages.