Что такое AMP HTML и как проверить его внедрение

Использование мобильных устройств для выхода в интернет давно стало привычным делом: более половины запросов Google осуществляются именно со смартфонов. Главным приоритетом для пользователей и важным фактором ранжирования является скорость загрузки страниц.

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

В этом посте я расскажу, как внедрить AMP и проверить его правильность.

Что такое AMP HTML и для чего используется?

AMP (Accelerated Mobile Pages) HTML — технология ускорения мобильных страниц, которая позволяет создать их облегчённую версию, сохраняя лишь значимый контент. Для страниц в формате AMP HTML Google «урезает» 90% кода, за счёт чего вес страницы уменьшается, как и скорость загрузки. Это и является главным преимуществом AMP. Также благодаря внедрению AMP сайты получают следующие плюсы:

• увеличивается шанс попасть в «карусель» в топе мобильной выдачи;
• улучшается ранжирование;
• растёт мобильный трафик сайта.

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

В браузере AMP-версии выглядят так:

Кому нужно внедрять на своём сайте AMP HTML:

• издателям;
• рекламодателям;
• технологическим платформам (SSP, DSP, сервисы аналитики).

Требования к AMP HTML

Для применения технологии AMP необходимо учитывать следующие рекомендации:

• использование только асинхронных скриптов;
• размер изображений, рекламных баннеров и других визуальных элементов задаются в HTML-коде;
• размер стилей не превышает 50 КБ;
• произвольный JavaScript-код не применяется.

Google диктует следующие требования применения AMP:

1. AMP-страницы должны соответствовать заявленным требованиям AMP Project.
2. Контент на страницах AMP должен соответствовать контенту на полноценных версиях.
3. URL AMP-страниц необходимо оптимизировать и делать понятными для посетителей.
4. Для правильной работы страницы с технологией AMP необходимо проверять в сервисе AMP Validator.
5. На AMP-версиях должны стоять атрибуты rel=canonical с ссылками на полноформатные версии. Пример ссылки на 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”>

Как создать AMP-версию своего сайта

Создать AMP-версию каждой страницы можно вручную по готовым шаблонам или же настроить генерацию в системе управления контентом (CMS). Во многих CMS данная функция доступна «из коробки». На сайте AMP: Accelerated Mobile Pages Project вы можете ознакомиться с пошаговой инструкцией для создания страницы AMP HTML.

Следует отметить, что далеко не все страницы нуждаются в создании AMP-версии —  в основном те, на которых размещён текстовый контент или новостные статьи.

Как проверить AMP-страницы

Способ 1

С помощью сервиса в Google Search Console. Для этого поместите URL в строку и нажмите «Проверить».

Дождитесь окончания анализа. Если на странице не внедрена технология AMP, вы увидите такое оповещение:

Если страница имеет AMP-версию, об этом сервис уведомит следующим сообщением:

Способ 2

С помощью краулера. Мы покажем, как выполнить проверку с помощью Netpeak Spider. Программа даёт ссылки на AMP-версии страниц и определяет ошибку «Неправильный формат AMP HTML», если AMP-страницы не отвечают стандартам AMP Project.

Алгоритм проверки следующий. Отметьте пункт «AMP» в разделе «Параметры».

В адресную строку введите URL анализируемого сайта и нажмите «Старт».

По итогу сканирования перейдите к столбцу «AMP HTML» в таблице. Значение TRUE говорит о том, что у страницы есть AMP-версия, значение FALSE говорит об обратном.

Выгрузите отфильтрованные результаты, нажав «Экспорт» → «Результаты в текущей таблице» в главном меню программы или в правом верхнем углу окна, после чего передайте данные веб-разработчику.

Подводим итоги

На сегодняшний день адаптация страниц под мобильные устройства стала необходимостью для сайтов, которые хотят хорошо ранжироваться в выдаче. Одним из удобных методов оптимизации страниц под смартфоны является применение технологии AMP HTML, которая «облегчает» страницы, за счёт чего ускоряется их загрузка. Перед внедрением технологии необходимо ознакомиться с требованиями, соблюдение которых позволит корректно настроить AMP-страницы:

• Использование только асинхронных скриптов.
• Размер изображений, рекламных баннеров и других визуальных элементов задаются в HTML-коде.
• Размер стилей не может превышать 50 КБ.
• Произвольный JavaScript-код не применяется.

Для проверки правильности настроек отдельных страниц вы можете использовать сервис в Google Search Console. А с проверкой всех страниц сайта и поиском ошибок отлично справится краулер Netpeak Spider.

Результативное продвижение сайта в Днепре можно обсудить по контактам внизу страницы.