23551 1
How-to Читать 10 минут 3 мая 2019

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

Как исправить ошибки в 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-страницы в выдаче Google
Для подобного отображения страницы должны соответствовать ряду требований. Если они не будут отвечать правилам AMP, поисковые системы могут их проиндексировать как обычные. Чтобы проверить страницы, можно использовать AMP-валидатор:
Валидатор AMP страниц

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

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

  • на ускоренных страницах должен быть доступен тот же контент и функционал, который присутствует на стандартных страницах;

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

  • для добавления структурированных данных нужно следовать описанным Google правилам;

  • страницы должны создаваться в соответствии с AMP HTML спецификацией;

  • чтобы были доступны все возможности AMP-страниц, необходимо использовать HTTPS-протокол;

  • перед публикацией необходимо проверить AMP-страницы на ошибки:
Проверка AMP страницы на ошибки

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

1
Страница должна начинаться с объявления <!doctype html>.
2
Далее добавляется тег <html ⚡> либо <html amp>.
3
AMP-страница должна содержать разделы <head> и <body>. Раздел <head> должен начинаться таким образом:
<meta charset="utf-8">
4
Далее указывается ссылка на каноническую страницу:
<link rel="canonical" href="https://site.ru/some-canonical-page.html">
5
Затем заполняется мета тег viewport:
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
Данный тег используют, чтобы установить ширину и начальный масштаб для окна просмотра на портативных устройствах.
6
Следующий элемент — AMP Boilerplate код. Этот код предназначен, чтобы скрывать страницу до тех пор, пока она не будет полностью отображена, а затем затемнять ее для улучшения производительности. Используется Google для установки порядка парсинга DOM и CSSOM.
7
Последний обязательный элемент раздела <head>:
<script async src="https://cdn.ampproject.org/v0.js"></script>
Созданная страница должна иметь такой вид:
Структура AMP страницы и ее HTML код

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

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

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

Mobilizetoday

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

AMP Boilerplate Generator

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

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

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

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

Теги HTML для AMP делятся на три группы:
1
Те, которые можно использовать в исходном виде по определенным правилам. Например, можно добавить тег <a>, но он обязательно должен содержать атрибут target="_blank".
2
Модифицированные. Наиболее популярные AMP-теги: <amp-img> — добавление изображения, <amp-video> — видео, <amp-audio> — аудиофайла.
3
Запрещенные. Сюда относятся теги <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.

Заключение

  1. AMP-страницы — инструмент, позволяющий опередить сайты-конкуренты в мобильной поисковой выдаче благодаря быстрой загрузке страниц.

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

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

  4. Чтобы созданные AMP-страницы попали в поисковую выдачу, стоит избегать синтаксических ошибок и не использовать запрещенные либо устаревшие теги.
Эта статья — часть модуля «Аудит сайта» в Serpstat
Аудит всего сайта или отдельной страницы в один клик. Полный список ошибок, отсортированный по критичности, пути их устранения и рекомендации. Любая периодичность проверки и автоматическая рассылка отчетов на почту.
Запустить аудит сайта

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Поделитесь статьей с вашими друзьями

Вы уверены?

Знакомство с Serpstat

Узнайте об основных возможностях сервиса удобным способом!

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

Имя

Email

Телефон

Будем рады вашему комментарию
Я принимаю условия Политики конфиденциальности.

Спасибо, мы сохранили ваши новые настройки рассылок.

Сообщить об ошибке

Отменить
Открыть чат технической поддержки
mail pocket flipboard Messenger telegramm