Россия, Москва

Создание Яндекс турбо-страниц в ModX Revo 2.5.6 с Tickets

Создание турбо-страниц для Яндекса на CMS ModX Revolution 2.5.6 для блога на Tickets

Интро
Сниппет подготовки текста заголовка
Сниппет подготовки текста содержимого
Чанк турбо-страницы
Ресурс вывода RSS-канала
Результирующий XML-файл
Добавление в панель вебмастера
Проблематика
Заключение

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

Турбо-страницы могут формироваться двумя способами: через YML-файл, сформированный по требованиям сервиса «Яндекс.Маркета» или через RSS-канал, переданный владельцем сайта с помощью веб-интерфейса «Яндекс.Вебмастера» через API сервиса «Яндекс.Турбо-страницы».

В этой статье мы пошагово разберем процесс создания этих самых «турбо-страниц» через RSS-канал для блога, который создан на CMS ModX Revolution 2.5.6 и использующий для организации работы со статьями популярный многофункциональный компонент Tickets вместе с дополнением phpThumbOn.

Кстати говоря, перед началом работы будет не лишним предварительно проверить основные настройки системы ModX Revolution.

Сниппет подготовки текста заголовка

Согласно документации описания элементов RSS 2.0 в использовании технологии «турбо-страниц», во всех элементах RSS-файла, кроме содержимого раздела <![CDATA[ ... ]]>, необходимо кодировать следующие символы: «&» (амперсанд) — «&amp;», «<» (левая угловая скобка) — «&lt;», «>» (правая угловая скобка) — «&gt;», «»» (кавычки) — «&quot;», «» (апостроф) — «&apos;». Предполагается, что ваш сервер отдает данные в кодировке «UTF-8».

Кодируемые символы

На основание вышеизложенной информации создадим сниппет, который будет подготавливать содержимое для указанных элементов: «title», «description» и прочих.

Создаваемый сниппет назовем «rssText» и вставим в него следующий код:

<?php
if(empty($cnt)) return '';
$output = str_replace( [ '&', '<', '>', '"', '\'' ], [ '&amp;', '&gt;', '&lt;', '&quot;', '&apos;' ], html_entity_decode($cnt) );
return $output;

Сниппет rssText

Пояснение: использование функции html_entity_decode внутри кода обусловлено предположением, что заголовок, дескрипшен или же текст другого элемента могут содержать html-сущности, поэтому сначала происходит процесс декодирования и лишь потом, кодируется с учетом требований документации «Яндекса».

Сниппет подготовки текста содержимого

Как нам говорит документация по подготовке «турбо-страниц» — содержимое <![CDATA[ ... ]]> в кодировании не нуждается. Но все же, кое-какую подготовку провести нужно: вырезать якоря и якорные ссылки, которые служат для внутренней навигации по странице.

Создадим еще один сниппет назвав его «rssCDATA» и вставим в него следующий код:

<?php
if(empty($cnt)) return '';
$output = preg_replace( '/<a\s.*class="pseudo".*>(.+)<\/a>/U', '$1', $cnt );
$output = preg_replace( '/<a\s.*><\/a>/', '', $output );
return $output;

Сниппет rssCDATA

Пояснение: ссылки на якоря страницы мы регламентируем наличием CSS-класса «pseudo», а в вашей же верстке скорее всего это определяется по-другому — выясните как и подставьте нужное регулярное выражение.

Чанк турбо-страницы

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

Наш новый чанк мы назовем «tpl.yandex.turbo.rss» и вставим в него следующий код:

<item turbo="true">
<link>{$_modx->config.site_url ~ $id | url}</link>
<title>{'!rssText' | snippet : [ 'cnt' => ( $longtitle ?: $pagetitle ) ]}</title>
<pubDate>{$publishedon | date : 'D, d M Y G:i:s +0300'}</pubDate>
<turbo:content>
<![CDATA[
<header>
<figure>
<img src="{$_modx->config.site_url ~ $id | resource : 'image' | phpthumbon : 'w=640' | replace : '/assets' : 'assets'}" />
</figure>
<h1>{($longtitle ?: $pagetitle)}</h1>
</header>
{'!rssCDATA' | snippet : [ 'cnt' => ( $id | resource : 'content' | replace : '"assets/' : ('"' ~ $_modx->config.site_url ~ 'assets/') ) ]}
]]>
</turbo:content>
</item>

Чанк турбо-страницы

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

Ресурс вывода RSS-канала

Теперь создадим непосредственно сам ресурс, который будет отвечать за вывод в RSS-канал информации о турбо-страницах.

Важно! Компоновка элементов панели создания ресурсов может немного отличатся от вашей, т.к. ее вид зависит от установленных в системе ModX Revolution дополнений, например таких, как «SEO Pro».

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

  • Заголовок: «Турбо-страницы для Яндекс» (можно свой).
  • Расширенный заголовок: «Турбо-страницы для Яндекс» (можно свой).
  • Описание: «А это текст нашего описание» (можно свое).
  • Шаблон - «Пустой шаблон».
  • Скрыть из меню — «Да».
  • Опубликован — «Да».
  • Псевдоним: «turbo-straniczyi-dlya-yandeks» (можно свой).
  • Тип ресурса — «Документ».
  • Тип содержимого — «XML».
  • Местонахождение содержимого — «Встроенный».
  • Контейнер — «Нет».
  • Использовать HTML-редактор — «Нет».
  • Кэшируемый — «Нет».
  • Очистить кэш — «Да».
  • Удалён — «Нет».
  • Заморозить URL псевдоним для этой страницы — «Да».
  • Часть адреса URL следующая после https://mysite.domain/: «turbo.xml» (можно свое значение).

Документ ресурса

Настройки ресурса

SEO ресурса

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

Настало время вставить в поле «Содержимое» созданного нами ресурса код (он указан ниже) и сохранить изменения:

<?xml version="1.0" encoding="utf-8"?>
<rss xmlns:yandex="http://news.yandex.ru" xmlns:media="http://search.yahoo.com/mrss/" xmlns:turbo="http://turbo.yandex.ru" version="2.0">
<channel>
<title>[[++site_name]]</title>
<link>[[++site_url]]</link>
<description>[[*description]]</description>
<language>ru</language>
[[!pdoPage?
&element=`getTickets`
&parents=`3`
&tpl=`tpl.yandex.turbo.rss`
&tvPrefix=`tv.`
&includeTVs=`image`
]]
</channel>
</rss>

Код ресурса

В коде параметр &parents=`3` указывает на родителя статей/постов блога, т.е. на идентификатор ресурса-контейнера. Вам нужно указать свое значение.

Результирующий XML-файл

Теперь, указав в браузере URL к ресурсу, описывающего «турбо-страницы» — https://mysite.domain/turbo.xml — мы увидим сформированный XML-файл, который и нужно добавить в панель «Яндекс.Вебмастера». Но прежде, убедитесь, что в вашем файле «robots.txt» не запрещен доступ к RSS-каналу — это так же сказано в документации «Яндекса» о механизме обработки нового RSS-канала.

Файл RSS-канала

Добавление в панель вебмастера

Если Вы ранее не производили настройку «турбо-страниц» в панели «Яндекс.Вебмастера», то самое время это сделать.

Для этого перейдем в упомянутую выше панель вебмастера, выберем нужный нам сайт, раскроем в левом меню блок «Турбо-страницы» и выберем пункт «Настройки». Далее укажем для шапки страницы короткое название сайта и тип ее отображения (можно загрузить свое изображение). Добавим пункты меню, которые мы хотим отобразить пользователям, и подключим счетчики метрик. Остальные настройки редактируйте по мере ваших нужд. Сохраняем изменения настроек.

Настройка турбо-страниц в панели вебмастера

После всех вышеизложенных манипуляций система «ModX Revolution» готова предоставлять для нашего блога заветные «турбо-страницы» и «Яндекс» подготовлена к приему наших данных. А значит мы снова переходим в панель «Яндекс.Вебмастер» и выберем в нем нужный веб-сайт.

Выбор сайта

На открывшейся странице нужно принять условия публичной оферты, указать ссылку на источник (т.е. на XML-файл нашего RSS-канала) и нажать кнопку «Добавить».

Добавление источника

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

Включение источника

При включении источника «турбо-страниц» нужно подтвердить производимое действие нажав на кнопку «Да, включить».

Подтверждение включения источника

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

Ожидание проверки источника

После того, как XML-файл источника будет обработан, вам отобразится его статистика.

Статистика принятого файла-источника

Ниже приводится изображение, которое демонстрирует на экране смартфона результат работы созданного нами механизма формирования «турбо-страниц» и его интеграции в панель системы «Яндекс.Вебмастер».

Результат работы по интеграции турбо-страниц

Проблематика

Иногда контент сайта содержит код, который априори должен быть закодирован — например, код внутри html-блоков <pre>...</pre>. И это порождает проблему отображения содержимого внутри турбо-версий страниц. Об этом дополнительно сообщает валидатор «Яндекса», когда при очередной обработке RSS-канала обнаруживает кодированные символы: «Cодержимое Турбо-страницы не соответствует оригинальной версии (в содержимом тега [CDATA[]] найдены закодированные символы)» (будет не лишним ознакомиться с перечнем часто встречающиеся ошибок RSS-канала).

Проблема кодированных символов

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

Вариант 1: в код ресурса, который формирует вывод RSS-канала, в вызов сниппета pdoPage нужно добавить параметр resources и перечислить в нем минусованные идентификаторы тех статей, которые содержат кодированные символы «&resources=`-8,-13`», тем самым запретив учитывать их при формировании «турбо-страниц».

Вариант 2: добавить использование семафора (некоего tv-поле) для статей, который будет служить флагом механизму RSS-канал, включать ли данную статью в XML-вывод, формирующий «турбо-страницы» и назначать ему (семафору) соответствующее значение, если статья имеет кодированные символы (данный метод позволит избавиться от постоянного ручного добавления минусованных идентификаторов непосредственно в код соответствующего ресурса).

Вариант 3: в сниппете подготовки текста для блока <![CDATA[ ... ]]> парсить содержимое на предмет наличия html-блоков <pre>...</pre> и заменять их содержимое — например, на текст «По техническим причинам данный код Вы можете увидеть только на оригинальной странице сайта» (но эта идея по ряду причин является потенциально опасной, т.к. «Яндекс» очень не любит подмены текстов и можно попасть под какие-нибудь фильтры/санкции поисковой системы).

Заключение

После того, как система «Яндекс» начнет использовать RSS-канал, в разделе «Сводка» панели вебмастера Вы можете увидеть текст примерно следующего содержания: «Турбо-версии используются только для 72% страниц сайта» (разумеется процент страниц для каждого сайта в каждом конкретном случае будет свой).

Процент турбо-страниц

В этой статье мы разработали механизм для системы ModX Revolution, который формирует «турбо-страницы» только для статей из блога, игнорируя при этом остальные разделы. Так что для увеличения процента используемых турбо-версий страниц просто добавляйте нужные разделы в RSS-канал.

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

Постоянно оптимизируйте свои интернет-ресурсы и делайте их более человекоориентированными!

14 октября 2018 в 23:33   1536

Возможно Вам будет интересно прочесть и эти статьи

По итогам первого этапа тестирования для интернет-магазинов обновлены турбо-страницы

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

Первичная настройка ModX Revolution 2.6.5

Статья-инструкция по расширенной первичной настройке системы ModX Revolution после ее «чистой» установки на веб-сервере под управлением Apache.