Setka Editor и WordPress Setka Editor и Google AMP

Setka Editor и Google AMP

Что такое Google AMP?

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

 

Как это поможет моему сайту?

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

Amp страницы позволят увеличить скорость загрузки мобильных страниц с постами, созданными в Setka Editor, и при этом сохранить элементы фирменного стиля издания или бренда.

ВАЖНО: Тема, которую использует ваш сайт на WordPress должна также поддерживать формат AMP.

 

Как взаимодействуют между собой плагины Setka Editor и AMP WP?

Плагин AMP WP работает в трех режимах:
— Reader (formerly Classic) (legacy) предлагает готовый шаблон темы и позволяет боту Google индексировать страницы сайта сразу после установки плагина. Не рекомендуется включать этот режим;
— Transitional (formerly Paired) подразумевает, что владелец сайта или создатель темы позаботились об отдельных шаблонах для AMP и остальных версий сайта;
— Native представляет собой бесшовную интеграцию, при которой сайт создан «из коробки» специально под AMP, при этом не нужно формировать отдельных ссылок, шаблонов и т. д.

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

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

1. Анимации Setka Editor трансформируются в AMP-анимации, сохраняя активацию по событиям и процесс перехода элементов из одного состояния в другое.
2. Responsive эмбеды и галереи трансформируются в соответствующие AMP-элементы и правильным образом встраивается на страницу.
3. Для изображений мы выводим атрибут srcset со всеми доступными разрешениями, оставляя на усмотрение браузера решение, какой из размеров лучше показать пользователю. Это ускоряет загрузку изображений и позволяет лучше адаптировать контент под размеры устройства пользователя.

 

Какие есть ограничения?

Как у любой технологии, у AMP есть ограничения, которые продиктованы желанием создателей улучшить пользовательское восприятие при работе с мобильным контентом: собственные HTML-теги, невозможность подключить внешние скрипты, кроме AMP-библиотек, а также inline-стили размером в 50 Kb.

Как активировать AMP на сайте с Setka Editor

Прежде чем активировать AMP на сайте, убедитесь, что ваша тема готова к работе с плагином AMP for WordPress. 

Установка и активация

Для активации AMP на сайте с Setka Editor:

  1. Обновите плагин Setka Editor до версии 1.16.2 или выше.
  2. Установите и активируйте плагин AMP for WordPress. Необходимо установить версию 1.0.0 и выше.
  3. После активации откройте страницу настроек плагина AMP for WordPress и выберите Transitional (formerly Paired) или Native для опции Template Mode.

setka-amp-02.png

  1. Для опции Validation Handling доступно три настройки:

4.1. Automatically accept sanitization for any AMP validation error that is encountered. Включите эту настройку, если хотите активировать AMP-режим сразу для всех постов. Плагин автоматически исправит ошибки валидации. Отметим, что в этом случае в AMP-версиях постов могут пропасть некоторые скрипты и HTML-теги. Использовать опцию нужно аккуратно, поскольку это может повлиять на отображение контента.

Если вы хотите выбрать вручную, какие ошибки «принимать» в AMP-версию поста, а какие лучше исправить — не включайте эту настройку.

Invalid_AMP_Page__URL____Setka_Editor_Demo___WordPress_2018-09-21_3_PM-47-13.png

4.2. Automatically remove CSS rules that are not relevant to a given page (tree shaking).

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

setka-amp-03.png

4.3. Disable admin bar on AMP pages. Эта настройка отключает административную панель на AMP-версии поста, что позволяет не загружать ненужные стили и скрипты. Включите этот чекбокс.

  1. Для опции Supported Templates включите поддержку AMP только для постов.
  2. Сохраните настройки.

Настройка аналитики

Стандартные скрипты установки Google Analytics, Яндекс.Метрики и других аналогичных сервисов не являются валидными в AMP. Сервисы устанавливают с помощью тега <amp-analytics> и JSON-объекта с конфигурациями. Эта возможность предусмотрена в плагине AMP for WordPress.

В качестве примера установим код Google Analytics:

  1. Перейдите в меню настроек аналитики плагина AMP for WordPress
  2. В поле Type введите название вендора, в нашем случае — googleanalytics. (Полный список доступных вендоров доступен по ссылке)
  3. В поле JSON Configuration введите код:

