Обзоры расширений Joomla

  • Тип – плагин Joomla для создания страниц по технологии Google AMP.

 

 

JAmp – русскоязычное расширение Joomla для простого создания ускоренных мобильные страниц AMP Google. Плагин весьма прост в настройке и позволит сократить время загрузки страниц сайта на мобильных устройствах. Для некоторых сайтов сокращение может стать значительным. Учитывая ограничения, которые накладывает сама технология Google AMP, JAmp будет полезен не всем сайтам. В особенности это касается тех проектов, где применяется множество интерактивных элементов и форм. Также стоит отметить, что дизайн сайта сильно «пострадает». Это связано не с JAmp Joomla, а с ограничениями технологии. Причём, можно настроить создание AMP-страниц не для всех страниц сайта, а только для некоторых. Плюс, если по какой-то причине одна из страниц сайта не может быть «конвертирована» плагином в AMP-формат, она будет доступна в своей обычной версии.

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

Ускоренные мобильные страницы AMP призваны существенно увеличить скорость загрузки страниц сайта на мобильных устройствах. Это хорошо и для опыта взаимодействия пользователя (UX), и для SEO. Более того, эти страницы отображаются в специальном блоке в результатах поисковой выдачи Google на мобильных устройствах. Плюс, они отображаются с картинкой и специальной пометкой. Примерно это выглядит так, как показано на рисунке ниже.

Представление в поиске
Представление в поиске

Пример работы плагина можно увидеть на сайте Didzhej.kh.ua. К URL-адресам страниц нужно добавить «/amp» (без кавычек). Вот несколько примеров:

  1. http://didzhej.kh.ua/skolko-stoit-didzhej/amp
  2. http://didzhej.kh.ua/otzyvy/amp
  3. http://didzhej.kh.ua/dopolnitelnye-uslugi/amp
  4. http://didzhej.kh.ua/obratnaya-svyaz/amp

Немного подробнее о собственном опыте внедрения AMP для Joomla страниц можно будет прочесть в следующей статье.

В обзоре будет участвовать последняя, на момент написания статьи (20.03.2017), русскоязычная версия JAmp 1.4.2 в Joomla 3.6.5. Основной шаблон сайта – RSBrixton 1.0.20 (с изменённой таблицей стилей).

На официальном сайте расширений Joomla 16 отзывов, расширение добавлено 26.10.2016.

  • Общий рейтинг – 100 из 100.
  • Функциональность – 100 из 100.
  • Простота использования – 100 из 100.
  • Документация – 100 из 100.
  • Поддержка – 100 из 100.
  • Соотношение цена\качество – 100 из 100.

Расширение платное, на данный момент от 39€.

Особенности JAmp

Рассмотрим основные, на мой взгляд, особенности плагина JAmp.

  • Совместим с Joomla 3.х. Не ниже, чем Joomla 3.2.
  • Переведён на русский и английский языки. Всплывающие подсказки к настройкам на русском языке. Документация и техническая поддержка на английском.
  • Прост в установке и настройке.
  • Множество опций для конфигурации (при необходимости). Настройка цветов темы, логотипа, заголовков, модулей, меню, добавление своих CSS-стилей, шрифтов Google и многое другое. Вам не нужно делать сложные переопределения файлов, достаточно добавить свои собственные дополнительные HTML-теги, если это нужно.
  • Интегрируется с любым расширением Joomla. Даже с конструкторами контента типа SP Page Builder.
  • Автоматическое создание валидных ускоренных мобильных страниц AMP по рекомендациям Google (без ошибок).
  • Вставка специальных мета-тегов в AMP-страницы и обычные страницы (по рекомендациям Google). Чтобы избежать дублирования контента и для ускорения индексации AMP-страниц поисковой системой.
  • Автоматическое создание специальных сниппетов для AMP-страниц. Для отображения в мобильной поисковой выдаче Google.
  • Возможность выбора компонентов сайта, для которых будут создаваться Joomla AMP-страницы.
  • Возможность создания меню AMP-страниц на основании стандартного модуля меню Joomla.
  • Возможность создания боковой выезжающей панели с отображением в ней модулей.
  • Поддержка разметок, Open Graph и Twitter Card.
  • Автоматическое изменение изображений страниц под заданный формат для прохождения проверки AMP-страниц на валидность.
  • Вставка кнопок шаринга социальных сетей.
  • Поддержка вставки кода отслеживания Google Analytics.
  • Поддержка эффектов лайтбокс для изображений.
  • Возможность вставки слайд-шоу изображений.
  • Поддержка вставки видео с YouTube.
  • Поддержка отображения рекламных блоков.
  • Поддержка кэша Google AMP.
  • Множество настроек для возможности конфигурации исключения HTML-элементов, плагинов, тегов, атрибутов и так далее из процесса генерации AMP-страниц.
  • Возможность создания информационного уведомления для пользователей. Например, чтобы сказать, что Вы используете куки.
  • Наличие режима отладки с возможностью быстрого тестирования AMP-страниц. Также Вы сможете отправлять сгенерированные страницы на проверку в Google.
  • Поддержка ЧПУ (SEF). Как родного роутера Joomla, так и sh404SEF.

Все элементы страниц, которые создаёт JAmp, кнопки шаринга, меню, лайтбоксы, слайд-шоу, совместимы с Google AMP стандартом.

На рисунке ниже показан пример верхней части не AMP-страницы.

Не AMP-страница
Не AMP-страница

На рисунке ниже показан пример верхней части этой же страницы, но её AMP версии.

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

На рисунке ниже показан пример верхней части не AMP-страницы с раскрытым меню.

Не AMP-страница
Не AMP-страница

На рисунке ниже показан пример верхней части этой же страницы, но её AMP версии с раскрытым меню.

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

На рисунке ниже показан пример нижней части не AMP-страницы.

Не AMP-страница 3
Не AMP-страница 3

На рисунке ниже показан пример нижней части этой же страницы, но её AMP версии.

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

На рисунке ниже показан пример части не AMP-страницы контактов.

Не AMP-страница (4)
Не AMP-страница (4)

На рисунке ниже показан пример части этой же страницы контактов, но её AMP версии.

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

Как сделать AMP-страницы

При помощи JAmp, создание AMP-страниц в Joomla - достаточно лёгкий процесс. Нужно установить плагин и немного его настроить. Все настройки разделены на 11 вкладок. Рассмотрим наиболее интересные, на мой взгляд, опции на этих вкладках. Большинство опций оснащены расширенными всплывающими подсказками на русском языке.

  1. Плагин.
  2. Описание. Тут отображается краткое описание плагина.
  3. Внешний вид темы.
  4. Информация о сайте.
  5. Мета-данные.
  6. Функции.
  7. Меню.
  8. Боковая панель.
  9. Модули.
  10. Слайд-шоу.
  11. Уведомление пользователя.

Вкладка Плагин. На данной вкладке (рисунок ниже) собраны основные настройки плагина. Тут же Вы можете его включить.

JAmp
JAmp

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

Исключающий по ID фильтр и Включающий фильтр по ID. Вы можете указать определённые ID различных расширений по одному в строку, для их исключения/включения в генерацию AMP-страниц. То есть, можно, например, исключить/включить определённый материал Joomla (по его ID).

Автоматическая настройка распространённых расширений. Если опция включена, то будет загружена автоматическая настройка AMP для таких расширений как EasyBlog, K2, Zoo, VirtueMart и других.

Режим отладки. Если включён режим отладки, то внизу каждой канонической страницы (не AMP) появится панель управления, чтобы можно было открыть окно на подобие мобильного устройства и проверить работу AMP-версий страниц (рисунок ниже). Нажав на URL, «https://cdn.ampproject.org/c/…», откроется окно с AMP-страницей. Ширина и высота окна задаётся в соответствующих опциях Ширина отладочного мобильного окна и Высота отладочного мобильного окна.

Joomla AMP
Joomla AMP

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

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

CSS-классы адаптивных изображений и CSS-классы не адаптивных изображений. Введите один или более CSS-классов, разделяя их запятой, для определения соответствия изображениям, преобразованными в AMP-формат, которые должны/не должны обрабатываться как адаптивные. Например, используя класс «img.myclass» (без кавычек).

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

Настраиваемые CSS-стили. Вы можете ввести Ваш настраиваемый CSS-код для задания стиля AMP-страницы. Перед добавлением каких-то стилей рекомендую ознакомиться с документацией и рекомендациями касательно AMP.

Настраиваемое семейство шрифтов Google. Укажите имя шрифта Google, который Вы выбрали для того, чтобы применить его к мобильному шаблону. Посетите сайт шрифтов Google, чтобы найти подходящий, а затем просто скопируйте и вставьте имя выбранного шрифта. Например, «Indie Flower» (без кавычек). Помните, что добавление шрифтов Google может немного замедлить загрузку страницы.

AMP для Joomla страниц
AMP для Joomla страниц

Вкладка Информация о сайте. На данной вкладке (рисунок ниже) можно задать название сайта, логотип и иконку (favicon). Изображение иконки должно быть квадратным PNG-файлом с размером 192 x 192 пикселя.

Информация о сайте
Информация о сайте

Вкладка Мета-данные. На данной вкладке (рисунок ниже) есть 4 важные опции. Они важны, так как именно благодаря этим опциям можно настроить отображение сниппетов AMP-страниц в результатах поисковой выдачи. Тут же можно активировать применение микро-данных Schema.org, Open Graph и Twitter Card.

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

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

Изображение логотипа издателя. Выберите логотип для AMP мета-данных издателя. Это должно быть изображение с размерами 600 х 60 пикселей, если это не так, то его размер будет автоматически изменён.

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

Мета-данные
Мета-данные

Вкладка Функции. На данной вкладке (рисунок ниже) собраны весьма важные настройки, которые помогут тонко сконфигурировать плагин. Например, активировать применение счётчика Google Analytics, включить отображение кнопок шаринга в социальные сети

Включить лайтбокс для изображений. Если опция включена, то у изображений, включённых в основную область и в область модулей, по нажатию будет эффект лайтбокса. Если Вы выберете режим «исключить href изображения», то все изображения, включённые внутрь тега ссылки, не будут открываться с эффектом лайтбокс, сохранив при этом навигационные ссылки.

Функции
Функции

Активация Google AMP-кэша. Если опция включена, то AMP-страницы будут подгружаться с кэша Google для немедленного отображения. По сути, в коде основных страницах сайта просто поменяется значение тега с, например, «<link href="/http://didzhej.kh.ua/skolko-stoit-didzhej/amp " rel=amphtml />» на «<link href="/https://cdn.ampproject.org/c/didzhej.kh.ua/skolko-stoit-didzhej/amp" rel=amphtml />» Обратите внимание, что активация AMР-кэша может препятствовать индексированию ссылки. И если Вы хотите активировать его, то настоятельно рекомендуется подождать пару недель, пока Google проиндексирует AMP-ссылки. Я ждал не пару недель, а меньше двух суток. Когда в Google Search Console в разделе Вид в поиске – Ускоренные мобильные страницы (AMP) появилась информация о проиндексированных ускоренных мобильных страницах (AMP) (рисунок ниже), активировал данную опцию. В этом же отчёте можно отслеживать информацию о замечаниях и ошибках на AMP-страницах

Ускоренные мобильные страницы AMP в Google Search Console
Ускоренные мобильные страницы AMP в Google Search Console

Активировать AMP Youtube. Когда эта опция включена, то Вы можете добавить внутрь Вашего контента следующую разметку, чтобы обрабатывать AMP видео с Youtube: «amp-youtube width='480' height='270' layout="_QQ_"responsive"_QQ_" data-videoid='lBTCB7yLs8Y'&gt;&lt;/amp-youtube». Встраивайте видео YouTube с помощью id видео. ID находится в URL каждой страницы YouTube видео, как правило, это параметр «v», такой как «v=7LLUY0X4_cw».

Активировать AMP Ad. Позволяет активировать вывод рекламных блоков на страницах. Если опция включена, Вы можете вставить внутрь своего контента или модуля специальную разметку для обработки AMP Ad специальными Ad сетями, такими как AdSense: «amp-ad width='300' height='250' type='adsense' data-ad-client='ca-pub-2005682797531342' data-ad-slot='7046626912'&gt;&lt;/amp-ad». Для получения всей документации и списка AMP Ad сетей посетите этот сайт.

Включить AMP формы (только https). Если данная опция включена и для сайта установлен SSL-сертификат, то все формы, отмеченные заданными в поле CSS классы AMP форм CSS классами, будут преобразованы в совместимые AMP формы, если это возможно. Преобразование форм в AMP-формат может иметь ограничения и проблемы, формы с полями ввода паролей не совместимы с AMP и их нельзя использовать. Например, у Вас не может быть форм входа на AMP-страницах.

Список запрещённых тегов и Список запрещённых атрибутов. Если у Вас возникли проблемы с валидацией AMP в связи с расширениями, которые используют не валидные HTML-теги или атрибуты на AMP-страницах, то Вы можете ввести через запятую список запрещённых тегов или атрибутов для того, чтобы их убрать.

Элементы, которые будут удалены при помощи CSS-классов. Введите один или несколько CSS-классов, разделяя их запятой, для удаления нескольких элементов с AMP-страниц. Например, Вы можете исключить все HTML-элементы с присвоенным именем CSS-класса «noamp», используя класс «*.noamp».

Включить исключения плагинов. Если нужно, то выберите исключение плагинов Joomla при генерации AMP-страниц.

Вкладка Функции. На данной вкладке (рисунок ниже) собраны настройки, которые позволят выводить на страницах Joomla AMP. Можно применять то же самое меню, что и на обычных страницах, или отдельно созданное. Оно создаётся аналогично любому меню в Joomla. Тут же можно настроить внешний вид, положение и поведение модуля меню.

Меню
Меню

Вкладка Боковая панель. На данной вкладке (рисунок ниже) Вы сможете активировать и настроить боковою панель.

Боковая панель
Боковая панель

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

Боковая панель (2)
Боковая панель (2)

Вкладка Модули. На данной вкладке (рисунок ниже) Вы сможете настроить вывод, расположение и внешний вид модулей в верхней части страниц и\или в нижней. Причём, можно отображать как по одному модулю (по типу\названию), так и несколько модулей (по названию позиции)

Модули
Модули

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

Модули на страницах
Модули на страницах

Вкладка Слайд-шоу. На данной вкладке (рисунок ниже) можно настроить отображение слайд-шоу на страницах Joomla AMP. Учтите, что папка с изображениями уже должна находиться внутри папки «images» в корне Вашего сайта.

Слайд-шоу
Слайд-шоу

Вкладка Уведомления пользователя. На данной вкладке (рисунок ниже) можно настроить отображение уведомления, выводимого в нижней части страниц. К сожалению, использовать HTML-теги нельзя.

Уведомления пользователя
Уведомления пользователя

На рисунке ниже показан пример такого уведомления.

Уведомления пользователя (2)
Уведомления пользователя (2)

В следующей статье «Обзор JAmp. AMP-страницы в Joomla 3» мы поговорим о самой технологии Google AMP и посмотрим на данные по применению данной технологии на моём «подопытном» сайте.

 

Полезные ссылки: