Меню

amp для wordpress настройка

Быстрое руководство по настройке AMP на WordPress

Автор: Стэфани Левонн (Stephanie LeVonne) – SEO-аналитик в агентстве интернет-маркетинга Elite SEM.

В современном мобильно-ориентированном мире быстрая загрузка страниц – это необходимое условие для удовлетворённости пользователей. Кроме того, скорость сайта влияет на конверсию и показатель отказов.

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

Ускоренные мобильные страницы (Accelerated Mobile Pages, AMP) за короткое время стали стандартом того, как должны создаваться быстрые страницы. AMP загружаются на 15-80% быстрее, чем обычные мобильные страницы без потерь в функциональности. Сложность внедрения этой технологии во многом зависит от используемой CMS. При этом WordPress может стать отличной тестовой средой для того, чтобы посмотреть, как могут выглядеть ваши ускоренные страницы.

Чтобы настроить AMP на WordPress, следуйте следующим 7 шагам.

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

Шаг 1. Установите и активируйте AMP-плагин(ы)

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

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

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

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

  • AMP for WP — Accelerated Mobile Pages. Среди возможностей этого плагина значится интеграция с Google AdSense, поддержка rel=canonical, удобный конструктор AMP-страниц и возможность создавать AMP-контент, который отличается от содержимого стандартных мобильных страниц.

  • Glue for Yoast SEO & AMP. С помощью этого плагина можно делать страницы, посты и медиафайлы совместимыми с AMP. Glue for Yoast также гарантирует, что установленный по умолчанию AMP-плагин использует корректные метаданные. Так же, как и плагин AMP для WP, он позволяет настраивать оформление AMP-страниц. Кроме того, он позволяет выбрать иконку и поменять то, как логотип сайта будет выглядеть на AMP-странице.

Примечание. Для работы этого плагина необходимо установить и активировать плагин Yoast SEO.

Шаг 2: Настройте Google Analytics

Чтобы настроить Google Analytics, сначала нужно найти идентификатор отслеживания сайта. Для этого выполните следующие действия:

  • Войдите в аккаунт Google Analytics.
  • Нажмите Администратор.
  • В раскрывающемся меню в столбце АККАУНТ выберите нужный аккаунт.
  • В меню РЕСУРС выберите нужный ресурс.
  • В разделе РЕСУРС выберите Отслеживание >Код отслеживания. Идентификатор будет расположен в верхней части страницы. Он должен начинаться с UA.

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

Шаг 3. Настройте параметры плагина Glue for Yoast SEO

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

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

Чтобы начать, перейдите в Yoast SEO > AMP > Post Types. Здесь вы сможете указать, какие типы постов должны быть совместимыми с AMP.

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

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

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

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

  • Вариант 1. Инструмент «Проверка страниц AMP»
    • Перейдите по ссылке: https://search.google.com/test/amp.
    • Введите нужный URL, нажмите «Проверить», оцените результат – соответствует или не соответствует страница критериям AMP.

  • Вариант 2. Консоль разработчика в браузере Chrome
    • Откройте AMP-страницу в браузере. Добавьте в конец URL следующую фразу: #development=1. Пример: http://eliteseoteam.com/healthy-spaghetti-squash-pad-thai/amp/#development=1
    • Откройте консоль разработчика (нажмите F12 или в меню Chrome выберите «Дополнительные инструменты», затем – «Инструменты разработчика») и проверьте страницу на наличие ошибок валидации. Если всё в порядке, валидация должна быть успешной.
Читайте также:  как настройка wifi vista

  • Вариант 3: AMP Validator
    • Перейдите по ссылке: https://validator.ampproject.org/
    • Введите адрес AMP-страницы в поле «URL», нажмите «Validate».
    • Инструмент найдёт и выделит ошибки в HTML-коде.

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

Шаг 5. Добавьте самые важные AMP-страницы в Google

  • При использовании инструмента «Проверка страниц AMP» вы можете нажать «Добавить в Google» сразу после получения положительного результата проверки.
  • Другой способ: если вы авторизированы в Search Console, вы можете добавить страницу в Google прямо в результатах поиска:

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