https://pastebin.com/XgnEa70a

где UA-XXXXX-Y — это ID вашего аккаунта в Google Analytics.

  1. Cохраните настройки.

Важно, чтобы код конфигураций был валидным JSON-объектом, иначе аналитика не будет работать. Проверить JSON на валидность можно с помощью онлайн-валидатора.

Подробнее о том, какие сервисы поддерживает AMP, и примеры кода установки можно посмотреть по ссылке: https://www.ampproject.org/docs/analytics/analytics-vendors#vendors

 

Валидация ошибок

Плагин AMP for WordPress сохраняет историю валидации всех страниц. Она доступна в меню по ссылке AMP → Invalid Pages.

Для того чтобы быстро понять, валидна ли страница, также можно использовать онлайн-валидатор https://validator.ampproject.org/ или установить расширение для Google Chrome.

 

Как подготовить тему сайта к работе с AMP for WordPress

Начиная с версии плагина AMP for WordPress 0.7, вы можете зарегистрировать поддержку AMP в вашей теме и использовать те же шаблоны для AMP-версий страниц, что и для обычных страниц. В плагине для этого предусмотрено два режима: Transitional (formerly Paired) и Native.

 

Transitional (formerly Paired) Mode

В этом режиме плагин будет использовать шаблоны темы для отображения AMP-версий страниц, которые будут доступны по отдельным ссылкам. Например, если адрес статьи — www.example.com/article-namе, то AMP-версия будет доступна по ссылке www.example.com/article-namе/amp.

Для того чтобы автоматически выбрать этот режим, добавьте в functions.php следующий код:

add_theme_support( 'amp', array(
'paired' => true,
) );

В этом случае плагин «очистит» код страницы от тегов, которые не поддерживаются в AMP.

Также можно специально указать, какой код исполнять для AMP, a какой для обычных запросов, c помощью функции is_amp_endpoint().

Внимание! Для этой функции необходимо создать «обертку», иначе в случаях, когда плагин AMP for WordPress не установлен или не активирован, сайт перестанет работать из-за ошибки Call to undefined function. Пример обертки:

function example_is_amp() {
return function_exists( 'is_amp_endpoint' ) && is_amp_endpoint();
}

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

add_theme_support( 'amp', array(
'template_dir' => 'amp-templates',
) );

 

Native Mode

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

Для того чтобы активировать этот режим, добавьте следующий код в functions.php вашей темы:

add_theme_support( 'amp', array(
'paired' => false,
) );

В режиме Native тоже можно указать отдельную директорию для AMP-шаблонов:

add_theme_support( 'amp', array(
'paired' => false,
'template_dir' => 'amp-templates',
) );

В этом случае необходимо обязательно добавить строчку 'paired' => false, потому что наличие template_dir по умолчанию подразумевает Transitional (formerly Paired) mode.

 

Выборочная поддержка шаблонов

Начиная с версии плагина v1.0-beta, можно выбирать, на каких шаблонах активировать AMP. Это можно сделать в настройках плагина или в коде:

add_theme_support( 'amp', array(
'templates_supported' => array(
'is_singular' => true,
'is_search' => false,
),
) );

Чтобы активировать AMP на всех страницах:

add_theme_support( 'amp', array(
'templates_supported' => 'all',
) );

 

Работа с интерактивными элементами

АMP не поддерживает тег <script>. Плагин AMP for WordPress удалит все скрипты на странице. В этом смысле добавление поддержки AMP похоже на подготовку сайта к работе без JavaScript.

Поэтому прежде всего необходимо отключить загрузку любых пользовательских скриптов на странице. Это можно сделать с помощью функции is_amp_endpoint();

В отличие от случаев, когда JavaScript не доступен, в AMP есть возможность создать интерактивность нативными средствами. Примером может служить мобильное меню для сайта. Как добавить поддержку этого кейса, подробно написано в wiki плагина на Github.

Также в AMP доступны нативные интерактивные элементы, такие как слайдеры, лайтбокс-галереи и другие. Подробно об этом можно прочитать на сайте проекта AMP.

Ссылки:

Тема AMP News с поддержкой AMP в Native Mode

Статья в wiki плагина на GitHub

Pull request по добавлению поддержки AMP в стартовую тему _s

Похожие статьи