Ускоренные мобильные страницы (AMP)

Технология AMP

AMP — Accelerated Mobile Pages, расшифровывается как ускоренные мобильные страницы. По статистике Google, большое число пользователей используют медленный Интернет (3G, GPRS). Поэтому Google запустил открытый проект AMP. То есть, используя данную технологию, создаются amp-страницы, которые грузятся очень быстро. Данная технология преследовала только одну цель — увеличение скорости загрузки при использовании медленного Интернета. Особенно полезна данная технология для контентных проектов. Яндекс пока не поддерживает эту технологию, а Гугл — только на google.com. Не стоит каждую станицу подстраивать под AMP. Нужны лишь те страницы, чья задача информировать пользователя (статьи). AMP — это только дополнение. Поисковик в первую очередь выдаёт полноценную страницу, затем мобильную, и только потом  AMP (если у сайта существуют все эти версии). Ведь основная страница максимально наполнена контентом и очень функциональна.

Немного статистики

Скорость загрузки веб-страницы больше чем две секунды и больше теряет свою привлекательность, особенно на мобильных телефонах. Исследования показали, что загрузка страницы напрямую влияет на продажу. Например, если страница загружается больше чем одну секунду, конверсия падает на 27%, а показатель отказов на 56%. Поэтому, если сайт слишком медленный, видимость его в поиске может пострадать. Отсюда следует, что многое зависит от скорость загрузки страниц сайта.

Сравнение времени загрузки по PageSpeed Tools

Выбираю случайную запись сайта и тестирую скорость загрузки по сервису PageSpeed Tools. Обычная страница получила 69 баллов.

Обычная страница получила 69 баллов.

Amp- версия этой же записи получила на 18 баллов больше — 87.

Amp- версия этой же записи получила на 18 баллов больше - 87.

Проверка amp-страницы

Чтобы убедиться, что amp-страница отображается правильно — проверьте с помощью сервиса https://search.google.com/search-console/amp

amp-страница отображается правильно - проверьте с помощью сервиса https://search.google.com/search-console/amp

Отсюда вы можете добавить amp-страницу в индекс Google.

AMP для WordPress

В WordPress подключить AMP-страницы очень просто. Необходимо только установить плагин AMP.

Необходимо только установить плагин AMP.

После установки делать вам ничего не потребуется. Плагин работает в автоматическом режиме. При работе используется логотип сайта, заданный в кастомайзере. Мобильные страницы создаются автоматически, но только для записей. Для создания amp-страниц будем использовать плагин «Accelerated Mobile Pages» о котором речь пойдет ниже.

Мобильные страницы создаются автоматически, но только для записей.

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

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

При нажатии на кнопку «Leave a Comment» мы попадаем на комментарии на обычной версии сайта. В принципе, можно в коде плагина изменить англоязычные названия на русские и все. Но в моем случае на сайте много страниц, больше чем записей, а плагин AMP пока что их не поддерживает. Разработчик говорит, что они над этим работают.

страниц, больше чем записей, а плагин AMP пока что их не поддерживает

В Интернете можно найти несколько плагинов-надстроек, расширяющих возможности стандартного AMP. Я попробовал все которые мне попались и остановил свое внимание на плагине «Accelerated Mobile Pages». Устанавливаем, активируем. Данный плагин поможет вам легко перевести англоязычные фразы и добавить блоки рекламы Google Adsense на amp-записи.

внимание на плагине «Accelerated Mobile Pages»

При активации плагин выдал ошибку, так как ему понадобился фраймворк «Redux Framework». Redux — простой, действительно расширяемый фреймворк настроек для тем и плагинов WordPress. Его также можно установить из общей базы плагинов.

Redux — простой, действительно расширяемый фреймворк настроек для тем и плагинов WordPress

Далее переходим в настройки плагина «Accelerated Mobile Pages».

Далее переходим в настройки плагина «Accelerated Mobile Pages»

После установки плагина amp-страницы сайта выглядят немного по другому. Есть форма навигации, при переходе на главную страницу — откроется ее amp версия.

После установки плагина amp-страницы сайта выглядят немного по другому.

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

Настройка «Accelerated Mobile Pages»

General

  • Logo. Здесь можно загрузить логотип для amp-версии сайта. Рекомендуемые размеры: 190×36.
  • Mobile Redirection. Включить AMP для мобильных пользователей, чтобы автоматически перенаправлять мобильных пользователей на amp-версию сайта.
  • Analytics Type. Можно выбрать счетчики на amp-страницы Piwik Analytics или Google Analytics. Яндекс-метрика не предусмотрена.
  • Front Page. При включении опции вы можете выбрать главную страницу в ручную. По умолчанию отображаются последние записи на сайте.
  • Link to Non-AMP page in Footer. Если опция включена, то в футере будет ссылка «Non-AMP» при нажатии на которую вы получите обычную версию данной записи.
  • RTL Support. При включении опции выравнивание текста на amp-страницах будет по правой стороне.
  • AMP on Pages. При включении/отключении опции у меня ничего не меняется. По прежнему создаются только amp-версии записей, а страницы работают только в обычном режиме.
  • Non-AMP HomePage link in Header and Logo. Включите опцию, если хотите, чтобы ссылка на обычную версию страницы была в заголовке, а не в футере.

Design

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

Design

Также вы можете внести свои настройки css вручную.

SEO

Настройки данного раздела будут работать, если у вас будет установлен Yoast SEO Plugin, тогда у вас будет возможность прописывать теги и дескрипшены amp-страниц. Я не стал заморачиваться с этим вариантом.

Menu

Здесь можно выбрать меню, которое будет отображаться на amp-страницах.

А вот это очень важный раздел, позволяющий вставить рекламу от Google Adsense в amp-страницы. Для этого вам нужно будет указать коды ваших рекламных блоков и выбрать их размер. На одной странице amp-записи вы можете установить четыре блока рекламы.

Single

  • Sticky Social Icons. Включить отображение социальных кнопок, чтобы пользователи могли делиться вашими записями в социальных сетях.
  • Next-Previous Links. Здесь можно включить/выключить отображение ссылок на предыдущую и следующую запись под самой записью.
  • Featured Image Width. Задание ширины изображения в записях.
  • Featured Image Height. Задание высоты картинок в записях.
  • Show Related Post from. Показывать похожие записи из этой же категории или при совпадении меток.
  • Number of Related Post. Количество похожих постов. По умолчанию выводится три записи.

Social

Тут вы можете настроить социальные кнопки, которые вы хотите показывать.

Тут вы можете настроить социальные кнопки, которые вы хотите показывать.

Translation Panel

Здесь вы можете задать перевод англоязычных фраз на ваших amp-страницах сайта.

Как создать AMP-версии для страниц?

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

Как создать AMP-версии для страниц?

«Accelerated Mobile Pages» — годный плагин. Рекомендую.

Стоит ли создавать AMP-страницы?

На сколько я понял, данную технологию пока что поддерживает только google.com — англоязычная версия поисковика. Так что нам еще не прижало, но можно попробовать заморочиться заранее. Возможно получите дополнительные очки при ранжировании в Google.

Оценить статью

Ускоренные мобильные страницы (AMP)
5 (100%) 1 голос[ов]

Оставить отзыв

Please Login to comment
Войти с помощью: 
  Подписка  
Подписка

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: