AMR. What it is and what it eats?

General information


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


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


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



Pages AMP are ranked higher than other search queries from due to the fact that you meet the requirements for fast boot and adapted for mobile devices.


In fact, all these pages are static or relatively dynamic, as it allow you to use a form submission and iframe.


applications: news sites and portals; directories (without using filters); lightweight mobile version of the site (if meets functionality); page-leads to interest the user and entice to the main site.

Next, let's talk about the main features of the AMP.


No custom scripts


the First and most important difference from standard sites — it is impossible to insert the "normal" scripts. That is a big part of functionality is tied to the dynamic change (action on click, animations, filtering, modal) becomes unavailable.


Solution — use of available components, and iframe.


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


With their help it is possible to make the sidebar, carousel, submit the form, loadable content, advertising, etc.
Each component is associated with its js library you want to connect to use on the website.


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



the absence of the usual <img> tags in the document.


All images on the page should be described in a specific tag <amp-img>, which makes it difficult to insert the images by the user using a text editor. For other elements, where the output images written by hand, is sufficient to improve the layout. Also, if you use carousel or lightbox, you need to insert the analogues of the components.



the page code should not be inline-styles


Another feature, which should relate first and foremost a text editor, since the edit styles there is inline. Elements with attributes of type style=“color:...” are not valid, and change the color or font size will record this property in code.



Structured data schema (structured data)


To enable compilation of articles in “Top stories google” pages should be added to the schema of the data with brief information about the articles, author, publisher, company logo, and date of publication, and changes to the article.


Using structural data is not a prerequisite, but in order for the search to correctly display the data and change when you edit, you need to place this scheme on the website. Actually use AMP without this scheme becomes meaningless.


the 
<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 mandatory. For structural schema also has its own validator. Information to complete and required fields for schema of type “article” can be viewed here.


you can also find information on other types of schemes. (Books, Courses, Music, Podcasts, Recipes, Reviews, TV and Movies, Video)


Some features:


the
    the

  • company Logo
    There are a number of requirements for the logo:
    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 60x600px at least one of the parties. It is desirable to maintain a height of 60px (for example, 450x60px). Image smaller but in the same proportions that 60x600px (e.g. 450x45px), the test will not pass.


    • the
  • date of publishing and date of change
    Publication date is a required parameter.
    Date change — recommended.
    Although I would consider both options mandatory, as Google caches the content of the articles, and to know when he will check all the articles on the site again, it is impossible. Therefore, if the last modified date will be different, the search will be simpler to understand what you need to make a new cache. Otherwise it is possible that the user will not see important changes.


Links to canonical and opposite to it


the search engine and realized 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 to be 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 — interesting technology, but only for a narrow task. Can be used to "light" mobile version of the site, or for certain sections that do not require high functionality. A good solution for news sites, blogs, online magazines. Where you need to convey to the user the content quickly and in a simple manner. For large and complex projects AMP will not replace the mobile or responsive version, at least at this stage.


part of the functionality I was able to implement on our website IT company very clear & loud sounds, in the news section (example) (adaptive picture, shape, text, structured data; in addition, if the opportunity arises, this article will be taken to the gallery “Top stories”).


all articles & AMP in the search results Google adds the icon AMP, and from mobile devices in the first place shows the AMP page. In addition, they are ranked higher than the page without using the AMP.

Article based on information from habrahabr.ru

Комментарии

Отправить комментарий

Популярные сообщения из этого блога

Templates ESKD and GOST 7.32 for Lyx 1.6.x

Изображение
for more than six months I use a word processor Lyx. Built-in templates is more than enough to write lecture notes, prepare for seminars and to do simple reports for laboratory work. But last semester I had to make two course of the project in accordance with the requirements ESKD. I have begun work in Lyx, but without special templates of documents, my reports in the editor looked like this: A little work, a little reading of the document "Customizing LyX: Features for the Advanced User" and it turned out where the beam: You can use immediately. If you have experience of working in Lyx, problems will not arise. Just in case the attached sample documents. Description of how to make such templates are not yet doing. Someone will ask — will tell. ESKD Screenshot menu select unit type: Group "sections and subsections" appeared due to the fact that the document can be sections with sections without subsections — for their handling of para...
Далее...

Monitoring PostgreSQL + php-fpm + nginx + disk using Zabbix

Изображение
a Lot of information in the network according to Zabbix, and a lot of bespoke templates, I want to introduce to the audience his modification. Zabbix is a very convenient and flexible monitoring tool. Want a hundred monitor, I want a thousand stations, and do not want to — watch a single server, take the cream in all sections. I would not mind to give to github, if anyone collects similar. It so happened that we decided to put on the hosting database wrapper php-fpm+nginx. As the database is postgres. Thoughts to collect data on the machine was before the purchase of hosting is needed, this is useful! Magic kick up the backside to the implementation of the system gave the brakes a hard drive on our VDS stations at the beginning of the script every minute, put the time and measured by the speed in the file, and then build graphs in Excel to compare to as it was/became, take quantitative statistics. And this is just one option! And suddenly the fault is not VDS, and our a...
Далее...

Custom table in MODx Revolution

Изображение
In this article we will examine the following questions: the Creating custom tables for MODx Revolution. the Generation of XML schema and php files classes for xPDO. the Work with custom tables. One of the biggest difficulties in migrating from Evolution to Revolution — an xPDO IMHO. After all, as was previously just got into the muscle via phpMyAdmin, created a sign, and work with it, sending pure SQL queries through $modx->db. Now any changes to the database do not much bother $modx except full drop tables, etc. As linked xPDO and MODx (or rather $modx), I wrote here . Consider the difficulties in working with custom tables in MODx Revolution — a considerable obstacle for many programmers. But really, it's not so difficult. All of the following, the algorithm in three words: the via phpMyAdmin (or other convenient tool to use) to create the needed tables the Using the attached code is generated for the necessary work xPDO files the Using the $...
Далее...