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

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

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

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

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

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

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

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

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

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

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

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

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

Существует 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-версии требует больших ресурсов, поэтому подключение Турбо-страниц сможет стать достойной альтернативой.

    Источник: seonews.ru