Новости

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

  1. Шаг 1: Установите и активируйте свой плагин AMP
  2. Шаг 2. Настройка Google Analytics
  3. Шаг 3: Настройте параметры плагина
  4. Шаг 4. Проверьте / подтвердите настройки AMP
  5. Шаг 5. Отправьте наиболее важные URL AMP для индексации.
  6. Шаг 6. Просмотр в консоли поиска Google для устранения ошибок
  7. Шаг 7: Тест скорости страницы
  8. Начните с AMP!

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

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

Ускоренные мобильные страницы (AMP) быстро становятся стандартом для создания быстро загружаемой страницы. Используя предварительный рендеринг, AMP могут загружать 15-80 процентов Быстрее чем стандартные мобильные страницы без ущерба для функциональности. Хотя простота реализации AMP зависит от вашей CMS (системы управления контентом), WordPress может стать хорошей тестовой средой для предварительного просмотра того, как может выглядеть ваша страница AMP.

Следуйте этому быстрому семишаговому руководству, чтобы включить AMP для WordPress.

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

Шаг 1: Установите и активируйте свой плагин AMP

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

Плагин AMP автоматически генерирует AMP-совместимые версии всех ваших сообщений, которые вы можете просмотреть, добавив / amp / в конец URL ваших сообщений. Например:

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

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

  • AMP для WP - Ускоренные мобильные страницы - Известные функции этого плагина включают в себя интеграцию с Google AdSense, поддержку rel = canonical tag, конструктор страниц с перетаскиванием AMP и возможность создавать контент AMP, который отличается от контента на стандартных мобильных страницах.
  • Клей для Yoast SEO & AMP - Одним из преимуществ использования этого плагина является то, что он позволяет делать страницы, посты и медиафайлы AMP-совместимыми. Плагин Glue for Yoast также гарантирует, что плагин AMP по умолчанию извлекает правильные метаданные. Подобно плагину AMP для WP, он позволяет настраивать пользовательские стили страниц AMP, и вы даже можете выбрать собственный значок и изменить внешний вид логотипа вашего сайта на странице AMP. ( Примечание. Для работы этого плагина у вас должен быть установлен и активирован SEO-плагин Yoast.)

Шаг 2. Настройка Google Analytics

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

Скопируйте свой идентификатор отслеживания, затем войдите в WordPress. В левой навигационной панели перейдите к AMP > Analytics и вставьте свой идентификатор отслеживания, где указано «Google Analytics». Затем нажмите « Сохранить изменения» .

Шаг 3: Настройте параметры плагина

На этом шаге я расскажу о некоторых основных настройках плагина Glue for Yoast SEO, упомянутых на шаге 1. Вы можете пропустить этот шаг, если решили не устанавливать этот плагин.

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

Для начала зайдите в Yoast SEO> AMP> Типы сообщений . Здесь вы можете выбрать, какие типы сообщений должны соответствовать AMP.

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

Шаг 4. Проверьте / подтвердите настройки AMP

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

К счастью, есть несколько решений для тестирования ваших URL AMP. Выберите пару ключевых страниц и протестируйте версии AMP, используя один из методов ниже. Как упоминалось в шаге 1, вы можете добавить / amp / в конец стандартного URL, чтобы просмотреть его.

Вариант 1: тест AMP

Вариант 2: Консоль разработчика

Эта опция специально для тех, кто использует браузер Google Chrome. Если вы используете другой браузер (Firefox, Safari, Microsoft Edge или другой), этот параметр к вам не относится.

  • Откройте страницу AMP в вашем браузере
  • Добавить # development = 1 к URL
  • Откройте Chrome Dev Tools Console (в меню Chrome выберите Дополнительные инструменты > Инструменты разработки , а затем перейдите на вкладку «Консоль») и проверьте ошибки проверки.
  • Если все хорошо, проверка должна быть успешной.

Вариант 3: AMP Validator

  • Идти к https://validator.ampproject.org/
  • Вставьте URL AMP в поле «URL» и нажмите «Подтвердить».
  • Этот инструмент выделит любые ошибки и отметит их в HTML.

Примечание: вы также можете использовать Расширение AMP Validator Chrome чтобы увидеть те же результаты на самом AMP URL.

Шаг 5. Отправьте наиболее важные URL AMP для индексации.

Если вы используете тест AMP через консоль поиска Google, вы можете нажать кнопку «отправить в Google», как только вы запустите тест и подтвердите страницу:

Кроме того, если вы вошли в свою учетную запись Google Search Console, вы можете выполнить поиск «отправить в Google» и отправить URL-адрес непосредственно в результатах поиска Google:

Хотя отправка вашей страницы AMP в Google не является обязательным требованием, Google будет индексировать вашу страницу AMP только в том случае, если она внутренне связана или указана в карте сайта XML.

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

Консоль поиска Google позволяет управлять всеми страницами AMP в одном сжатом месте.

  • Войдите в консоль поиска Google.
  • В разделе « Внешний вид поиска» нажмите « Ускоренные мобильные страницы» .

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

Шаг 7: Тест скорости страницы

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

Начните с AMP!

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

Для получения последних обновлений и разработок в проекте Google AMP, прочитайте Вот ,

Мнения, выраженные в этой статье, принадлежат автору гостя и не обязательно относятся к Search Engine Land. Штатные авторы перечислены Вот ,


Об авторе