Битрикс как сделать шаблон для amp

1С-Битрикс и AMP страницы

Accelerated Mobile Pages (AMP) — технология, представленная корпорацией Google в 2015 году. Ее главной целью является ускорение загрузки сайтов на мобильных устройствах. В данной статье хотелось бы поделиться одним из способов внедрения технологии AMP страниц на примере сайта под управлением 1С-Битрикс.

Существует два способа реализации:

1. Если сайта у компании нет, его разработку на 1С-Битрикс можно сразу начать с применением всех рекомендаций и правил для AMP страниц. Но нужно быть готовым к тому, что данная технология накладывает значительные ограничения к некоторым нестандартным элементам сайта

2. Если сайт уже создан и давно работает можно либо создать отдельный шаблон, либо адаптировать существующий

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

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

Главной особенностью AMP страниц является запрет на подключение собственных скриптов и внешних файлов стилей. То есть от конструкции

$APPLICATION->ShowHead(false);

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

Ваши собственные стили должны загружаться на страницу напрямую, для этого удобно использовать следующую функцию, добавленную в файл /local/php_interface/init.php:

function BasIncludeFile($path) < if (file_exists($_SERVER['DOCUMENT_ROOT'] . $path)) < $test = str_replace("..", SITE_TEMPLATE_PATH, file_get_contents($_SERVER['DOCUMENT_ROOT'] . $path)); $test = str_replace(PHP_EOL, '', $test); echo $test; >>

Как видно, дополнительно из файлов убираются переносы строк для экономии места. Использовать можно так:

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

RewriteRule ^amp/(.*)$ /amp.php [L,NC]

Данное правило переадресовывает все запросы с нужным префиксом в адресе в файл amp.php, в котором мы можем сделать все необходимые приготовления. Если мы внедряем технологию на уже работающий сайт, будет удобно перед показом страницы пропускать контент через фильтры для замены всех тегов img на amp-img, iframe на amp-img и так далее.

Полезные статьи в сфере веб-разработки и новости студии

Реймакс 23 декабря 2023

Перенос сайта студии Реймакс с системы управления сайтом 1С-Битрикс на Python/Django Нами выполнен…

aveCRM для эскорт агентства 22 декабря 2023

Проект работает на основе aveCRM. Услуги оказываются в Дубае, Франции, Сербии. Особеннос…

128.by 12 декабря 2023

На сайте можно купить аксессуары для автомобиля. Сайт работает на 1С-Битрикс, редакция Малый Бизнес…

• Обзор обновления aveCRM 7.804 января 2024
• Тонкости в работе с 1С-Битрикс 302 ноября 2023
• Обзор обновления aveCRM 7.725 сентября 2023

Вы готовы начать работу или получить консультацию?

Самый простой способ — написать нам. Не стесняйтесь задавать вопросы. Мы готовы начать обсуждение вашего проекта сейчас, сделайте следующий шаг, напишите нам.

© 2007 — 2024. Веб студия Реймакс. Беларусь, Гомель.

Как сделать AMP страницы к сайту bitrix?

Есть сайт домен.ру условно.
Мне нужно сделать amp.домен.ру и привязать amp страницы к ним. Как это сделать в битриксе?

• Вопрос задан более года назад
• 141 просмотр

3 комментария

Простой 3 комментария

no_one_safe @no_one_safe
Отдельным шаблоном.
urajo @urajo Автор вопроса

no_one_safe, А как этот отдельный шаблон привязать к домену amp.домен.ру? Вот я сейчас зарегистрирую домен 4 уровня, как мне его на 1 сайте накинуть именно на этот шаблон

Решения вопроса 0
Ответы на вопрос 0
Ваш ответ на вопрос

Войдите, чтобы написать ответ

• 1С-Битрикс

Как не выводить свойство в умном фильтре?

• 1 подписчик
• 11 часов назад
• 9 просмотров

• PHP
• +1 ещё

Как убрать из title теги html в битрикс?

• 1 подписчик
• вчера
• 53 просмотра

Как сделать AMP версию всего сайта на 1С-Битрикс

Задача — сделать AMP версию всего сайта на базе 1С-Битрикс и соблюсти следующие требования:

1. Содержание AMP страниц должно изменяться вместе с изменением оригинальных и соответствовать оригинальным;
2. Визуально страницы, чтобы повторяли оригинальный дизайн хоть и в облегченном виде;
3. В AMP нужно превратить как динамические страницы, генерирующиеся компонентами из инфоблоков (например: новости), так и статические страницы с контентом в теле страницы.

Неподходящие варианты

1. Автоматический парсинг

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

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

2. Автономные AMP страницы

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

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

Реализация

Для реализации проделал следующие шаги.

1. Обеспечил обработку URL с префиксом /amp/.

Для каждого URL должен быть аналог AMP, например: domain.com/about/ и domain.com/amp/about/, но вести эти оба URL должны на одну папку — /about/.

Реализую с помощью mod_rewrite в .htaccess, в случае обращения к URL с /amp/ делаю rewrite к соответствующим папкам без AMP и добавляю переменную HTML_TYPE=AMP , которую дальше буду использовать в init.php.

Пример .htaccess для обработки AMP

 RewriteEngine On # Google AMP # Правило для URL вида /amp/about/delivery.php RewriteRule ^amp/(.+)/(.+)\.(php|html)$ $1/$2.$3?HTML_TYPE=AMP [L,QSA] # Правило для URL вида /amp/about/ RewriteRule ^amp/(.+)/?$ $1/index.php?HTML_TYPE=AMP [L,QSA] # Правило для главной RewriteRule ^amp/?$ index.php?HTML_TYPE=AMP [L,QSA] 

2. Научил битрикс понимать и работать с AMP страницам

Две основные проблемы, которые нужно решить:

• весь CSS сделать inline в
• удалить весь Javascript

Объявляю две константы в init.php, которые дальше буду использовать в шаблоне и компонентах: HTML_TYPE и URL_PREFIX.

 if (!defined("HTML_TYPE")) < define("HTML_TYPE",""); define("URL_PREFIX",""); >?>

Перенёс CSS в inline

Для переноса CSS в inline делаю функцию AMP_CSS на событие OnEpilog, которую дальше буду использовать в шаблоне.

GetCSS(); if (!empty($CSS_FILE)) < // Извлекаю адрес из href и получаю их содержимое preg_match_all('/href="(.+?)\?.+?"/isu',$CSS_FILE,$CSS_FILE_MATCHES); if (sizeof($CSS_FILE_MATCHES[1]) >0) < foreach($CSS_FILE_MATCHES[1] as $CSS_FILE_MATCHES_VAL) < $CSS .= file_get_contents($_SERVER['DOCUMENT_ROOT'].$CSS_FILE_MATCHES_VAL); >> if (!empty($CSS)) < $CSS_TMP = str_replace(array('!important'),'',$CSS); if (!empty($CSS_TMP)) < $CSS = $CSS_TMP; >> > // Считаю размер CSS для отладки верстальщику, тк есть лимиты на стороне гугла в 70 кб if (!empty($CSS)) < $CSS = '  '; > return $CSS; > > ?>

Удалил Javascript

Собственный Javascript в AMP версии подключать не буду ни в шаблоне ни в компонентах, а служебные «прилетающие» из ядра битрикса — удаляю на событии OnEndBufferContent.

 function OnEndBufferContentParse($HTML) < if (defined("HTML_TYPE") and HTML_TYPE == "AMP") < $HTML_TMP = preg_replace('/(|.*?)/isu',"",$HTML); if (!empty($HTML_TMP)) > return $HTML; > ?>

Отключаю композитный кеш для AMP версии, т.к. для его корректной работы нужен Javascript, а он в AMP не поддерживается и выше удалён.

Дополнительно делаю свойство AMP_ENABLE в «Структуре сайта», его буду использовать на переработанных страницах для включения ссылки на AMP страницу в .

Данное свойство обрабатываю на событии OnEpilog.

GetProperty("AMP_ENABLE"); // Для AMP страниц указываю canonical на НЕ AMP if (defined("HTML_TYPE") and HTML_TYPE == "AMP") < $APPLICATION->SetPageProperty("canonical",'https://'.SITE_SERVER_NAME.str_replace('/amp','',$URL_CANONICAL)); > else < // Для НЕ AMP страниц, если они включены, указываю ссылку на AMP if ($AMP_ENABLE == "Y") < $APPLICATION->AddHeadString('',true); > > > ?>

3. Переработал шаблон сайта

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

В шаблоне сайта делаю условие для AMP и обычных страниц.

Основное отличие шаблонов с технической стороны, в функциях в .

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

ShowHead(); ?>

В AMP использую отдельные и плюс сделанную выше AMP_CSS:

ShowMeta("robots"); ?> ShowMeta("keywords"); ?> ShowMeta("description"); ?> ShowLink("canonical"); ?> ShowHeadStrings(); ?> AddBufferContent("AMP_CSS"); ?>

ShowHead в AMP использовать нельзя, т.к. в ней «придут» не валидные для AMP элементы: и ссылки на CSS.

Дальше подключаю необходимые Javascript и CSS для обычной версии:

Для AMP версии — CSS и разрешённые AMP JS-компоненты:

У AMP есть компоненты отвечающие за разные действия, например, за работу форм (компонент: amp-form), подключаю их с параметром data-skip-moving=»true», чтобы они оставались в , а не ушли вниз при объединении (если данная опция включена в настройках битрикса).

4. Переработал компоненты

Приведу пример на базе стандартного компонента Списка статей.

Копирую компонент в папку с шаблоном, добавляю файл .parameters.php и в него параметр HTML_AMP:

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

В шаблоне компонента делаю условия, как и выше в шаблоне сайта.

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

5. Переработал страницы

На страницах, где используется только компоненты и нет текста — делать ничего не нужно, они будут работать при условии, что компоненты были переработаны на шаге выше.

Для страниц, где есть текст в теле страниц, делаю компонент «Произвольный HTML» в котором должно быть 2 обязательных параметра HTML и HTML для AMP.

Внутри он выглядит так:

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

Если страницы имеют сложную структуру, и использование одного компонента «Произвольный HTML» не очень удобно, то нужно сделать набор статичных компонентов со стандартными html-блоками в дизайне сайта, которые можно использовать по сайту повсеместно. Они также должны иметь 2 версии внутри.

6. Включил AMP

Готовые AMP страницы включаю через параметр AMP_ENABLE:

У них в появляется ссылка на AMP:

При этом на AMP страницах появляется ссылка на основную:

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

Дальше страницы начнут индексироваться гуглом.

Общие замечания

AMP поддерживает почти всё в CSS, за исключением ряда моментов (можно найти в официальной документации) и общего ограничения в объёме в 70 Кб на страницу.

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

Javascript соответственно использую только на основной версии. На AMP использую JS-компоненты для форм, меню, увеличение картинок.

В ссылках (например, в меню в шаблоне) можно использовать объявленную выше константу URL_PREFIX:

Google AMP плагин для MODx

Мы собрали свой плагин, который позволяет автоматически формировать AMP-страницы для сайтов на MODx. AMP (Accelerated Mobile Pages) — это гугловский аналог турбо-страниц Яндекса для мобильной выдачи.

Время прочтения: 2 мин
Теги: Разработка , Реклама , SEO-продвижение , Доработка сайта , Интеграции

Ускорение мобильных страниц стало одной из ключевы задач продвижения сайта. Фактор скорости определяет до 70% успеха в SEO.

Мы собрали свой плагин, который позволяет автоматически формировать AMP-страницы для сайтов на MODx. AMP (Accelerated Mobile Pages) — это гугловский аналог турбо-страниц Яндекса для мобильной выдачи.

Плагин работает на базе библиотеки Amp-library: гитхаб/Lullabot/amp-library.

Скачать: googleAmpModx

Инструкция для специалистов:

1) Устанавливаем пакет через Установщик — Загрузить пакет с компьютера;

2) Создаем шаблон AMP Страницы: