AMP-страницы

AMP-страницы (Accelerated Mobile Pages) – это формат веб-страниц, разработанный компанией Google для ускорения загрузки контента и корректного отображения на мобильных устройствах. Данная технология поддерживается браузерами Google Chrome, Opera, Mozilla Firefox и другими.

Примеры AMP-страниц

Особенности AMP-страниц

Преимущества и недостатки AMP-страниц

Как внедрить AMP-страницы на сайт

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

Вопросы-ответы

Особенности AMP-страниц

Отметим основные особенности AMP-страниц.

• Они используют упрощенный и облегченный код HTML, CSS и ограниченный набор JavaScript без сторонних ресурсов для быстрой загрузки контента.
• AMP-страницы кэшируются на серверах Google, чтобы загружаться мгновенно при последующих заходах.
• Для эффективной работы с ресурсами используется AMP JS библиотека.
• Все элементы (изображения, видео и т. д.) оптимизируются для мобильных устройств.
• Контент подгружается асинхронно.
• Размер всех элементов контента определяется до загрузки, и место под них выделяется заранее.
• На AMP-страницах есть встроенные инструменты аналитики и объявлений.

Преимущества и недостатки AMP-страниц

Плюсы использования AMP-страниц включают следующие:

• высокая скорость загрузки. За счет оптимизированного кода, использования принципа above the fold и кэширования на серверах повышается производительность, и AMP-страницы грузятся практически мгновенно;
• приоритет в мобильной выдаче. Такие страницы отображаются в топе результатов поиска на смартфонах и планшетах в виде специального блока. Это увеличивает трафик с мобильных устройств и привлекает больше посетителей на сайт;
• улучшение пользовательского опыта. Быстрая загрузка может увеличить удовлетворенность посетителей, уменьшить отказы и повысить вовлеченность;
• встроенные инструменты аналитики. В AMP есть настроенные решения для веб-аналитики, благодаря которым можно собирать статистику без дополнительных скриптов;
• повышение конверсии. Мгновенная загрузка контента повышает шанс, что пользователь дочитает статью до конца или совершит целевое действие;
• повышение рейтинга в Google Mobile Top Stories. AMP-сайты могут быть показаны в этой популярной категории Google;
• совместимость с Google AMP Viewer. Такие страницы могут быть открыты с помощью Google AMP Viewer, который позволяет пользователям быстро просматривать контент без необходимости загружать весь сайт.

Однако у этих станиц есть и минусы.

• Ограниченный функционал и дизайн. AMP не поддерживают скрипты, сложные анимации, всплывающие окна, поэтому страницы получаются достаточно простыми.
• Сложность реализации. Их создание и поддержка может потребовать дополнительных усилий, поскольку необходимо добавлять код отслеживания вручную на каждую страницу.
• Ограниченная рекламная монетизация. Несмотря на поддержку Google, у AMP-страниц ограничены используемые типы рекламы. Кроме того, возникают сложности с обработкой сторонних рекламных сетей.
• Сложности в работе с плагинами и сторонними инструментами. Использование плагинов или инструментов сторонних разработчиков на AMP-страницах может вызвать затруднения.
• Ограничения поддерживаемых устройств и браузеров. AMP-технология контролируется Google и работает только на устройствах, поддерживающих его.

Как внедрить AMP-страницы на сайт

Для подключения AMP-страниц на сайт выполните эти шаги.

1. Зарегистрируйтесь в Google Developers Console и создайте новый проект.
2. Установите на свой сайт библиотеку AMP. Она включает в себя компоненты и шаблоны для создания AMP-страниц.
3. Установите необходимые плагины для их разработки в используемой CMS (WordPress, Joomla и т. д.) или воспользуйтесь онлайн-конструкторами AMP, такими как amp.dev, AMP-cloud, Appypie и другие.
4. Создайте шаблон AMP-страницы или используйте готовый и разработайте структуру файловой системы. Каждая такая страница должна иметь свой HTML-файл.
5. Перепишите существующие страницы сайта с использованием тегов AMP HTML. При этом нужно избавиться от всех скриптов, использовать только оптимизированные изображения и медиафайлы.
6. Добавьте ссылки canonical и AMP HTML между обычными и AMP-страницами для корректной индексации.
7. Протестируйте страницы на валидность AMP-кода.
8. Добавьте страницы в файл robots.txt, чтобы разрешить индексацию поисковикам.
9. Опубликуйте AMP-страницы на своем сайте. Обратите внимание, что они могут существовать параллельно с обычными HTML-страницами, и у пользователей будет возможность выбрать, какую версию они хотят увидеть.
10. Отслеживайте и анализируйте производительность AMP-страниц с помощью инструментов аналитики и SEO, чтобы убедиться, что они положительно влияют на показатели сайта. Оптимизируйте их при необходимости.
11. Используйте инструменты веб-аналитики, чтобы отслеживать эффективность AMP-страниц по сравнению с обычными.
12. Проводите регулярный мониторинг и обновляйте AMP-страницы при изменениях на сайте.

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

Чтобы проверить корректность AMP-страниц, можно использовать следующие способы и инструменты:

• Google AMP Validator. Официальный сервис от Google для проверки валидности кода и соответствия стандартам AMP. Можно протестировать отдельную страницу, вставив ссылку на нее или загрузив HTML-файл. Инструмент выдает подробный отчет об ошибках;
• Google Search Console. Предоставляет информацию о статусе индексации AMP-страниц и показателях их видимости в результатах поиска Google;

• Тест скорости загрузки. Измерить реальное время загрузки AMP-страницы на мобильном устройстве можно с помощью инструмента PageSpeed Insights. Скорость не должна быть медленнее 1 секунды.
• Проверка вручную. Проверьте все необходимые мета-теги и атрибуты в коде вашей AMP-страницы, чтобы убедиться, что они правильно установлены и соответствуют требованиям.
• Мобильный UX. Откройте AMP-страницу на разных мобильных устройствах и убедитесь, что она правильно отображается и быстро загружается на каждом из них.
• Аналитика. Сравните основные метрики посещаемости, времени, проведенного на сайте, отказов для AMP и обычных страниц.