Drupal и Google AMP

Drupal и Google AMP

Наверно уже каждый слышал про AMP проект (Accelerate Mobile Pages), который выпустил Google, чтобы ускорить мобильный WEB. Крутые ребята Lullabot'ы, принесли этот проект в Drupal, написав модуль, тему и PHP-библиотеку для конвертация в AMP. Ещё они написали пару ознакомительных статей в своём блоге The AMP Module for Drupal 8 и AMPing up Drupal. Но не смотря на то, что статьи написаны про Drupal 8, для Drupal 7 всё это тоже есть и этим можно пользоваться.

Модуль работает только для  страниц материалов, но Lullabot'ы обещают поддержку и других страниц. Наверно, нужно ещё упомянуть, что буквально на днях, а именно 17 июня 2016 года, модуль AMP перешёл из beta в rc1.

В этой статье мы не будем говорить о том, что такое AMP, на чём оно основывается и т.д. Мы поговорим как подключить AMP в Drupal.

Установка

Для работы с AMP, нам понадобится следующее:

Composer manager нужен для того, чтобы установить AMP библиотеку. Если честно другого нормально способа я не нашёл (а может быть и не искал).

Для тестирования AMP разметки, я рекомендую установить расширение для Google Chrome AMP Validator.

Подготовка темы

В папке AMP темы уже есть готовый пример ampsubtheme_example, который нужно скопировать в папку с вашими темами и переименовать, что-то типа project_name_amp. Соответственно в паке темы нужно переименовать .info файл в project_name_amp.info. А в файле template.php нужно изменить префиксы у двух функций, которые там уже присутствуют.

Настройка AMP модуля

На странице http://YOUR-PROJECT-NAME.RU/admin/config/content/amp находятся основные настройки. В принципе в настройках нет ничего особенного, поэтому я расскажу только о важном;

  • В самом вверху страницы настроек отображаются типы материалов в виде ссылок. По умолчанию для всех типов материалов AMP выключен. Чтобы включить AMP для определённого типа материала, нужно зайти в настройки этого типа и включить режим отображения "AMP".
  • В поле AMP theme нужно выбрать тему, которую вы настраивали на предыдущем шаге;
  • А также нужно поставить галочку Power User: Run the whole HTML page through the AMP library, чтобы весь вывод проходил через AMP библиотеку;

После таких нехитрых действий станут доступными AMP версии страниц материалов. Чтобы увидеть AMP версию нужно просто добавить GET параметр amp=1. Например: http://YOUR-PROJECT-NAME.RU/node/1?amp=1.

Несколько важных моментов

  1. Даже если вы не включите режим отображения "AMP" в настройках типа материала, AMP всё равно будет работать с добавлением к странице материала GET параметра amp=1. Просто этот режим идёт вместе с модулем, и в нём уже все настроено под AMP, хотя ручками можно настроить любой другой режим отображения. Но тем не менее лучше использовать этот режим отображения.
  2. Модуль приносит несколько виджетов отображения полей.А также одно правило отображения, которое можно использовать в панелях.

  3. Google сам по себе не узнает, что у вас есть AMP версии страниц, поэтому ему нужно подсказать об этом. Для этого на обычную страницу нужно в метатегах добавить ссылку на страницу с версией AMP. Метатег должен выглядеть так:<link href="http://YOUR-PROJECT-NAME.RU/node/1?amp=1" rel="amphtml">Для меня самым простым способом добавления метатега в шапку сайта, оказался кусочек кода в template.php
    $amp_meta_link = array(
        '#tag' => 'link',
        '#attributes' => array(
            'href' => $base_url . drupal_get_path_alias(request_uri()) . '?amp=1',
    	'rel'  => 'amphtml',
        ),
    );
    
    drupal_add_html_head($amp_meta_link, 'my_meta');

Комментарии

# 6 февраля 17:26 seonomad
Подскажите пожалуйста как устанавливать библиотеку? C Composer manager вообще не понятно как работать, нигде внятного мануала не нашел...
# 6 февраля 20:04 Антон Запевалов
Посмотрите на руководство на оф. сайте https://www.drupal.org/node/2405805.
Для того чтобы оставлять комментарии, вам необходимо авторизоваться. Вход