Меню

accelerated mobile pages wordpress настройка

Настройка AMP на WordPress — практическое руководство

Автор: Сергей Коваленко · Опубликовано 25.09.2017 · Обновлено 05.10.2017

Что из себя представляет технология AMP от Google

AMP (англ. Accelerated Mobile Pages), — это технология создания ускоренных мобильных страниц, для устройств с медленным доступом в Интернет. Реализованы в основном посредством HTML верстки, с расширениями, и некоторыми блоками кастомных страниц для мобильных устройств. Для них не может быть использован ряд скриптов JavaScript, но без ограничения можно использовать CSS3.

Технология позволяет сохранять эти страницы в отдельном кеше Google, что дает возможность получить более высокую скорость загрузки, по сравнению с мобильными и адаптивными страницами. Впервые была анонсирована в октябре 2015 года. На момент написания этой статьи проект все еще активно развивающийся и предполагающий широкое применение на сайтах, крупных порталах и интернет-магазинах. Больше информации о нем вы можете получить на официальном сайте, перейдя по ссылке www.ampproject.org

Зачем нужны AMP страницы

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

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

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

Руководство по настройке AMP страниц на WordPress

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

  • AMP By Automattic, — официальный плагин разработан командой Automattic, но имеет весьма ограниченные возможности.
  • AMP for WP – Accelerated Mobile Pages. Имеет много возможностей и более гибкие настройки.
  • AMP WooCommerce. Плагин, позволяющий включить AMP на страницах вашего магазина.
  • Glue for Yoast SEO & AMP. Дополнение к известному плагину Yoast SEO, но к сожалению на момент написания статьи не совместим с версией WordPress 4.8.2

Далее подробно рассмотрим настройку плагина AMP for WP – Accelerated Mobile Pages.

Установка AMP for WP – Accelerated Mobile Pages

Установить плагин вы можете скачав его с официальной страницы wordpress.org/plugins/accelerated-mobile-pages, либо через панель управления: Плагины → Добавить новый…

Вводите в строке поиска название плагина, жмете кнопу установить, а затем активировать.

Настройка AMP for WP – Accelerated Mobile Pages

После активации вы попадаете на окно с настройками плагина. Так же в панели управления появляется значок настроек AMP.

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

General

В графе Logo вы можете выбрать логотип для сайта. В выпадающем списке Select Page as Front Page, выберете домашнюю страницу своего сайта. В используемом мной шаблоне WordPress, эта страница реализована таким образом, что не может автоматически быть преобразована в AMP-формат. И здесь на помощь приходит дополнительные блоки AMP Page Bilder и Custom AMP Editor, которое плагин встраивает в каждую страницу сайта.

Читайте также:  cru программа для настройки

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

Page Builder

Раздел отвечающий за отображение этих блоков.

Advertisement

Отвечает за выведение блоков рекламных сетей, в том числе и Google Adsense. Но для его работы необходимо доплатить за эту функцию (на момент написания статьи 30$)

Позволяет настроить параметры поисковой оптимизации для ускоренных мобильных страниц.

Analytics

Позволяет подключить систему аналитики. Для корректного отображения данных в Google Analytics, необходимо создать отдельный ресурс.

Structured Data

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

Notifications

Позволяет включить использование cookie. Платная функция, на момент написания статьи стоимость 30$.

Contact Form

Функция для установки формы обратной связи. Так же платная.

Comments

Позволяет подключить комментарии Disqus и Facebook.

Возможность комментировать непосредственно на AMP страницах блога нужно докупать.

Facebook Instant Articles

Позволяет подключить к страницам скрипты Facebook

Hide AMP Bulk Tools

Позволяет отключать поддержку AMP в категориях сайта

Advance Settings

Позволяет включить перенаправление посетителей с мобильных устройств на AMP страницы; установить необходимый код в Header и Footer и автоматическое добавление директории /amp/ в меню, используемое для ускоренных мобильных страниц.

Translation Panel

Позволяет перевести необходимые пункты AMP страниц и добавить свой копирайт в футер.

Themes

