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

Нажав кнопку "Принять и продолжить", вы соглашаетесь с Политики конфиденциальности

Принять и продолжить

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

Отменить
1002
How-to Читать 7 минут 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-генераторы:
Генератор AMP-страниц Mobilizetoday
Для получения AMP-страницы нужно ввести URL-адрес и нажать «Поехали!». После обработки можно скопировать полученный HTML-код:
Как создать AMP страницу в генераторе
Позволяет получить шаблон 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
Аудит всего сайта или отдельной страницы в один клик. Полный список ошибок, отсортированный по критичности, пути их устранения и рекомендации. Любая периодичность проверки и автоматическая рассылка отчетов на почту.
Запустить аудит сайта

Сэкономьте время на изучении Serpstat

Хотите получить персональную демонстрацию сервиса, тестовый период или эффективные кейсы использования Serpstat?

Оставьте заявку и мы свяжемся с вами ;)

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

5 из 5 на основе 2 оценок
Нашли ошибку? Выделите её и нажмите Ctrl + Enter, чтобы сообщить нам.
Хотите узнать новые фишки по интернет-маркетингу?
Подпишитесь на нашу рассылку — только полезные статьи, реальные кейсы и новости Serpstat раз в неделю.

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

Войти Регистрация

Вы исчерпали лимит запросов.

Или email
Забыли пароль?
Или email
Back To Login

Не волнуйтесь! Напишите свой электронный адрес и мы пришлем вам новый пароль.

Вы уверены?

Awesome!

To complete your registration you need to enter your phone number

Назад

Мы отправили код подтверждения на ваш номер телефона

Your phone Resend code Осталось запросов

Что-то пошло не так.

Свяжитесь с нашей службой поддержки
Или подтвердите регистрацию с помощью Телеграм бота Перейдите по этой ссылке
Выберите один из проектов

Знакомство с сервисом

Ознакомьтесь с основными возможностями Serpstat удобным способом!

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

Имя

Email

Телефон

Будем рады вашему комментарию
Увеличить лимиты

Улучшить тариф

Экспорт недоступен для вашего тарифного плана. Вам необходимо улучшить свой тариф до Lite или выше, чтобы получить доступ к инструменту Подробнее

Зарегистрироваться

Спасибо, мы с вами свяжемся в ближайшее время

Пригласить
Просмотр Редактирование

E-mail
Сообщение
необязательно
E-mail
Сообщение
необязательно

У вас закончились лимиты

Вы достигли лимита на количество созданных проектов и больше не можете создавать новые проекты. Увеличьте лимиты или удалите существующие проекты.

Я хочу больше лимитов