О проверке AMP-страниц

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

Как проверить, соответствует ли страница критериям AMP

AMP-документ можно проверить несколькими способами, однако все они приводят к одному и тому же результату. Вы можете выбрать самый подходящий вариант.

Также вы можете проверить, находят ли AMP-документ сторонние платформы.

Консоль разработчика браузера

Инструмент AMP Validator содержит библиотеку JavaScript AMP, поэтому она по умолчанию доступна на всех AMP-страницах. Чтобы проверить AMP-страницу, выполните следующие действия:

Откройте AMP-страницу в браузере.
Добавьте к URL элемент #development=1, например так: http://localhost:8000/released.amp.html#development=1.
Откройте консоль разработчика Chrome и проверьте страницу на наличие ошибок

Ошибки будут выглядеть примерно так:

Веб-интерфейс

На сайте validator.ampproject.org реализован веб-интерфейс для инструмента AMP Validator. В нем показывается HTML-код страницы и ее ошибки. Интерфейс представляет собой интерактивный редактор: за внесением изменений в HTML-код следует повторная проверка страницы.

Расширение для браузера

Инструмент AMP Validator также можно использовать как расширение на панели инструментов браузера. Он автоматически проверяет все посещаемые AMP-страницы, а его значок меняет цвет в зависимости от результатов этой проверки.

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

Вы можете скачать расширение AMP Validator для браузеров Chrome и Opera.

Инструмент командной строки

Чтобы использовать этот инструмент, вам может потребоваться установить Node.js с помощью менеджера пакетов npm.

Чтобы установить инструмент командной строки AMP HTML Validator, введите команду npm install -g amphtml-validator.

Ниже указано, как проверить AMP-страницу в формате HTML.

$ amphtml-validator https://amp.dev/
https://amp.dev/: PASS

Как мы видим, HTML-код этой страницы соответствует требованиям AMP. Давайте проверим страницу several_errors.html, на которой есть ошибки. Чтобы выполнить команду amphtml-validator, следует указать URL страницы или имя файла на компьютере. Загрузите и сохраните several_errors.html в файл, а затем выполните следующую команду:

$ amphtml-validator several_errors.html
several_errors.html:23:2 The attribute 'charset' may not appear in tag 'meta name= and content='.
several_errors.html:26:2 The tag 'script' is disallowed except in specific forms.
several_errors.html:32:2 The mandatory attribute 'height' is missing in tag 'amp-img'. (see /ru/documentation/components/amp-img/)
several_errors.html:34:2 The attribute 'width' in tag 'amp-ad' is set to the invalid value '100%'. (see /ru/documentation/components/amp-ad/)
...

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

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

$ amphtml-validator minimum_valid_amp.html
minimum_valid_amp.html: PASS

В инструменте командной строки доступны и другие функции, в том числе отключение цвета, вывод на печать файлов в формате JSON и запуск определенной версии валидатора JavaScript (по умолчанию запускается последний опубликованный сценарий).

$ amphtml-validator --help

  Usage: index [options] <fileOrUrlOrMinus...>

  Validates the files or urls provided as arguments. If "-" is
  specified, reads from stdin instead.

  Options:

    -h, --help                  output usage information
    -V, --version               output the version number
    --validator_js <fileOrUrl>  The Validator Javascript.
      Latest published version by default, or
      dist/validator_minified.js (built with build.py)
      for development.
    --format <color|text|json>  How to format the output.
      "color" displays errors/warnings/success in
              red/orange/green.
      "text"  avoids color (e.g., useful in terminals not
              supporting color).
      "json"  emits json corresponding to the ValidationResult
              message in validator.proto.

Что произойдет, если страница не соответствует критериям AMP

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

Если инструмент AMP Validation выявит проблемы на вашей странице, он запретит ее обнаружение сторонними сайтами и кеширование с помощью сервиса Google AMP Cache. В результате у одних пользователей снизится скорость загрузки страницы, а у других она вовсе не будет показываться. О том, как этого избежать, читайте ниже.

Как устранить выявленные ошибки

Большинство ошибок легко обнаружить и устранить. Рассмотрим следующий тег HTML:

<img src="cat.png">

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

Консоль разработчика браузера
Веб-интерфейс
Расширение для браузера

Все эти инструменты предоставляют следующие данные:

Номера строки и столбца в документе HTML, где наблюдается ошибка. В некоторых интерфейсах можно нажать кнопку мыши и выделить место с ошибкой. В данном случае координаты ошибки таковы: строка 11, столбец 2.
Текстовую строку с описанием ошибки. В данном случае в строке указано, что вместо тега <amp-img> используется тег <img>.
Ссылку на документ с описанием ошибки. В данном случае по ней доступен документ, посвященный тегу <amp-img>. Такие ссылки доступны не для всех ошибок.

Из спецификации можно узнать, что проблема заключается в использовании тега <img> вместо <amp-img>.

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