Общая информация
Как работает AMP? Суть технологии состоит в использовании специальных тегов, которые ограничены в количестве и функциональности. Разработчики при этом должны выбрать из доступных решений те, которые помогут лучшим образом решить проблемы клиентов.
Google ищет эти специальные теги, находит в них нужную информацию и кеширует её на своей стороне. Впоследствии, при поиске по определенных запросах, веб-браузер подгружает данные CDN Google в специальный блок iframe, а после нажатия на ссылку он открывает нужную страницу в специальном окне.
Страницы с Google AMP ранжируются выше, чем другие, именно тогда, когда они значительно улучшают скорость загрузки сайта. Важно помнить, что Google НЕ говорил о том, что AMP страницы будут ранжироватся выше в результатах поиска. Значимыми факторами являются именно скорость загрузки и удобство использования на мобильных устройствах, и AMP – это лишь один из возможных инструментов, для достижения этих целей.
AMP-страницы или ускоренные мобильные страницы Google имеют статический или условно-динамический характер. Через них можно осуществить отправку форм и использовать iframe.
AMP имеет широкую сферу применения: сайты и порталы новостей; каталоги (без подключаемых фильтров); легковесные мобильные версии сайтов (если они могут удовлетворить требования функционала); страницы лидов, которые хотят привлечь целевую аудиторию и заманить её на главный веб-ресурс.
Давайте теперь обсудим главные отличия AMP сайтов.
Отсутствие настраиваемых скриптов
Самое важное отличие AMP-ресурсов от обычных сайтов состоит в невозможности вставки «нормальных» скриптов. Из-за этого функциональные возможности, которые дают возможность создавать динамические изменения (действия по клику, анимационные эффекты, использование фильтров, модальные окна), становятся недоступными.
Единственным выходом здесь может стать использование доступных составляющих и средств iframe. Доступные компоненты позволяют отчасти использовать привычные функции, которые лучше заменить и оптимизировать, чтобы всё загружалось быстрее. Благодаря им вы можете сконструировать боковую панель, карусель, отправлять формы, загружать контент, рекламу и многое другое. Каждый компонент имеет привязку к своей js-библиотеке, которая должна интегрироваться для её оптимальной работы на сайте. Все доступные типы компонентов с примерами их использования можно найти на этом сайте.
Отсутствие стандартных тегов в документе
Все изображения на странице должны быть заключены в специальные теги, что усложняет вставку изображений через текстовый редактор. Для других элементов, где вывод картинок делался «руками», достаточно исправления самого макета веб-страницы. Такая же ситуация, и при использовании каруселей либо лайтбоксов, вам также понадобится вставлять аналоги этих компонентов.
Запрещено использование встроенных стилей
Другая функция будет иметь первостепенное влияние на текстовый редактор, поскольку редактирование стилей является встроенным. Элементы с такими атрибутами, как style = “color: …” будут не валидными, а изменение цветов либо размеров шрифтов будут вносить такие свойства в код.
Структурированные данные
Если вы хотите включить статью в перечень «Лучших историй Google», стоит добавить на страницу микроразметку, которая включают краткую информацию о статьях, авторах, логотипе компании, а также датах размещения и редактирования статьи.
Использование структурированных данных не является обязательным условием, но если вы хотите, чтобы поисковая система отображала данные и изменяла их при редактировании, то необходимо разместить схему на сайте. По правде говоря, применение технологии AMP без внедрения этой схемы является пустой тратой времени.
Пример использования схемы данных для страниц типа «статьи»:
<script type = "application / ld + json">
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"mainEntityOfPage": {
"@type": "WebPage",
"@id": "http://test.sitechecker.pro/article"
},
"headline": "Article headline",
"image": {
"@type": "ImageObject",
"url": "http://test.sitechecker.pro/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": "Aleksandr Markovich"
},
"publisher": {
"@type": "Organization",
"name": "Sitechecker",
"logo": {
"@type": "ImageObject",
"url": "http://test.sitechecker.pro/logo.jpg",
"width": 600,
"height": 60
}
},
"description": "Why should you use AMP pages?"
}
</ script>
Некоторые пункты обязательны для использования. Схема структурированных данных использует также специальный инструмент валидации. Данные для заполнения обязательных полей Схемы «Статья» можно найти здесь. Там же вам доступна информация и о других типах схем (для рецептов, обзоров, книг, курсов, музыки, телевиденья и фильмов, подкастов, видео).
Некоторые функции:
Логотип компании
К логотипу выдвигается несколько требований. Его размер не должен превышать и быть не менее 60 × 600 пикселей. Но лучше всего использовать высоту 60 пикселей (к примеру, 450 × 60 пикселей). Картинки с меньшими размерами, но с аналогичными к 60x600px пропорциями (к примеру, 450x45px), не пройдут проверку. Что касается иконки сайта, то ее размер должен быть в пределах формата 32 × 32.
Дата публикации и изменений
Дату публикации указывать обязательно, хотя при этом рекомендуют также вписывать дату изменения. Обе указанные переменные обязательны, поскольку в поисковой системе Google кэшируется контент статей, и впоследствии невозможно узнать, когда ему снова нужно делать проверку перечня статей сайта. Поэтому, если дата последнего изменения отлична от даты публикации, поисковик узнает, что для сайта нужно сгенерировать новый кэш. А если произойдет по-другому, то может случится так, что из-за старого кэша пользователь не увидит важных изменений.
Канонические и противоположные к ним ссылки
Чтобы поисковая система понимала, что представленная страница является AMP-версией, она должна включать такую ссылку – каноникал:
<link rel="amphtml" href="https://www.example.com/url/to/amp/document.html">А на AMP странице должна присутствовать обратная ссылка:
<link rel="canonical" href="https://www.example.com/url/to/full/document.html">
CSS 50 kb
Стили CSS должны быть внутренними, а их размер не должен превышать 50 КБ.
Заключение
На крупных проектах со сложной структурой технологии AMP будет сложно заменить адаптивную мобильную версию сайта, по крайней мере на данный момент. На небольших блогах, онлайн-журналах и новостных сайтах, такой инструмент может быть внедрен значительно легче, и соответственно его ценность можно оценить значительно быстрее.
