Начните искать ключевые слова

Используйте Serpstat, чтобы находить лучшие ключи

How-to, 3 мая 2019 | 24476 1 | Читать 10 минут – Прочитать позже

Настройка AMP-страниц на сайте: как избежать ошибок

АУДИТ САЙТА — СКОРОСТЬ ЗАГРУЗКИ

Инструкцию одобрил
Head of SEO в Ольшанский и Партнеры

Алексей Матвейчук

AMP-страницы позволяют быстрее загружать сайт на портативных устройствах. Ресурс при этом получает более высокие позиции в мобильной выдаче. Для правильной работы AMP-страниц необходимо корректно использовать HTML-теги, CSS и JavaScript-код.

Что такое AMP страницы

Accelerated Mobile Pages — технология, разработанная Google, которая позволяет создавать мобильные страницы, максимально оптимизированные под мобильные устройства. Данные страницы отличаются от обычных наличием специальных тегов, более компактным кодом и подключением JavaScript-библиотеки, что позволяет быстрее загрузить страницы на мобильных телефонах или планшетах.

Данные страницы загружаются в Google AMP Cache, а затем при необходимости передаются на портативное устройство сразу с него. В данном случае Google берет на себя роль CDN (Content Delivery Network) — сети серверов со специализированным программным обеспечением, ускоряющим передачу контента пользователям.

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

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

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

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

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

на ускоренных страницах должен быть доступен тот же контент и функционал, который присутствует на стандартных страницах;
для AMP-страниц должны использоваться понятные URL-адреса, сходные с каноническими страницами. Например, при основном адресе site.ru/news для ускоренной страницы можно использовать URL amp.site.ru/news;
для добавления структурированных данных нужно следовать описанным Google правилам;
страницы должны создаваться в соответствии с AMP HTML спецификацией;
чтобы были доступны все возможности AMP-страниц, необходимо использовать HTTPS-протокол;
перед публикацией необходимо проверить AMP-страницы на ошибки:

Страницы Google AMP: настройка шаг за шагом

Страница должна начинаться с объявления <!doctype html>.

Далее добавляется тег <html ⚡> либо <html amp>.

AMP-страница должна содержать разделы <head> и <body>. Раздел <head> должен начинаться таким образом:

<meta charset="utf-8">

Далее указывается ссылка на каноническую страницу:

<link rel="canonical" href="https://site.ru/some-canonical-page.html">

Затем заполняется мета тег viewport:

<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">

Данный тег используют, чтобы установить ширину и начальный масштаб для окна просмотра на портативных устройствах.

Следующий элемент — AMP Boilerplate код. Этот код предназначен, чтобы скрывать страницу до тех пор, пока она не будет полностью отображена, а затем затемнять ее для улучшения производительности. Используется Google для установки порядка парсинга DOM и CSSOM.

Последний обязательный элемент раздела <head>:

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

Созданная страница должна иметь такой вид:

Генераторы AMP-страниц

Содержимое тега <body> AMP-страницы, созданной согласно изложенной выше инструкции, можно заполнить вручную либо сгенерировать в автоматическом режиме.

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

Mobilizetoday

Для получения AMP-страницы нужно ввести URL-адрес и нажать «Поехали!». После обработки можно скопировать полученный HTML-код:

AMP Boilerplate Generator

Позволяет получить шаблон AMP-страницы, настроив его исходя из выбранных параметров:

Mercury

Позволяет создать AMP-страницу, добавив только одну строчку кода:

HTML &AMP — правила использования тегов

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

Теги HTML для AMP делятся на три группы:

Те, которые можно использовать в исходном виде по определенным правилам. Например, можно добавить тег <a>, но он обязательно должен содержать атрибут target="_blank".

Модифицированные. Наиболее популярные AMP-теги: <amp-img> — добавление изображения, <amp-video> — видео, <amp-audio> — аудиофайла.

Запрещенные. Сюда относятся теги <frame>, <project>, <applet> и другие.

JavaScript &AMP — правила использования

Добавление пользовательских java-скриптов на AMP-страницы с помощью тега <script> запрещено. Можно только добавлять AMP runtime в раздел заголовков с помощью загрузки данного скрипта:

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

Чтобы добавить на ускоренную страницу интерактивные функции, используют только специальные элементы AMP, сходные по своим свойствам с JS, но при этом не влияющие негативно на скорость загрузки;
допустимо использовать сторонние JS-скрипты в элементах iframe, потому что там они не уменьшают скорость загрузки страницы;
при использовании тега <a> в AMP стоит помнить, что в его начало нельзя добавлять «javascript:».

Устаревшие элементы AMP

По состоянию на апрель 2019 года устаревших тегов в спецификации AMP нет. Однако на будущее в спецификацию добавлен вариант ошибки «Неподдерживаемые элементы», если будут применяться не поддерживаемые более теги (DEPRECATED_TAG).

Аналогичная ошибка будет отображаться в консоли разработчика Chrome при использовании в тегах не поддерживаемых атрибутов (DEPRECATED_ATTR).

Для исправления данных ошибок необходимо будет удалить устаревшие элементы и заменить их на современные, согласно действующей спецификации AMP.

Ошибки в таблице стилей CSS

Для AMP используют более строгие шаблоны, чем для стандартных HTML-страниц. Более быстрая загрузка реализуется за счет ряда ограничений. Нужно учитывать, что у каждого тега, отображаемого на странице, есть собственные шаблоны. Чтобы контент корректно загружался, должны прописываться корректные размеры.

Существуют следующие ошибки AMP, связанные с таблицами стилей:

STYLESHEET_TOO_LONG — таблица стилей превысила допустимый лимит размера в 50000 байт. В таком случае необходимо уменьшить содержимое тега <style amp-custom> до допустимой величины;
CSS_SYNTAX — синтаксическая ошибка в таблице стилей. Нужно исправить ошибку в указанном месте;
CSS_SYNTAX_INVALID_AT_RULE — использование недействительного правила. Необходимо исправить ошибку, относящуюся к директивам CSS.

Заключение

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

Эта статья — часть модуля «Аудит сайта» в Serpstat

Аудит всего сайта или отдельной страницы в один клик. Полный список ошибок, отсортированный по критичности, пути их устранения и рекомендации. Любая периодичность проверки и автоматическая рассылка отчетов на почту.

Запустить аудит сайта

Serpstat — набор инструментов для поискового маркетинга!

Находите ключевые фразы и площадки для обратных ссылок, анализируйте SEO-стратегии конкурентов, ежедневно отслеживайте позиции в выдаче, исправляйте SEO-ошибки и управляйте SEO-командами.

Набор инструментов для экономии времени на выполнение SEO-задач.

7 дней бесплатно

Оцените статью по 5-бальной шкале

4 из 5 на основе 13 оценок

Нашли ошибку? Выделите её и нажмите Ctrl + Enter, чтобы сообщить нам.

Используйте лучшие SEO инструменты

Подбор ключевых слов

Поиск ключевых слов – раскройте неиспользованный потенциал вашего сайта

Возможности Serpstat

Возможности Serpstat – комплексное решение для эффективного продвижения вебсайтов

Кластеризация ключевых слов

Кластеризация ключевых слов автоматически обработает до 50 000 запросов в несколько кликов

SEO аудит страницы

Проанализируйте уровень оптимизации документа используя SЕО аудит страницы