Шаг 6: Проверьте отчёт по AMP в Search Console

Google Search Console даёт возможность управлять всеми AMP-страницами в одном месте.

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

Шаг 7. Проверьте скорость загрузки страниц

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

Начните работу с AMP

В скором будущем Google запустит mobile-first индекс и начнёт учитывать скорость загрузки мобильных страниц в ранжировании. Поэтому сейчас внедрение AMP становится критически важным для сайтов. Следуя предложенным выше шагам, вы сможете быстро и легко настроить AMP на своём WordPress-сайте.

За последними новостями Google AMP можно следить на сайте проекта.

источник

Как правильно настроить WordPress AMP

Согласно исследованиям проводимым Google, более 50% поисковых запросов по всему миру производятся с мобильных телефонов. В связи с этим стоит убедиться, что ваш сайт на WordPress загружается быстро и выглядит прилично для этой категории производящих поиск пользователей. К счастью, проект Google Accelerated Mobile Pages (AMP) делает эту задачу более легко выполнимой.

В этом руководстве мы расскажем, как установить WordPress AMP двумя способами:

Мы также поясним, что такое WordPress AMP и обсудим, как проверить их корректность работы после установки. Погружаемся!

Что такое WordPress AMP и чем он полезен для вашего сайта

Google Accelerated Mobile Pages (AMP) – это библиотека с открытым программным кодом, которая помогает создать быстрые, плавно прокручиваемые и упрощённые версии ваших веб-страниц, которые прекрасно смотрятся на мобильных устройствах. AMP очень дружелюбна, построенная на существующих платформах и фреймворках. К тому же, она полностью совместима с WordPress.

Если кратко, то Google AMP работает таким образом, что позволяет вам создавать дубликат вашего сайта, используя AMP HTML. Этот процесс исключает большинство элементов, которые могут привести к медленной загрузке вашего сайта (JavaScript, сторонние скрипты др.). Затем Google обрабатывает и «сглаживает» ваш сайт, для ещё более быстрой его загрузки. После этого результаты будут выглядеть где-то так:

Google AMP обеспечивает множество преимуществ, хотя он имеет некоторые недостатки. Давайте изучим обе стороны медали. Начнём с преимуществ:

  • Улучшение поисковой оптимизации (SEO). Наиболее очевидным преимуществом Google AMP является прирост скорости. Так как скорость – это критический фактор, когда речь идёт о рейтинге ваших страниц в результатах поиска (Search Engine Results Pages – SERPs), это может помочь сделать ваш сайт более заметным. Google AMP гарантирует, страницы вашего сайта будут показаны в новостной карусели Google (Google News carousel), в приоритетном расположении вверху в не требующей прокрутки области результатов поиска на мобильных (ещё больше повышает SEO позиции).
  • Улучшенный интерфейс пользователя. Было подсчитано, что 33% всех потенциальных продаж теряются, если веб-сайт не оптимизирован под мобильные устройства. Ещё более тревожные результаты исследований показывают, что 57% пользователей интернета не станут рекомендовать бизнес с сайтом, который не адаптирован для мобильных устройств. Google AMP делает такую оптимизацию простой и возможной и тем самым позволяет избежать этой опасности.
  • Повышенная производительность сервера. Google AMP извлекает выгоду из некоторых ключевых функций оптимизации Google. Уменьшает трафик от изображений до 50% без потери качества и снижает нагрузку на работу сервера. Снижая нагрузку на сервер, AMP помогает улучшить производительность вашего сайта.

С другой стороны, у Google AMP есть и свои недостатки:

  • Ограничения каскадных таблиц стилей (Cascading Style Sheets – CSS) и JavaScript. Хотя Google AMP позволяет вам достичь молниеносного времени загрузки, это может вам стоить отдельных элементов сайта. AMP удалит графику очень высокого качества, сложную анимацию и другие яркие элементы, которые используют CSS и JavaScript.
  • Отображаются только страницы из кэша. Высокая скорость Google AMP также является следствием того, что Google включает отображение версии ваших страниц из кэша. По этой причине ваши пользователи не всегда смогут получить доступ к последним версиями контента.
  • Ограниченные возможности доступа к рекламным объявлениям. Не смотря на то, что Google AMP поддерживает рекламу, процесс её описания очень сложен. Он также имеет ограниченные возможности интеграции с внешними рекламными платформами.
Читайте также:  сброс настроек планшета pipo

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

В следующем разделе мы опишем два метода установки WordPress AMP при помощи нескольких удобных плагинов для ускорения мобильных страниц в WordPress.

Как установить WordPress AMP при помощи двух плагинов

Для установки AMP на вашем сайте вам потребуется плагин WordPress AMP. Прежде чем продолжить с этим или следующим методом мы рекомендует сделать бэкап вашего сайта на WordPress. После этого у вас всё готово к началу.

Вариант 1: Используем плагин AMP для WordPress

Плагин AMP for WordPress прекрасный инструмент, если вы хотите установить AMP для своего WordPress сайта быстро и просто. Хотя версия по умолчанию содержит минимальное количество функций для настройки AMP, эти опции могут быть расширены при помощи дополнительных плагинов. Дальше мы рассмотрим этот процесс. А сейчас давайте перейдём к тому, как установить сам плагин.

Прежде, перейдите в Плагины › Добавить новый в своей консоли администрирования WordPress. Введите «AMP for WordPress» в строке поиска и найдите плагин AMP для WordPress. Затем установите и активируйте его:

Далее перейдите в раздел Внешний вид > AMP. Это откроет страницу настроек AMP. Здесь выберите вкладку Design:

На этой странице вы можете настраивать вид своего сайта WordPress AMP по своему предпочтению и просматривать предварительно любые изменения, перед тем как опубликовать их. Вы можете настраивать текст своего сайта, ссылки и цвет фона. Плюс, мы можете выбрать, какую цветовую схему вы хотите использовать – светлую или тёмную (т.е. черную или белую) для своего сайта. Когда внесённые настройки вас будут полностью устраивать просто нажмите Publish вверху страницы.

Ещё вы можете установить, где записи, страницы или и те и другие будут располагаться в WordPress AMP. Чтобы это сделать, просто вернитесь в консоль WordPress и перейдите в AMP > General:

На этой странице отметьте рядом с настройкой Post Type Support те види публикаций, которые вы хотели бы видеть на сайте WordPress AMP и нажмите на Save Changes.

Вы наверняка обратили внимание, что здесь не так уж много настроек. К счастью, есть несколько плагинов, которые вы можете использовать для расширения вашего выбора. Например, вы можете использовать Glue for Yoast SEO & AMP для интегрирования с плагином Yoast SEO с вашей установкой AMP.

Перейдите в Плагины Добавить новый, найдите, установите и активируйте Yoast SEO:

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

После этого нажмите кнопку Save changes. Дополнительные настройки можно найти на вкладке Design. Здесь вы можете установить иконку для сайта WordPress AMP, подобрать цветовую схему и даже добавить свой CSS:

И ещё раз не забудьте сохранить изменения, когда вы закончите настройку своего сайта.

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

Вариант 2: Установка плагина AMP для WP – Ускоренные мобильные страницы

В дополнение для обеспечения привлекательного и удобного для начинающих интерфейса настройки страниц этот плагин WordPress AMP может интегрироваться с множеством других инструментов. Среди них: WooCommerce (ведущий плагин для электронной коммерции в WordPress), Alexa metrics, OneSignal push button notifications и другие.

Для использования этого плагина AMP для WordPress, вначале нужно перейти в Плагины > Добавить новый в вашей консоли. Найти «AMP for WP», установить и активировать плагин:

Далее перейдите на новую вкладку AMP в админ панели WordPress. Вы увидите подпункты меню с разделами Settings, Design, Extensions и другие. Давайте подробнее посмотрим на настройки в Settings:

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

  • SEO: Это включает настройки мета описания, интеграцию с плагинами SEO и другое.
  • Performance: Это единая настройка включающая и выключающая минификацию файлов. Минификация может улучшить скорость работы вашего сайта.
  • Analytics: Здесь вы можете настроит интеграцию с Google Tag Manager, также как и настройки аналитики.
  • Comments: Это позволяет настроить хотите ли вы включить комментарии WordPress, Disqus или Facebook в своём WordPress AMP.
  • Advanced Settings: Вы можете вводить свой HTML код для заголовка или подвала, установить мобильное перенаправление и включить или выключить retina images.
Читайте также:  настройки прокси сервер видео

Нажмите на Save Changes для каждой настройки выше, как только вы закончите с ней. После этого выберите вкладку Design:

Собственно здесь вы можете управлять внешним видом своего сайта WordPress AMP. Для этого выберите конкретную тему AMP из списка в меню Theme Selector.

После выбора темы вы можете настраивать её внешний вид. Вы найдёте настройки дизайна для цветовой схемы и шрифта (вкладка Global), выбор отображения заголовка и подвала, слайдер на главной странице и многое другое. В разделе Social вы можете также выбрать, какие кнопки социальных сейте вы желаете отображать на своём сайте WordPress AMP.

Если вы довольные видом своего AMP-сайта, сохраните все изменения. Вы также можете предварительно их посмотреть, если перейдёте в Appearance > AMP:

Бесплатная версия AMP для WP содержит широкий набор функций. Однако, вы можете значительно улучшить внешний вид и функциональность вашего сайта AMP с платными расширениями. Есть расширения для описания рейтинга (будет полезным для товаров или профилей недвижимости), интеграции с AMP WooCommerce Pro, использования пользовательских типов записей и другого:

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

Если вы желаете попробовать ещё больше дополнительных функций, то для вас целый ряд тарифных планов Pro plans доступных для этого плагина. Диапазон от плана Personal (обслуживание одного сайта за $149 в год) до плана Agency (обслуживание неограниченного количества сайтов за $499 в год).

Как проверить корректность работы своего сайта WordPress AMP

Когда вы настроили любой из плагинов AMP для WordPress, вы подошли к ещё одному шагу. Вам нужно проверить работу WordPress AMP, чтобы убедиться, что он доступен и залинкован на supported platforms. Проверка – это также удобный путь посмотреть ошибки AMP с целью их устранения.

Один их быстрых и простых способов проверить AMP – использовать инструмент разработчика в браузере. Для этого вам нужно открыть страницу AMP в вашем браузере (в нашем примере мы используем Google Chrome). Дальше вам нужно добавить следующее в конце URL:

Как только вы это сделаете, откройте консоль инструментов разработчика в браузере. Для Google Chrome это Chrome DevTools console. Если найдены ошибки, они будут подсвечены красным, вместе с анализом их причин.

Обычно ошибки проверки вызваны неверными префиксами, некорректным форматированием кода и/или неподдерживаемыми тегами. В большинстве случаев, будут присутствовать настройки исправления ошибок. Кроме этого, проект Google AMP также описывает метод устранения распространённых ошибок проверки, если авто-исправление отсутствует.

Другой эффективный способ проверки AMP – использование расширения AMP Validator для Google Chrome и Opera:

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

Заключение

Даже несколько дополнительных секунд времени загрузки могут значительно снизить рейтинг вашего сайт в поисковиках (и ваш коэффициент конверсии). К счастью, как мы уже видели, использование Google AMP может помочь вам убедиться, что страницы вашего сайта загружаются молниеносно на мобильных устройствах. Что ещё, конфигурация и тонкая настройка AMP для WordPress – это просто и понятно, если вы используете правильный плагин WordPress для ускоренных мобильных страниц.

У вас остались вопросы о том, как установить какой-либо плагин WordPress AMP? Дайте нам знать в комментариях!

Автор

Елена имеет профессиональное техническое образование в области информационных технологий и опыт программирования на разных языках под разные платформы и системы. Более 10 лет посвятила сфере веб, работая с разными CMS, такими как: Drupal, Joomla, Magento и конечно же наиболее популярной в наши дни системой управления контентом – WordPress. Её статьи всегда технически выверены и точны, будь то обзор для WordPress или инструкции по настройке вашего VPS сервера.

источник

Добавить комментарий

Adblock
detector