Позволяет выбрать одну из трех тем, для отображения мобильных страниц.

Global

Позволяет вывести отображение номера телефона, формы поиска по сайту и установить собственные CSS.

Header

Позволяет включить переход при нажатии на логотип на кастомную версию сайта и включить навигационное меню для AMP версии.

HomePage

Позволяет установить количество отображаемых слов и размер картинки в превью записи блога.

Single

Позволяет настроить отображение записи блога

Footer

Добавляет в футер ссылку на не AMP версию сайта.

Позволяет включать на страницах мета-описания.

Social

Позволяет подключить данные социальных профилей к AMP страницам.

Позволяет перейти на предпросмотр вида постов, при нажатии кнопки Launch Post Builder, и включить поддержку языков с письменностью справа налево.

Extensions

Позволяет установить необходимые дополнительные плагины.

Все плагины платные, кроме одного, — Category Base Remove. Этот плагин необходимо скачать, перейдя по указанной в интерфейсе ссылке, и установить на сайт. Дополнительной настройки он не требует. Необходим для корректного отображения страниц категорий.

Fix AMP Errors

Это раздел с дополнительными платными сервисами, помогающими в устранении ошибок AMP страниц, которые были выявлены при сканировании роботами Google, и отображаются в панели управления Search Console.

Plugins Manager

Включает функцию управления купленными дополнительными плагинами.

Send Feedback

Кнопка обратной связи с разработчиками.

Import / Export

Позволяет экспортировать и импортировать настройки данного плагина.

Выводы

Как видите, настройка не так уж и сложна. Пример AMP страницы, генерируемой плагином AMP for WP вы можете увидеть на этом блоге, добавив в конце любой страницы каталог /amp/.

Внедрение всех настроек на сайте у меня заняли около двух часов. После чего через Search Console я отправил на индексацию основную AMP страницу блога с расположенными на ней ссылками. Первые проиндексированные страницы появились через два дня.

А дальше, как я уже писал, все будет зависеть от качества контента, и его актуальности для пользователей.

Надеюсь эта статья была полезна для вас. Если есть вопросы, задавайте в комментариях.
Так же буду благодарен, если вы поделитесь своим опытом внедрения и использования AMP технологии.

Читайте также:  настройка весов polaris pws 1526dgf

источник

Как установить и настроить плагин Accelerated Mobile Pages (AMP) в WordPress

В прошлом октябре Google анонсировал AMP как проект с открытым исходным кодом для обеспечения более быстрой загрузки страниц на мобильных устройствах. Как сказали в TechCrunch, большинство считает, что AMP является попыткой Google конкурировать с мгновенными статьями Facebook Instant Articles и мобильными приложениями, которые обеспечивают более быструю работу браузера. Мы склонны согласиться.

Страницы, оптимизированные с AMP, появятся в мобильном браузере в топе результатов Google Search, отодвинув статьи в традиционном HTML в низ рейтинга. Загружаться они будут действительно мгновенно.

Честно говоря, мы скептически настроены по отношению к AMP для блогеров или небольших издателей. Часто мы пишем контент, который попадает в топ результатов Google Search. А теперь придётся осваивать новую технологию с ограниченными ресурсами и надеждой, что наш контент окажется в топе. Интересно, что в отличии от больших издательств, в поиске нет записей блогов в AMP:

В 1995 Microsoft выпускал MSN News как часть MSN Online Network, которая была запущена с Windows 95 — ответ Microsoft на AOL. MSN News требовали Application Viewer, который работал на платформе Microsoft Media Viewer. В течение года должно было произойти слияние веб с NBC, что позже стало MSNBC.com. Microsoft настраивал свою среду разработки, чтобы генерировать одновременно Media View и HTML. Это создало огромное количество новых проблем.

AMP напоминает нам эту ситуацию. Это совершенно другая и очень ограниченная версия HTML, для которой нужно очень сильно изменить ваш сайт и рекламу на нём.

Бесплатный плагин WordPress AMP

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

