Как настроить плагин AMP для сайта WordPress? Создать AMP-версию сайта стало ещё проще. Теперь вы можете легко настраивать оформление и функции AMP страниц в WordPress – для этого не нужно писать код. Воспользуйтесь плагином AMP для WordPress. Полное пошаговое руководство по внедрению и настройке AMP на веб-сайте / блоге WordPress.
Проект Google AMP был задуман, разработан и реализован явно с целью упростить создание сайтов, ориентированных на пользователя; это сайты, которые быстрые, красивые, привлекательные, безопасные и доступные. Короче говоря, AMP - это мощный и экономичный инструмент, упрощающий создание высокопроизводительных сайтов, снижающий уровень технических знаний, а также время и ресурсы, необходимые для достижения этой цели.
Google AMP
Интернет постоянно развивается и для многих владельцев бизнеса это означает необходимость оставаться в курсе всех изменений с помощью Google. Если вы не адаптируетесь, это означает, что вы можете остаться позади.
Google AMP и их мобильная инициатива по ускорению работы в Интернете, приближается к своему годовщине. Поскольку сейчас он намного стабильнее, чем 12 месяцев назад, я подумал, что сейчас самое время поделиться с вами некоторыми шагами о том, как начать работу с Google AMP WordPress.
AMP и WordPress
Когда дело доходит до создания сайтов, ориентированных на пользователей, AMP - это мощный и экономичный инструмент, который упрощает нам доступ к ним, снижает уровень технических знаний, а также время и ресурсы, необходимые для достижения этой цели. А плагин AMP для WordPress - это основная технология, упрощающая публикацию контента на основе AMP в WordPress.
Плюсы AMP WordPress сайта:
- AMP является бесплатным и открытым исходным кодом.
- AMP определенно может улучшить время загрузки вашего сайта WordPress . И помните, что скорость - это фактор ранжирования.
- Лучшее размещение в поисковой выдаче с возможностью карусели для лучшего CTR. В одной реализации с популярным издателем Google AMP привел к увеличению CTR на 600%!
- Google AMP вынуждает использовать множество рекомендуемых практик веб-производительности, таких как предотвращение крупных фреймворков CSS и JS.
- Может положительно повлиять на ваши конверсии.
- За последний год было внесено множество улучшений, и теперь в Google AMP доступны варианты рекламы. Это означает, что журналы и новые публикации могут сохранить или даже увеличить свой доход от AdSense.
- Автоматическая оптимизация изображений и даже преобразование в новый формат WebP!
- AMP Lite представляет дополнительную оптимизацию для медленных сетевых подключений. Google показал общее сокращение байтов на 45%.
Создать AMP версию сайта WordPress стало ещё намного легче и интуитивно понятнее благодаря AMP плагину ВордПресс. Узнайте, с чего начать и как правильно настроить плагин AMP для WP. А также - как добавить рекламу / объявления Adsense на AMP страницу WordPress.
В настоящее время в репозитории wordpress.org есть самых 2 популярных плагина, которые помогут вам настроить Google AMP WordPress. Это бесплатный официальный плагин AMP от Automattic (более 6 780 772 установок) и AMP for WP – Accelerated Mobile Pages (AMP для WP - Ускоренные мобильные страницы) от авторов Ахмед и Мохаммед Калуди ( более 10 050 663 активных установок). На их примере мы и рассмотрим интеграцию AMP на сайт WordPress.
Официальный плагин AMP WordPress
Этот официальный плагин AMP for WordPress из проекта Google Accelerated mobile pages позволяет публиковать контент AMP с помощью WordPress таким образом, чтобы он полностью и без проблем интегрировался со стандартными механизмами платформы. Плагин AMP разработан командой Automattic и при участии компании Google.
Включите AMP на своем сайте WordPress (поддерживаемым способом). Суть в следующем: когда дело доходит до создания успешных сайтов, AMP - ваш друг. А официальный плагин AMP for WordPress - это ваш ключ к раскрытию потенциала AMP на ваших сайтах WordPress. AMP представляет собой полностью адаптивную платформу веб-компонентов, что означает, что вы можете предоставлять возможности AMP для своих пользователей как на мобильных устройствах как и настольные устройства.
Плагин предоставляет три различных варианта конфигурации для публикации контента AMP на ваших сайтах. Эти параметры конфигурации называются шаблонными режимами, и каждый из них приносит свое собственное ценностное предложение и удовлетворяет потребности различных сегментов большой и разнообразной экосистемы WordPress. И в дополнение к режимам шаблонов плагин AMP предоставляет множество функций и возможностей, призванных упростить вам использование возможностей AMP на вашем сайте WordPress.
(Необязательно). Прежде чем приступить, сначала проверьте вашу тему на поддержку технологии Google AMP, это нам пригодится при настройках плагина. Зайдите Внешний вид - Темы - Информация о теме:
Если действующая тема поддерживает AMP - отлично, если нет, то ничего страшного. Тема, которая не полностью совместима с AMP, вы сможете использовать плагин в режиме чтения, который гарантирует, что у вас есть допустимый контент AMP с использованием одного из шаблонов режима чтения.
Помимо тем WordPress по умолчанию, многие популярные темы поддерживают AMP для WordPress из коробки. Посмотрите AMP-совместимые темы и плагины на этой странице -
В админке WordPress Установите и Активируйте плагин AMP стандартным способом, через меню Плагины - Добавить новый:
Сразу после активации плагина появится информационная надпись Представляем AMP для WordPress. Принесите скорость и возможности веб-платформы AMP на свой сайт, поддерживать создание контента и разработку веб-сайтов с помощью эффективных инструментов, которые предоставляет плагин AMP.
Нужно кликнуть на ссылку - Open the onboarding wizard (Откройте мастер адаптации).
Или можно сразу перейти в AMP - Настройки в админке WordPress.
Плагин AMP WordPress настройка
Для того, чтобы настроить правильно плагин AMP WordPress, используйте мастер адаптации для пошаговой настройки ускоренных мобильных страниц. Помимо мастера адаптации, подключаемый модуль AMP обеспечивает оптимизированный процесс настройки доступных параметров.
Давайте попробуем запустить мастера настройки AMP. В разных сценариях будут рекомендованы разные режимы, в зависимости от специфики вашего сайта и вашей роли. Когда вы настраиваете плагин, он будет предлагать режим, который может быть лучше всего для вас, на основе своей оценки темы и плагинов, используемых на вашем сайте. Нажмите копку Open Wizard (Открыть мастер):
Когда мы запускаем процесс адаптации, нас приветствует плагин и сообщает, чего ожидать от процесса настройки. Страница приветствия: Добро пожаловать в официальный плагин AMP для WordPress
Мастер настройки AMP поможет вам выбрать наилучшие параметры конфигурации для вашего сайта. Кликаем Next.
На следующем этапе плагин спрашивает, являетесь ли вы разработчиком или технически подкованным пользователем. Плагин спрашивает об этом, потому что в зависимости от ответа на этот вопрос данная конфигурация плагина может быть лучше другой. Режим чтения применим, если вы используете тему, которая вообще не совместима с AMP и / или вы используете плагины, добавляющие функциональность на ваш сайт несовместимым с AMP способом.
И это может быть лучшим выбором для вас, если вы технически не подкованы или просто не хотите иметь дело с проблемами проверки. Поэтому давайте сообщим плагину, что мы технически не подкованы и приступим:
На следующем этапе плагин просит нас выбрать режим шаблона, который мы хотели бы использовать. Обратите внимание, что плагин предлагает руководство по выбору режима в зависимости от ответа, который мы дали на предыдущем шаге. В ближайшем будущем плагин также будет выполнять задачу сканирования сайта, чтобы определить уровень совместимости сайта с AMP и уточнить свои рекомендации. Режимы шаблона:
Standard:
Если вы не уверены в совместимости ваших тем и плагинов, режим чтения может быть лучшим вариантом.
Transitional:
Reader:
Если вы уверены или не знаете, что ваша тема поддерживает технологию AMP, то выбираем Стандарт:
На следующем шаге плагин дает нам сводку текущей конфигурации с указанием выбранного режима и темы, которую мы используем. В стандартном режиме есть единая тема и единая версия сайта:
Нажатие на Next запускает сохранение конфигурации, и процесс адаптации поздравляет нас и показывает предварительный просмотр нашего сайта. Ваш сайт готов обслуживать AMP-страницы для ваших пользователей! В стандартном режиме (сначала AMP) все канонические URL-адреса по умолчанию являются AMP.
Вы по-прежнему можете отказаться от AMP для определенных типов контента и шаблонов на экране настроек AMP. В зависимости от темы и плагинов, которые вы используете, может потребоваться разработка для поддержания совместимости вашего сайта с AMP:
Вы можете просмотреть сайт там или нажать Готово (Finish). После нажатия кнопки мы попадаем на экран настроек плагина AMP:
С помощью экрана настроек можно запустить мастер подключения в любое время, если захотите перезапустить процесс настройки.
В следующем разделе (Advanced Settings) сгруппирован набор расширенных настроек для более точного управления возможностями AMP, предоставляемыми вашим сайтом:
Чтобы просмотреть AMP-версию любой из ваших страниц и сообщений, используйте любой из следующих способов:
- Используйте расширение Chrome для валидатора AMP : установите расширение браузера для валидатора AMP и легко идентифицируйте любые URL-адреса AMP или URL-адреса не AMP, для которых доступна версия AMP.
- Используйте пункт меню панели инструментов плагина: если у вас активна панель инструментов (Пользователи - Ваш профиль - Панель инструментов), вы можете включите AMP Developer Tools.
- Используйте кнопку предварительного просмотра в редакторе сообщений: нажмите кнопку AMP рядом с традиционной ссылкой предварительного просмотра.
Посмотреть AMP версию страницы:
С AMP мой веб-сайт WordPress не работает нормально, что мне делать?
Возможно, вы используете тему или плагин, несовместимые с AMP. Многие плагины и темы созданы с использованием пользовательского JavaScript, который имеет некоторые ограничения, определенные в платформе AMP. Если вы используете тему, которая не полностью совместима с AMP, вы можете использовать плагин в режиме чтения. Выберите режим Reader:
Этот режим нужно выбрать, если сайт использует тему несовместимую с AMP. Это также хороший выбор, если вы технически не подкованы или просто не хотите иметь дело с несовместимостью и следовательно, хотите упрощенные и надежные рабочие процессы, которые позволят вам использовать AMP с минимальными усилиями.
В режиме чтения есть две версии вашего сайта и две разные темы используются для версий AMP и без AMP. У вас есть возможность использовать существующую AMP - совместимую тему или вы можете использовать тему AMP Legacy (ранее известную как классическая тема).
Представлены 10 тем для режима чтения (Reader) для мобильных пользователей. По умолчанию плагин позволяет нам выбрать любую из основных тем WordPress в качестве темы Reader. Можно выбрать любую понравившуюся. Например, выберем Twenty Eleven:
На следующем шаге плагин дает нам сводку текущей конфигурации с указанием выбранного режима и темы, которую мы используем. Напомним, что в режиме чтения есть две темы и две версии сайта. В этом случае плагин сообщает нам, что мы выбрали режим чтения, что мы используем GeneratePress в качестве основной темы (Посетители рабочего стола), и мы используем Twenty Eleven в качестве темы для чтения (Посетители с мобильных устройств и AMP):
Нажатие на Следующий запускает сохранение конфигурации, и процесс адаптации поздравляет вас и показывает предварительный просмотр вашего сайта WP. В режиме чтения AMP - версия вашего сайта будет обслуживаться с использованием темы Reader, которую вы выбрали (показано справа), а страницы для версии вашего сайта без AMP будут обслуживаться с использованием вашей основной темы.
Можно открыть AMP - страницу в браузере для просмотра, нажав кнопку Browse AMP (Обзор AMP):
В качестве последнего шага убедитесь, что вы настроили тему Reader по мере необходимости с помощью Customizer (Настроить). Используя режим чтения, вы можете получить доступ к настройщику AMP для своей темы Reader через ссылку - Настроить на панели администратора при редактировании содержимого AMP или через меню - Внешний вид на панели инструментов. Вы можете отредактировать версию AMP:
Вот пожалуй и всё. Плагин легко настраивается, даже если ваша тема не совместима с технологией Google, благодаря улучшенному режиму Reader.
Если что, есть документация плагина на английском языке - .
Проверка AMP-страниц для Google
Теперь, когда вы создали AMP - версию сайта WP, важно убедиться, что она работает корректно. Если ускоренные мобильные страницы настроены неправильно, Google не будет показывать их в результатах поиска. Действительна ли ваша AMP-страница или веб-история? Перейдите по ссылке: search.google.com
Для того, чтобы просмотреть AMP-страницы, нужно добавить ?amp в конец стандартного URL (Как на скриншоте). Введите нужный URL, нажмите Проверить страницу, оцените результат – соответствует или не соответствует страница критериям AMP:
Как видим результаты отличные. Так, как мы, только что, создали ускоренные мобильные страницы, отчёт о них в Search Console Goole - Страница AMP появятся позже.
Однако, возможности AMP for WordPress довольно ограничены, и он полагается на то, что вы знаете, как реализовать дополнительные функции, как AdSense или Google Analytics.
Как получать доход от объявлений Adsense с помощью AMP страниц? Сравнивая одинаковые объявления AdSense на обычных и AMP-страницах, Гугл заметил, что реклама на AMP-страницах более эффективна.
Плагин Site Kit позволяет связать сайт WordPress с аккаунтом AdSense и добавить код AdSense на все страницы (обычные и AMP). В Site Kit можно просматривать информацию о доходе от AdSense.
Добавьте код AdSense на все страницы сайта с помощью плагина Site Kit. Плагин Site Kit для WordPress упрощает работу с AdSense и другими инструментами Google и помогает вам развивать сайт.
Google
Как вставить рекламный код Google Adsense на AMP страницу WordPress
Как добавить код объявления в AMP-версию сайта, созданного с помощью WordPress? Для того, чтобы получать доход от AMP-страниц вы можете использовать специальные плагины. Или вставить код напрямую в тему WordPress (не рекомендуется). Так как, при обновление темы код Адсенсе нужно снова добавлять в шаблон.
Создав AMP-версию сайта ВордПресс, вы можете начать показ рекламы на ее страницах. Доступные вам способы добавления кода объявления зависят от того, какой режим шаблона для плагина AMP for WordPress вы выбрали. Если у вас нет опыта редактирования тем ВордПресс, добавить код объявления Адсенсе можно с помощью специального плагина.
Добавление кода объявления на AMP-страницы рекомендации от Google:
| Способ добавления кода объявления Adsense | Standard | Transitional | Reader |
|---|---|---|---|
| Плагин Advanced Ads – Ad Manager & AdSense (для автоматизированных объявлений и рекламных блоков) |  | | |
| Плагин Ad Inserter— Ad Manager & AdSense Ads (для автоматизированных объявлений и рекламных блоков) | | | |
| Плагин Insert Headers and Footers (только для автоматизированных объявлений) | | | |
Advanced Ads – Ad Manager & AdSense
Управляйте всеми типами рекламы и оптимизируйте их. Популярный плагин, уже более 3 975 245 активных установок. Переведён на русский язык.
Простой плагин Advanced Ads для управления рекламой. Работает со всеми типами рекламы и сетями, включая Google AdSense. Ротация рекламы, ads.txt и многое, многое другое. А главное, что нам нужно - автоматизированные объявления и автоматические объявления для AMP. Вставка рекламы на AMP-страницы с помощью адаптивной рекламы.
Ad Inserter — Ad Manager & AdSense Ads
Плагин управления рекламой с множеством расширенных рекламных функций для вставки рекламных кодов в оптимальные позиции. Вставляйте разные рекламные коды на AMP-страницы ВордПресс.
Этот плагин - больше, чем плагин AdSense или плагин для рекламы. Он предоставляет множество расширенных параметров для вставки форм подписки, сценариев заголовков, Javascript, CSS, HTML, PHP, аналитики, кода отслеживания или рекламы в любом месте страницы. Также одобрен Google. Возможностей куча, жалко русского языка нету. А установок больше чем у предыдущего плагина - аж 7 183 332 раз скачали.
Insert Headers and Footers
Этот плагин позволяет вам добавлять дополнительные скрипты в верхний и нижний колонтитулы вашего блога, подключившись к wp_head и wp_footer.
Insert Headers and Footers - это простой плагин, который позволяет вставлять такой код, как Google Analytics, custom CSS, Facebook Pixel и другие, в верхний и нижний колонтитулы вашего сайта WordPress. Не нужно редактировать файлы темы!
Простой интерфейс плагина Insert Headers and Footers дает вам одно место, куда вы можете вставлять скрипты, вместо того, чтобы иметь дело с десятками различных плагинов.
Вставьте любой код или скрипт, включая HTML и Javascript, а также добавьте автоматизированное объявление Google Adsense на AMP - страницы WordPress.
Включите автоматизированные объявления для AMP, и Google будет автоматически показывать рекламу на AMP-сайтах вашего аккаунта. Просто добавьте на сайт два фрагмента кода:
C помощью плагина Insert Headers and Footers вставьте 1 код в между тегами <head> и </head>, а второй в футер сайта. Вот и всё. Показ объявлений на AMP странице начнется в течение часа.
AMP для WP — Ускоренные мобильные страницы
AMP для WP это самый популярный и рекомендуемый сообществом плагин для реализации AMP на платформе WordPress. Он поможет вам автоматически добавлять Ускоренные Мобильные Страницы (проект Google AMP) на ваш сайт ВордПресс.
AMP для WP автоматически добавляет функции ускоренных мобильных страниц (Google AMP Project) на ваш сайт WordPress. AMP делает ваш сайт быстрее для посетителей с мобильных устройств.
Совместим из коробки с основными SEO плагинами WordPress - Yoast SEO, All in One SEO, Rank Math, SEOPress, The SEO Framework и Squrilly SEO Plugin.
Поддержка Google Analytics, Яндекс.Метрика, Google Tag Manager. Поддерживает Google AdSense (AMP-AD) с 6 различными рекламными местами в макете! Первый плагин с такой возможностью. В отличие от AMP for WordPress в плагине AMP для WP есть 6 встроенных рекламных мест, которые стратегически расположены так, чтобы обеспечить максимальное количество просмотров.
Вы можете включить AdSense и выбрать места размещения. Этот плагин - один из самых простых способов добавить AdSense с Google AMP WordPress. По сути, это более продвинутая версия официального плагина AMP, которая предоставляет вам дополнительные функции и поддержку.
Мастер установки AMP, который упрощает настройку для новых пользователей. Возможностей куча и вот поэтому данный плагин популярнее официального.
Настройка AMP для WP — Ускоренные мобильные страницы
Установите и активируйте плагин стандартным способом. AMP for WP - Accelerated Mobile Pages у него должен быть красный логотип:
Как только плагин активирован вам надо выбрать вид панели параметров, выбираем Базовый для начинающих:
После этого, начинаете открывать каждый пункт и настраивать. Плагин популярный, но русского языка нет. Браузер переведёт. Например, Where do you need AMP? (Где вам нужен AMP):
Далее, можно добавить логотип в разделе Дизайн и презентация. Загрузите логотип для AMP-версии. (Рекомендуемый размер логотипа: 190x36):
Можете интегрировать системы аналитики:
Включить панель уведомлений о файлах cookie и GDPR для страниц AMP. Настроить AdSense AMP-объявлений:
Нужно выбрать позиции рекламных блоков и добавить данные AD из кодов Адсенсе. Умный отзывчивый Google AdSense это то, что нужно. В разделе Сторонняя совместимость выберите SEO плагин используемый на вашем сайте:
В разделе Дизайн можно выбрать общую тему для версии ускоренных мобильных страниц. Новая бесплатная тема по умолчанию для AMP под названием Swift. В бесплатной версии есть только три простых шаблона AMP. Выберите свой дизайн из раскрывающегося списка:
Не забывайте сохранять изменения. Когда завершите настройку, проверьте, правильно ли отображается содержимое страниц с помощью предварительного просмотра. Для того, чтобы смотреть вашу AMP-версию страниц просто нажмите иконку:
Или перейти из админ панели на AMP WordPress сайт. Кликнув на ссылку Vizit AMP:
У меня так, с темой для AMP Swift:
И ещё, не забудьте попробовать настроить AMP версию визуально (Customizer) - например, меню. Должны появиться AMP параметры для настроек.
AMP страницы созданные с помощью AMP для WP - ускоренные мобильные страницы также нужно проверить в Google. Протестируйте результат своей работы, воспользовавшись инструментом Проверка AMP страниц от Google.
Ссылка выше. Я проверил это блог, результат без ошибок: Страница соответствует критериям AMP. Страница может отображаться в результатах поиска Google как совместимая с AMP.
А также проверил расширенные результаты и все структурированные данные на странице подходят для создания расширенных результатов Google.
Ускоренные мобильные страницы для Google создали и настроили, теперь подключите Турбо-страницы для Яндекс. Яндекс работает с аналогом AMP-страниц, они называются Турбо-страницы. Инструкция здесь.
В заключение
Итак, как вы видите, есть несколько простых способов запустить Google AMP на вашем сайте WordPress. Стоит ли сразу переходить на Google AMP? Это действительно зависит от типа вашего сайта WordPress. Если вы являетесь журналом или новостным сайтом, возможно, имеет смысл сразу же реализовать это и начать мониторить доход от AdSense.
Google запустил mobile-first индекс и начал учитывать скорость загрузки мобильных страниц в ранжировании. Поэтому сейчас внедрение AMP становится очень важным для веб-сайтов. Следуя предложенным выше шагам, вы сможете быстро и легко настроить AMP WordPress на своём сайте и повысить доход от AdSense с помощью AMP - объявлений.
Еще один нюанс который вас может заинтересовать, - это SEO-аспекты, потому что теперь у вас есть две копии одной и той же страницы или сообщения. Вам не нужно беспокоиться о дублировании контента, потому что оба вышеперечисленных плагина используют канонические теги с AMP. Канонические теги сообщают Google, что исходный контент - это ваша настольная версия. Google автоматически обнаружит AMP-страницы на вашем сайте, поскольку исходная страница обслуживается тегом заголовка, направляющим робота Googlebot на вашу AMP-страницу.
