Что такое Google AMP и как его использовать для моего сайта?

AMP — это платформа для создания быстрых мобильных сайтов, и в настоящее время она обеспечивает более 43% результатов поиска. Переключение вашего сайта на AMP может дать вам огромный прирост трафика. Как это работает?

Что такое AMP?

Если вы когда-либо открывали новостную статью из результатов поиска Google на своем телефоне, вы, вероятно, уже сталкивались с AMP. Он кэшируется Google, поэтому строка URL начинается с «www.google.com/amp» и имеет заголовок с фактическим названием веб-сайта и ссылку на страницу без AMP:

Вы также могли заметить, что страница загружается мгновенно (или почти мгновенно). Это AMP, и он обеспечивает передовые возможности мобильных веб-сайтов.

На самом деле AMP — это фреймворк веб-компонентов, похожий на React, Angular или Vue. Но в то время как эти фреймворки ориентированы на веб-приложения с широкими возможностями настройки, AMP разработан как облегченный фреймворк для мобильных страниц. Для этого многое урезано, и у этого есть свои ограничения. Это с открытым исходным кодом, и вы можете использовать его без участия Google, но интеграция AMP с Chrome и Google Search делает его намного быстрее, чем любой другой фреймворк.

AMP достаточно распространен, поэтому файл скрипта, используемый для его загрузки, скорее всего, уже кэширован. Google даже выполняет предварительную визуализацию некоторого контента AMP еще до того, как вы нажмете на него, что может привести к почти мгновенной загрузке страниц. Также есть интеграция с Google Search , которая будет отображать вашу страницу в специальном поле, а не только в списке результатов, и любая страница с поддержкой AMP будет отображаться с молнией рядом с именем:

А для таких вещей, как новостные статьи, они могут отображаться в карусели результатов с поддержкой AMP:

Молния снова находится в углу каждой коробки со статьями. Эта карусель основана на структурированных данных, которые фактически необходимы для того, чтобы ваши AMP-страницы отображались в Google.

Как работает AMP?

AMP реализует свои собственные оптимизированные HTML-элементы и заставляет вас их использовать. Например, традиционные изображения представляют собой две основные проблемы: загрузка изображения изменяет макет страницы (требующий дорогостоящего пересчета), а AMP требует ленивой загрузки изображений. Вместо обычного тега вам потребуется использовать :

<amp-img src="welcome.jpg" alt="Welcome" height="400" width="800"></amp-img>

Есть много подобных компонентов для самых разных вещей, включая видео, рекламу и динамический контент. Однако браузеры не знают, как обрабатывать эти компоненты, поэтому, чтобы это работало, вам нужно загрузить:

<script async src="https://cdn.ampproject.org/v0.js"></script>

Есть немного больше шаблонов, таких как настройка адаптивного окна просмотра и ссылка на обычную HTML-версию страницы, которую вы можете просмотреть в документации AMP. Вы должны включить все это, иначе ваша AMP-страница не будет соответствовать стандартам Google.

Google кэширует ваш AMP-сайт и предварительно загружает его, чтобы сократить время загрузки, и это здорово, но из-за этого в строке URL будет отображаться google.com в качестве домена, а не имя вашего сайта, где на самом деле находится страница. размещен. По умолчанию ваш сайт будет отображаться в средстве просмотра AMP, но вы также можете использовать Signed Exchange, который позволяет обойти дополнительные URL-адреса. При подписанном обмене вы подписываете контент сертификатом TLS, подтверждая, что он исходит из вашего домена. Как только вы сможете это проверить, браузер сможет отображать URL-адрес вашего сайта, даже если он все еще кэшируется и обслуживается из CDN Google.

Ограничения AMP

Хотя это, безусловно, быстро, есть много ограничений. AMP сильно ограничивает использование JavaScript; весь JavaScript выполняется асинхронно, и вы можете использовать любой пользовательский JavaScript (кроме , хотя эта функциональность все еще является экспериментальной). Вам нужно будет использовать их компоненты, чтобы сделать ваш сайт интерактивным. Однако AMP может многое; amp-list извлекает контент из конечной точки JSON и отображает его в шаблоне, что нетривиально для ванильного JS.

AMP позволяет избежать повторных расчетов стиля и макета в пользу оптимизированного конвейера рендеринга, что накладывает некоторые ограничения. Все ресурсы должны иметь статический размер, что означает отсутствие изменения размера с помощью CSS. Все CSS должны быть встроенными (в заголовке, а не во внешнем файле) и ограничены максимальным размером 50 КБ. Вы также не можете использовать модификатор !important в CSS, так как он может перезаписать обязательный стиль AMP.

Это делает AMP очень ориентированным на мобильные устройства, поскольку с его помощью невозможно создать сложное веб-приложение. Но для того типа контента, на который он ориентирован (новости, статьи, все, для чего вы запускаете WordPress), он работает очень хорошо.

Как мне «AMP» мой сайт?

Вы не замените свой обычный сайт полностью, поэтому вам нужно будет переделать свой сайт в AMP, сохранив при этом старый сайт. AMP требует, чтобы вы ссылались на не-AMP-страницу канонической ссылкой, именно так вы делаете ее видимой для Google.

AMP предоставляет множество шаблонов для начала. Поскольку он предназначен только для мобильных устройств (хотя и не ограничивается ими), ваш дизайн в целом будет намного проще. Вы можете просмотреть их каталог компонентов, чтобы понять, какой контент поддерживает AMP, и как вы можете перевести свой сайт на него.

Если вы используете WordPress, вы можете внедрить AMP с помощью плагина, из которых есть два популярных — официальный плагин и сторонний плагин с большим количеством функций. Это создаст уменьшенные версии каждой статьи, готовые для индексации Google.

Еще одна вещь, которая требуется от вас, — предоставить структурированные данные о вашей странице AMP. По сути, это какой-то JSON в заголовке вашей страницы, который сообщает Google о странице. Вы можете использовать их инструмент проверки структурированных данных, чтобы убедиться, что ваши данные действительны, что также даст вам хороший предварительный просмотр того, как Google интерпретирует ваш контент. Убедитесь, что тип, заголовок, описание и изображение совпадают и ведут в нужные места.

Вы должны использовать инструмент проверки AMP от Google, чтобы проверить свой синтаксис, который сообщит вам, действительна ли ваша страница AMP, а также покажет вам предварительный просмотр того, как ваш сайт будет отображаться в результатах поиска в зависимости от типа результата:

Затем, когда вы будете готовы начать работу с AMP, добавьте ссылку на AMP-версию каждой страницы в head вашего обычного сайта, используя rel=\amphtml\:

<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">

Тогда ваши AMP-страницы будут доступны для обнаружения и появятся в результатах поиска (хотя Google может занять некоторое время, чтобы догнать их). Было бы неплохо отправить обновленную карту сайта через консоль поиска, чтобы прямо сообщить Google, что вы включили AMP и создали AMP-версии всех своих страниц.