Гайд: как настроить Турбо-страницы на сайте

К концу 2021 года 83% интернет-трафика в России приходилось на мобильные устройства (SlickJump, январь 2022). Мобильная версия сайта давно перестала быть дополнением к десктопной. 

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

Скорость загрузки страниц – один из ключевых показателей качества сайта.

Быстрая загрузка позволяет уменьшить процент отказов в среднем на 30% и сохранить трафик.

«Турбо-страница» – что это такое?

Турбо-страница от Яндекса – это мобильная копия веб-страницы, на которой есть только базовые элементы: текст, картинки, видео, кнопки действий.

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

Плюсы и минусы Турбо-страниц

Основные преимущества в подключении Турбо-страниц:

• страницы быстрее загружаются;
• наблюдается рост позиций в поисковой системе Яндекс;
• формируется красивый сниппет, что повышает CTR.

Пример сниппета на основе Турбо-страницы:

Но также есть и недостатки:

• Турбо-страницы состоят из базовых элементов и теряют дизайнерские элементы;
• часто возникают ошибки отображения, что снижает конверсию страницы.

Существует 2 версии Турбо-страниц:

1. Турбо-страницы для интернет-магазинов (разметка товаров и главной страницы);
2. Турбо-страницы для контентных сайтов (разметка статей и новостей).

Как подключить Турбо-страницы для интернет-магазина

Визуальная часть Турбо-страницы для интернет-магазина состоит из следующих элементов:

• логотип;
• название категории;
• размерный ряд;
• кнопка «Добавить в корзину»;
• описание товара;
• характеристики;
• цена.

Пример сгенерированной Турбо-страницы для карточки товара:

Чтобы создать Турбо-страницу для карточки товара, необходимо сгенерировать файл в формате yml, который должен быть доступен на основном домене по статической ссылке, например https://site.ru/turbo-sale.

Большинство CMS-систем имеют встроенный модуль, который позволяет генерировать YML-файл. Если такого нет, нужно создать файл самостоятельно.

С основными элементами и требованиями вы можете ознакомиться в официальной справке Яндекса:

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

Пример YML-файла:

Основные шаги при при создании Турбо-страниц для карточек товаров:

1. Сформировать YML-файл.

2. Настроить автообновления файла на каждый день (если есть встроенный модуль) или обновлять его вручную при добавлении/удалении новых товаров.

3. Проверить YML-файл на наличие ошибок валидации с помощью инструмента «Отладка» Яндекс.Вебмастера.

4. При необходимости настроить API-передачу заказов. API Турбо-магазинов позволяет передавать информацию о заказе и покупателе в CRM/CMS-систему магазина. Подробнее в Документации на API.

5. Разместить сформированный файл на сайте. Файл должен быть доступен по статической ссылке, например https://site.ru/turbo-sale.

6. Сформированный файл загрузить в Вебмастер «Турбо‑страницы для интернет-магазинов → Источники».

7. Настроить аналитику. Для этого нужно перейти на страницу «Турбо‑страницы для интернет-магазинов → Настройки → Веб‑аналитика»; нажать кнопку «Добавить счетчик»; выбрать нужную систему веб-аналитики и указать идентификатор счетчика.

8. Настроить «Корзину»: в Вебмастере перейти на страницу «Турбо‑страницы для интернет-магазинов → Настройки → Оформление заказа»; добавить один или несколько способов оформления заказа:

• Корзина на Турбо. С помощью нее пользователь может положить товар в корзину, продолжить покупки и оформить заказ сразу на Турбо‑странице.
• Купить в 1 клик. Посетитель заполнит форму заказа на Турбо‑странице. Заказ придет на указанную вами электронную почту.

Обязательно укажите почту – на нее будут приходить уведомления об оформленных заказах.

9. Настроить информацию «О магазине». Чтобы страница отображалась с корректным названием, логотипом и номером телефона, необходимо перейти на страницу «Турбо‑страницы для интернет-магазинов → Настройки → Оформление заказа» и заполнить все поля.

10. После настройки всех пунктов необходимо выполнить контрольную проверку и включить показ Турбо-страниц. Для этого нужно вернуться в «Турбо‑страницы для интернет-магазинов → Источники» и включить фид.

Через некоторое время вместо обычных страниц в поиске появятся Турбо-страницы.

Как подключить Турбо-страницы для контентных сайтов

Визуальная часть Турбо-страницы для статьи:

1. Логотип → добавляется в настройках в Яндекс.Вебмастере.

2. Выпадающее меню → создается в настройках в Яндекс.Вебмастере.

3. Заголовок Н1.

4. Заглавное изображение статьи.

5. Сам текст статьи с картинками или без.

6. Другие статьи по теме.

7. Кнопка «Перейти на оригинал» → кнопка формируется автоматически Яндексом.

8. Файл должен быть в формате rss и должен быть доступен по статической ссылке, например https://site.ru/rss-feed.xml.

Пример сгенерированной Турбо-страницы для статьи

Чтобы создать Турбо-страницы для статьи, нужно сгенерировать файл формате rss, который должен быть доступен на основном домене по статической ссылке, например https://site.ru/rss-feed.xml.

Большинство CMS-систем имеют встроенный модуль, который позволяет генерировать rss-файл, но если такого нет, то нужно создать файл самостоятельно. С основными элементами и требованиями можно ознакомиться в официальной справке Яндекса:

• по подключению Турбо-страниц,
• по разметке RSS-канала.

Пример RSS-файла:

Основные шаги при при создании Турбо-страниц для контентных сайтов:

1. Сформировать RSS-канал.

2. Проверить RSS-канал на наличие ошибок валидации с помощью инструмента «Отладка» Яндекс.Вебмастера.

3. Разместить сформированный RSS-канал на основном домене. Канал должен быть доступен по статической ссылке, например https://site.ru/rss-feed.xml.

4. Загрузить RSS-канал в Вебмастер. Для этого в Вебмастере нужно перейти в «Турбо‑страницы для контентных сайтов → Источники» и добавить туда ссылку на файл.

5. Настроить аналитику. Для этого нужно перейти на страницу «Турбо‑страницы для контентных сайтов → Настройки → Веб‑аналитика», нажать кнопку «Добавить счетчик»; выбрать нужную систему веб-аналитики и указать идентификатор счетчика.

6. Сделать стилизацию под сайт в Яндекс.Вебмастере, чтобы страница отображалась с корректным названием и логотипом.

7. Добавить меню.

8. После настройки всех пунктов необходимо выполнить контрольную проверку и включить показ Турбо-страниц Для этого нужно вернуться в «Турбо‑страницы для контентных сайтов → Источники» и включить rss-канал.

Через некоторое время вместо обычных страниц в поиске появятся Турбо-страницы.

Заключение

Мобильная версия – это основная версия вашего сайта. Ее качество влияет на конверсии, поэтому скорость загрузки играет одну из ключевых ролей. Разработка адаптивной или mobile-версии требует больших ресурсов, поэтому подключение Турбо-страниц сможет стать достойной альтернативой.