Битрикс как сделать шаблон для 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 и так далее.

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

Сеаланс 21 ноября 2023

Сеаланс предоставляет своим клиентам кадастровые услуги Особенности системы: В.

Пан Запекан 24 октября 2023

Пан Запекан — сеть кулинарий в Москве Нами выполнено: сборка проекта на основе 1С-Б.

АО «НПФ ГАЗФОНД» 24 октября 2023

АО «НПФ ГАЗФОНД» осуществляет деятельность по обязательному пенсионному страхованию. Нами.

• Тонкости в работе с 1С-Битрикс 32 ноября 2023
• Обзор обновления aveCRM 7.725 сентября 2023
• Добавить в избранное для 1С-Битрикс29 июля 2023

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 Страницы:

Как создать шаблон задач в Битрикс24?

С помощью шаблонов задач в Битрикс24 вы сможете создавать шаблоны для ваших задач и проектов, взаимодействовать с созданием регулярных задач в разы быстрее. К примеру, на определённую дату месяца вам необходимо уведомить сотрудника о том, чтобы он сделал заказ всех необходимых товаров для офиса. Вы можете создать шаблон для этой задачи и каждый раз, когда в назначенную дату нужно будет поставить эту задачу перед сотрудником, она сразу же будет создана.

С таким инструментом рабочий процесс в компании будет проходить гораздо слаженнее и ответственнее. Разберемся подробнее, как создать шаблон в Битрикс24.

С чего начать создание шаблона

Для того чтобы перейти к созданию шаблона, нужно зайти в раздел «Задачи и Проекты» в главном меню → Выбрать пункт «Шаблоны» → «+Добавить», в верхнем углу, справа.

В настройках будущего шаблона вы можете:

• Указать название шаблона.
• Назначить ответственное лицо на эту задачу.(Добавить постановщика, соисполнителя и наблюдателя).

Дополнительно можно спланировать сроки и при необходимости воспользоваться дополнительными пунктами:

• Разрешить ответственному менять сроки задачи;
• Пропустить выходные и праздничные дни. Если срок выполнения задачи выпадает на выходной или праздничный день вы можете отметить этот пункт и длительность выполнения будет автоматически увеличена;
• Принять работу после завершения задачи. После выполнения задачи она будет отправлена на проверку постановщику. После утверждения выполнения задачи постановщиком – она будет считаться завершённой. Если в задаче необходимо что-то подкорректировать и исправить недочёты – она будет отправлена на доработку ответственному лицу;
• Шаблон задачи для вновь добавляемого сотрудника. Задача по шаблону будет автоматически создана при добавлении нового сотрудника.

Сделать задачу регулярной

Если вы хотите, чтобы задача автоматически создавалась в назначенное вами время, выберете из поля «Повторять задачу (автоматизация бизнеса)» пункт «Сделать задачу регулярной», нажмите на «Галочку» и укажите все необходимые вам данные для исправной работы этого пункта.

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

Дополнительные настройки

В дополнительных настройках вы сможете:

• Добавить проект;
• Выбрать из раздела CRM нужные вам данные (Лиды, сделки, контакты, задачи, компании и заказы);
• Создать и настроить новые, пользовательские поля;
• Сможете установить время для выполнения задачи и переместить пункт в основные настройки шаблона;
• Добавить теги, для облегчённого и быстрого поиска нужной задачи.
• Указать связанные задачи;
• Сделать подзадачей к шаблону или задаче;
• Настроить права и уровень доступа к задаче.

Уровни доступа

В шаблонах задач в Битрикс24 есть два уровня доступа:

• «Чтение шаблона задачи» — это когда выбранный сотрудник имеет возможность только на создание задач и просматривание шаблона. Изменять задачи и шаблоны у него возможности не будет;
• «Полный доступ к шаблону задачи» — это когда у указанного сотрудника будет возможность создания и редактирования задач и шаблонов.

После указания всей необходимой информации и настройки нужных полей, не забудьте нажать на кнопку «Сохранить» в нижней части страницы.

После сохранения вы сможете наблюдать за сроками, просматривать теги, менять и добавлять сотрудников по ролям. При помощи пункта «Ещё» вы сможете в любой момент удалить и скопировать созданный шаблон. «Добавить подзадачу для шаблона» и «Создать задачу по этому шаблону».

После всех произведенных вами действий созданный шаблон будет доступен в пункте «Шаблоны».

Теперь, если вы хотите добавить задачу по шаблону, достаточно перейти в раздел «Все», нажать пункт «Добавить задачу» → «Добавить задачу по шаблону» и выбрать нужный вам шаблон.

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

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

Технология AMP: что это, и как её реализовать

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

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

• 1. Что такое AMP
• 2. Преимущества и недостатки AMP-страниц
• 3. Как внедрить AMP-страницы на сайте
• 4. Как проверить AMP-страницы

1. Что такое AMP

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

2. Преимущества и недостатки AMP-страниц

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

Читайте также: «Как бороться с медленной загрузкой сайта с Netpeak Spider».

Перейдём к недостаткам этой технологии. Их, к сожалению, немало, но остановимся на основных:

1. Проблемы с отслеживанием. Эффективность AMP-страницы сложно отслеживать в сервисах аналитики — набор данных сильно ограничен. Чтобы настроить теги и коды, по которым будут отслеживаться важные показатели, уйдёт много времени и ресурсов.
2. Так как Google кэширует контент на AMP-страницах и хранит их на собственном сервере, он присваивает своё доменное имя.
3. Так как большая часть дополнительных элементов на AMP-страницах урезается, в том числе и рекламные баннеры, это может привести к снижению доходов от рекламы на сайте.
4. Вебмастерам приходится контролировать основной сайт, версию АМР и мобильную версию. Это зачастую непросто.
5. Сложность в реализации технологии на самописных сайтах.
6. Cложно реализовать возможность добавления товаров в корзину, если речь идёт о коммерческих сайтах.

3. Как внедрить AMP-страницы на сайте

Для внедрения AMP на сайтах, которые разработаны на CMS, воспользуйтесь специальными плагинами:

1. AMP для сайтов на WordPress.
2. Для Joomla — плагин wbAMD.
3. AMP для Drupal можно установить с помощью: модуля AMP, темы AMP и HTML-библиотеки AMP.
4. Для Битрикс — Google AMP.
5. Для сайтов на Opencart — Opencart AMP.

А что с самописными сайтами? Как я уже говорила, внедрение AMP-страниц на них — задача сложная. Поэтому составляем ТЗ для разработчика с самыми главными требованиями:

1. AMP-страницы должны отвечать требованиям HTML-вёрстки.
2. При внедрение стилей и адаптивного дизайна необходимо опираться на официальную инструкцию.
3. URL AMP-страниц должен быть понятным для пользователей. Например, для URL канонической страницы example.com/news/odessa адрес AMP-страницы будет выглядеть так: amp.example.com/news/odessa . Или так: example.com/amp/news/odessa .
4. Канонические страницы должны быть прописаны в теге header AMP-страниц. Пример:

User-agent: Yandex . Disallow: */amp/

О результатах после внедрения AMP, и о том, что делать дальше, читайте в посте «AMP: как ускорить загрузку первой страницы до 0.2 секунд».

4. Как проверить AMP-страницы

Помимо валидатора кода вы можете проверить, соответствуют ли AMP-страницы всем стандартам, в инструменте Google «Проверка AMP страниц».

1. Введите URL в строке и нажмите на кнопку «Проверить страницу».
2. Если вы указали каноническую страницу, инструмент покажет ссылку на AMP-версию. Нажмите на «Результаты проверки AMP-версии».
3. Если страница соответствует всем критериям,вы увидите соответствующее оповещение.

Другой способ проверить AMP-страницы — с помощью Netpeak Spider. Краулер определяет AMP-страницы, которые не отвечают требованиям AMP Project, как ошибку «Неправильный формат AMP HTML», а также находит индексируемые AMP-страницы.

Для проверки проделайте следующее:

1. Отметьте в разделе «Head теги» параметр «AMP» на боковой панели.
2. Введите начальный URL и нажмите «Старт».
3. По окончании анализа в столбце «AMP HTML» основной таблицы значение TRUE будет указывать, что у страницы есть AMP-версия, а FALSE, что нет.
4. На боковой панели в отчёте по ошибкам посмотрите, не найдена ли среди них ошибка высокой критичности «Неправильный формат AMP HTML» и и ошибка средней критичности «Индексируемые AMP-страницы».
5. Если на сайте есть AMP-страницы, которые не соответствуют стандартам AMP Project, их необходимо исправить. А для AMP HTML страниц, у которых ест десктопная версия, нужно установить canonical на эту версию.

Проверять AMP-страницы вы можете даже в бесплатной версии Netpeak Spider без ограничений по времени. Также во Freemium-версии доступны и другие базовые функции программы.

Чтобы начать пользоваться бесплатным Netpeak Spider, просто зарегистрируйтесь, скачайте и установите программу — и вперёд! ��

Помимо AMP существуют другие мобильные форматы, о них мы рассказали в посте «5 быстрых мобильных форматов: плюсы и минусы с точки зрения SEO».

Подводим итоги

Быстрая загрузка страниц сайта — мастхэв для тех, кто хочет, чтобы сайт позитивно воспринимали пользователи и поисковые системы. Один из распространённых методов ускорить страницы — внедрить технологию AMP от Google. Чтобы настроить AMP-страницы для сайтов, созданных на CMS, воспользуйтесь специальными плагинами, которые я описала в этом посте. Внедрение технологии на самописных сайтах осуществляется труднее, так как потребуется навыки программирования или привлечение разработчика.

Но перед тем как настроить AMP, советую принять взвешенное решение и ознакомиться не только с их преимуществами, но и недостатками, так как эти технологии иногда могут привести к проблемам.

Расскажите о своём опыте использования этих технологий в комментариях: как внедряли, и какие это дало результаты?