Создание турбо страниц для Яндекса

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

2017-12-01 08:50:13 Создание турбо страниц для Яндекса

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

Это обычный, давно всем известный RSS канал с своеобразным синтаксисом, который Яндекс обрабатывает и создает страницы для мобильных устройств.  Все ТУРБО, заключается в том, что вы передаете Яндексу практически сырой текст и изображения, без привычной HTML верстки, JS, CSS и прочего контента который расположен на страницах вашего сайта. Яндекс за вас все верстает и выдает пользователю под видом Турбо страниц.

На этом в общем то и все. Подробнее почитать о синтаксисе данного RSS канала вы можете на сайте поддержки Яндекса, гугл вам в помощь =)
По сути получился аналог Google AMP не более.

Приведу пример создания данного канала для моего сайта. По примерным подсчетом, это заняло у меня не более часа. Если у вас на сайте уже есть RSS лента, то можно взять ее за основу. т.к. я использую CMS собственной разработки, RSS у меня не было (за ненадобностью), но был готовый скрипт создания sitemap.xml который по своему содержанию похож на RSS, разве что без самого контента страницы.

Что писать в PHP скрипте я не покажу, это сильно зависит от используемой CMS и метода программирования. Можно просто выбрать из базы нужные нам записи. Однако стоит заметить, что нам обязательно понадобятся ее название, ссылка, дата публикации и сам контент. Еще стоит отметить, что желательно передавать заголовок, сообщающий что это именно xml документ.

Я использую шаблонизатор Smarty, по этому мне достаточно создать еще один файл шаблона и передать туда массив моих страниц.

Готовый шаблон выглядит так:

<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>Ваш персональный web-разработчик в Новокузнецке</title>
		<link>https://netrange.ru/</link>
		<description>Разработка WEB сайтов, как на базе различных CMS, так и полная разработка сайтов с нуля.</description>
		<language>ru</language>
		<yandex:analytics id="36511050" type="Yandex">
		</yandex:analytics>
		<yandex:analytics id="69799615" type="Google">
		</yandex:analytics>
		<yandex:analytics id="2874209" type="MailRu">
		</yandex:analytics>
		<yandex:analytics type="LiveInternet">
		</yandex:analytics>
		{foreach from=$urls item=url}
			{foreach from=$url["posts"] item=post}
		<item turbo="true">
			<link>{$domen_url}{$url["alt_name"]}/{$post["alt_title"]}.html</link>
			<title>{$post["title"]}</title>
			<pubDate>{$post["date"]|date_format:"%Y-%m-%dT%T+07:00"}</pubDate>
			<author>Александр Груздев</author>
			<category>Технологии</category>
			<turbo:content>
				<![CDATA[
				<header>
				<figure>
					<h1>{$post["title"]}</h1>
					<img src="{$domen_url}uploads/{$post["image"]}" />
				</figure>
				</header>
				{$post["short_story"]}
				]]>
			</turbo:content>
			<yandex:related>
				<link url="https://netrange.ru/" img="https://netrange.ru/uploads/20170125191829_gruzdev_aleksandr.jpg">Ваш web-разработчик</link>
				<link url="https://netrange.ru/portfolio/" img="https://netrange.ru/uploads/20170125112623_blue_binary-code.jpg">Портфолио</link>
				<link url="https://netrange.ru/network/" img="https://netrange.ru/uploads/20170208134553_NETWORKING[2].jpg">Сети</link>
				<link url="https://netrange.ru/webdev/" img="https://netrange.ru/uploads/20170125102806_Html-Code.jpg">WEB Разработка</link>
			</yandex:related>
		</item>
			{/foreach}
		{/foreach}
    </channel>
</rss>




После чего можно подсовывать получившийся канал Яндекс вебмастеру
Добавление RSS канала в Вебмастере
Проверка канала проходит очень быстро, и если все ОК, то его можно включать.
Тут же Яндекс предлагает посмотреть, что получилось и как это будет выглядеть на мобильном устройстве.

Предварительный просмотр турбо страницПревью турбо страниц в Вебмастере

Добавить на эти страницы счетчики посещений можно или как я, указав в самой RSS ленте данные, или указав их в Вебмастере. То же самое и с рекламными сетями, правда тут у нас выбор скудный, только РСЯ и ADFOX.

Подключение счетчиков и рекламных компаниий к Турбо страницам

 Тут же можно подгрузить ваше изображение для логотипа канала и указать его название.

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

Маленькие но гордые скрипты



Яндекс.Метрика

Контакты