AMP находится только в начале своего пути, и мы разочарованы, что Google решил создать абсолютно новую среду разработки, а не выбрал путь работать с издателями над оптимизацией HTML5 для более быстрой настройки загрузки страницы. Это было бы более логично. Но ведь в команде Google одни гении! (Сарказм.)

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

Как выглядит AMP на WordPress?

В примере вы можете увидеть отличия между AMP и HTML страницами. Конечно, в версии AMP страница загружается быстрее.

Изображение страницы в оригинале на HTML5:

Тэг следующей ссылки добавлен к каждой странице в блок head >. Это сообщает поисковым системам, что доступна AMP версия этой страницы.

Но также есть и каноническая ссылка, определяющая URL исходной страницы:

Изображение страницы в AMP версии:

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

Давайте теперь поговорим об активации AMP на WordPress.

AMP WordPress Plugin

Вы можете изучить и загрузить AMP WordPress Plugin из директории плагинов WordPress, или прямо из своей консоли.

Просто зайдите в Плагины → Добавить новый и поищите AMP:

После установки нажмите Активировать:

Теперь зайдите на любую запись в вашем блоге WordPress с окончанием /amp/ в конце адресной строки. Вы увидите очень упрощенную версию вашего поста, который будет выглядеть примерно так:

Читайте также:  вар тандер настройка графики видео

Glue for Yoast SEO & AMP

Универсальный AMP плагин от WordPress предлагает несколько настроек. Yoast SEO создали аддон для их популярного плагина, который дополнительно усиливает вашу поддержку AMP.

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

Вы можете менять настройки AMP через боковое меню Yoast SEO – просто нажмите AMP внизу меню:

Во-первых, Yoast позволяет вам расширить функциональность AMP. По умолчанию, AMP меняет только актуальные записи – это специальные новостные статьи:

Примечание: Если вы видите пустые страницы под вкладками, то убедитесь, что обновили оригинал плагина Yoast SEO, это должно помочь.

Во-вторых, Yoast предлагает несколько полезных способов настройки фирменной символики, дизайна и цветов:

И наконец, они предлагают способ размещения пользовательского кода Analytics в стиле AMP. Это не так просто, как кажется. Обратите внимание на код, который мы вставили ниже:

Мы нашли AMP версию для внедрения Google Analytics. Просто настройте свой исходный код для вашего веб-сайта:

Мы уверенны, что Yoast продолжит обновлять свой плагин Glue вместе с развитием плагина AMP.

Отладка ошибок AMP

Через несколько дней после установки AMP мы получили электронное письмо от Google Search Console, сообщающее об ошибках в 10 страницах. Но на самом деле не работали все наши AMP записи на сайте.

Мы вошли в Google Search Console, чтобы просмотреть страницы с ошибками и увидели это:

Мы нажали на одну из страниц:

Потом нажали Open Page и рассмотрели ошибки более детально. Вы можете сделать это и вручную, добавив /amp#development=1 в конце URL. А потом открыть Developer Console в вашем браузере:

Оказалось, что все наши AMP страницы были не рабочие из-за ошибки: The tag ‘script’ is disallowed except in specific forms . Мы пришли к выводу, что нужно использовать пользовательские функции W3 Total Cache, чтобы разместить некоторые функции JavaScript в коде страницы до закрытия тега /body >. AMP не позволяет сделать это, а плагин WordPress AMP неспособен это отфильтровать.

Нам нужно провести больше исследований, например, выключит ли W3 Total Cache скрипты для определённых путей, как /amp/, или нужно искать другое решение. Вернув этот скрипт назад в head > мы разрушаем Google Page Speed.

Интересно, что использование рекламы Google DFP также негативно влияет на Google Page Speed. Google испытывает смекалку разработчиков. Не так-то просто использовать все его технологии вместе.

Мы так и не решили, что более важно: Google Page Speed, поддержка AMP или разработка и отладка.

Итоги

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

AMP – это общедоступный путь оптимизации веб, в то время как Facebook Instant Articles только «для элиты». Но мы бы предпочли, чтобы Google создал модель приоритетной загрузки в HTML5.

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

источник