Настройка и тестирование AMP для WordPress: короткое руководство из семи шагов

Настройка и тестирование AMP для WordPress: короткое руководство из 7 шагов

Настройка и тестирование AMP для WordPress: короткое руководство из 7 шагов

Планируете работать с ускоренными мобильными вебстраницами (АМР)? Мы написали небольшое пошаговое руководство для тех, кто собирается использовать WordPress.

Мобильные версии вебресурсов на сегодняшний день стали востребованными, эта ниша требует быстрой загрузки страниц, чтобы удовлетворять запросы посетителей. Такой показатель, как скорость открытия страниц, может повлиять на снижение доходов и на закрытие страницы до завершения загрузки (отказ).

Посетители думают, что на мобильном устройстве сайт будет загружаться также быстро, как и на компьютере. Известный интернет-магазин Amazon подсчитал, что задержка загрузки в 1-2 секунды стала причиной потери 1,6 млн. долларов за год.

Ускоренные страницы для мобильника АМР давно превратились в стандарт для мобильной версии. Благодаря использованию функции предварительной загрузки, такие веб-страницы способны загружаться на 13-80% быстрее, чем простые мобильные вебстраницы без ограничения функциональности. Насколько будет легко внедрить АМР зависит от вашей CMS (системы управления контентом). WordPress позволяет предварительно просмотреть вашу страницу АМР.
Как это сделать? Просто следуйте шагам инструкции, описанной ниже.

Примечание. Некоторые пункты предполагают, что у вас установлен плагин Yoast SEO в WordPress. Если вы его не устанавливали, то можно пропустить пункты, опирающиеся на него, вы все равно сможете активировать функцию АМР. Плагин рекомендован для тех, кто серьезно относится к SEO.

Пункт 1. Установка и активация АМР.

Для запуска АМР требуется плагин АМР от Automattic, это основной плагин для работы с АМР-вебстраницами.

Он будет автоматически создавать АМР-совместимые тексты из ваших, их можно посмотреть, используя /amp в конце URL-адреса.

До: http://ваш-сайт.ру/?p=9389&preview=true

После: http://ваш-сайт.ру/?p=9389&preview=true/amp/

Стоит отметить, что этот плагин работает только с текстами, а не со всей вебстраницей. Для того, чтобы вебстраницу совместить с АМР, нужны другие плагины.

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

1) AMP для WP. Достоинствами данного плагина являются поддержка rel = canonical tag, интеграция в Google AdSense, возможность создания специального контента для мобильных;

2) Клей для Yoast SEO и AMP. Достоинствами данного плагины является создание мультимедийных файлов, страниц, контента АМР. При этом для создания используются правильные метаданные. Вы сможете настроить дизайн веб-страниц, изменить отображение логотипа веб-сайта. (Убедитесь, что плагин Yoast SEO установлен и активирован).

Yoast SEO и AMP

Пункт 2. Настройка Гугл Аналитикс.

Чтобы позволить Google Analytics видеть страницы, нужно отыскать идентификатор отслеживания. Для этого следует перейти в панель администратора, нажав на значок шестеренки в левом нижнем углу. Потом выбрать пункты ACCOUNT-PROPERTY, там отыскать «Информация отслеживания». В открывшейся вкладке находите «Код отслеживания», чтобы увидеть ваш идентификатор. Он должен начаться с UA.

Вам следует скопировать идентификатор, потом перейти в WordPress. Слева вы увидите навигационную панель, в ней выбирается пункт AMP > Analytics, чтобы вставить сохраненный код.

Настройка Гугл Аналитикс

Пункт 3. Настройка параметров плагина.

Здесь будет рассказано про настройку плагина Glue for Yoast SEO. Если вы не хотите его устанавливать, то можете не читать этот пункт.

Значения параметров по умолчанию позволяют подобрать внешний вид АМР-вебстраниц, активировать поддержку АМР-функции для разных типов контента.

Для настройки плагина следует перейти Yoast SEO> AMP> Post Types, чтобы выбрать, какой тип контента нужен для АМР.

Настройка параметров плагина

Меню «Дизайн» позволяет настроить внешний вид вебстраниц, которые поддерживают АМР. Это может быть использование стилей CSS, настройка вида контента, цвета ссылок и многое другое.

Пункт 4. Проверка и подтверждение настройки АМР.

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

Проверить правильность настройки можно несколькими способами:

1) Тест АМР.

Перейдите на веб-страницу https://search.google.com/test/amp, там вставьте адрес своей вебстраницы. Вам покажет, существует или не существует ваша вебстраница.

2) Консоль от Google Chrome.

Подходит, если вы пользуетесь браузером Google Chrome.

Для проверки нужно загрузить вебстраницу АМР в веббраузере, в конце адреса добавив # development = 1.

Это будет выглядеть, например, http://eliteseoteam.com/healthy-spaghetti-squash-pad-thai/amp/#development=1.

После этого нужно запустить консоль Chrome DevTools (для этого в меню браузера нужно перейти «Другие инструменты»>« Средства разработки»>« Консоль»), чтобы проверить правильность настройки. Если все настроено правильно, то проверка будет успешной.


3) Валидатор АМР.

Для начала проверки откройте https://validator.ampproject.org/, там вставьте ваш АМР URL-адрес, нажмите кнопку «Подтвердить». Валидатор позволяет искать ошибки, отображая их в отчете.

Валидатор АМР

Можно пользоваться расширением AMP Validator для проверки результатов по АМР адресу.

Пункт 5. Разрешайте индексацию важных URL-адресов АМР

После завершения проверки правильности АМР страниц можно отправлять их на индексацию поисковой системой, если вы пользуетесь Google Search Console.

Также это можно сделать после входа в учетную запись Гугл, чтобы отправить вашу проверенную страницу.

Это не обязательно делать, но гугл будет индексировать вашу страницу, если она включена во внутреннюю структуру или указана в файле Sitemap XML.

Пункт 6. Просмотр в Google Search Console для исправления ошибок.

Для этого войдите в Google Search Console, там найдите «Поиск»-"АМР".

 

Там можно ознакомиться с числом проиндексированных АМР-страниц, сколько из них содержат ошибки. Для того, чтобы исправить имеющиеся проблемы следует вернуться к шагу 5.

Пункт 7. Проверка скорости работы страницы.

Запустите АМР-страницы и для сравнения простые веб-страницы для мобильного, используя инструмент оценки скорости загрузки, например, WebPageTest.

Используйте АМР-страницы!

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