Как изменить домен турбо страницы

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

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

С 2018 года разработчики многое изменили в функционале этих страниц, они стали поддерживать:

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

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

Как видно из примера, поддерживаются видеоматериалы, маркированные списки и изображения. А вот так выглядят рекламные блоки.

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

1. Дополняет основную десктопную версию контента сайта. Полезно, если сайт не адаптирован для телефонов и долго загружается на мобильных устройствах.
2. Работать как интернет-магазин. Часто встречается в Инстаграм, ВК и других социальных сетях. Они разработаны совершенно бесплатно и включают в себя базовый функционал интернет-магазина.

Как создать турбо-сайт в Яндекс.Директ: пошаговая инструкция

Создание турбо-сайта — простой процесс с использованием знакомых многим конструкторов турбо-страниц.

Шаг 1. Зайдите в Яндекс.Директ и нажмите кнопку «Турбо-конструктор сайтов» в правом верхнем углу или перейдите по прямой ссылке: https://direct.yandex.ru/registered/main.pl?cmd=showTurboLandings. У вас должен быть аккаунт в Яндексе.

Шаг 2. Нажмите кнопку «Создать» в правом верхнем углу, в выпадающем меню выберите «Турбо-сайт».

Шаг 3. Задайте имя главной страницы. Мы выбираем один из предложенных дизайнов исходя из тематики сайта, необходимого функционала и предлагаемых товаров и услуг. Нажмите кнопку «Создать».

Шаг 4. Откроется визуальный редактор. Слева проект турбо сайта — что увидит посетитель, справа — меню настроек. Если слева вместо сайта отображается серое пятно, вы можете просмотреть его, нажав кнопку «Предварительный просмотр».

Шаг 5. Передвигаем ползунок в правом верхнем углу перед надписью «Дополнительные настройки» в активное положение. Ниже представлены основные настройки созданного турбо сайта.

Каждый раздел содержит настройки: шрифты, тексты, изображения и другие элементы. Каждый раздел конфигурации отвечает за свой раздел, например, за раздел товары, отзывы покупателей, комментарии. На скриншоте ниже под номером 1 находится раздел: шляпа, под номером 2 — баннер, под номером 3 — предметы, в данном случае ранее собранные букеты невесты.

Шаг 6. Перейдите к редактированию шапки сайта, нажмите «Шапка» и выберите текст в поле «Идентификатор раздела», чтобы отредактировать его. Затем можно изменить: ID раздела, цвет фона и текста, растянуть заголовок на всю ширину экрана, закрепить его при прокрутке, изменить формат логотипа и сам логотип.

Шаг 7. Если вам нужно создать дополнительные страницы с таким же макетом, воспользуйтесь кнопкой «Создать копию», показанной на скриншоте.

Если вы хотите добавить страницу с другим макетом, перейдите по ссылке и нажмите кнопку «Создать», затем выберите пункт «Турбо-страница», после чего вернитесь к пункту 4 инструкции.

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

Шаг 9. Заполните все необходимые поля и получите доступ к публикации сайта. После нажатия кнопки «Опубликовать» сайту присваивается доменное имя типа address.turbo.site. Чтобы изменить URL, нажмите на надпись, отмеченную на скриншоте, затем на пункт «Задан домен сайта», а затем нажмите на кнопку «Выбрать домен».

Задаем в соответствующих полях адрес сайта, главную страницу, выбираем Favicon и подключаем счетчик Метрика.

Работа с секциями

Разделы позволяют добавлять дополнительные блоки на турбо-сайт. На экране редактирования нажмите «Добавить раздел».

Из выпадающего меню выберите нужный тип раздела, от текста до ползунка, контактные кнопки.

Тип расположения кнопки клика: в центре. Выбираем место для размещения на сайте, просто перетаскивая раздел.

В меню настроек справа для любого раздела можно отредактировать надпись, тип перехода по нажатию кнопки, стиль, цвета основных элементов и задать цели для Метрики.

Yandex Turbo Site Builder позволяет создавать сайты на основе готовых шаблонов или с нуля.

Как создать турбо страницы Яндекс и настроить

Далее показано, как создавать облегченные версии страниц в WordPress. Для этого скачивается один из плагинов, с помощью которого процесс установки проходит намного быстрее и проще. Можно, конечно, через код, но так делают программисты.

Подробная инструкция по настройке через утилиту Яндекс.Турбо следующая.

• Установите плагин через админку WP

• Настройте RSS-блок. Лента автоматически генерируется в модуле (подробнее о настройке RSS-ленты см ниже). Проверьте заголовок, адрес домена и описание. RSS-ленту в настройках плагина можно разделить на несколько частей с постами для облегчения генерации Яндекса (рекомендуется для крупных сайтов).

• Внесите изменения в разделе «Блоки». Здесь можно настроить отображение меню, подключение социальных кнопок, добавление комментариев с аватаркой или без, а также другие элементы.

• Откройте Яндекс.Вебмастер. Переходите на Турбо-страницы контентных сайтов или интернет-магазинов. Потом в Фуэнтес».

• Вставьте ссылку на RSS. Если лента разделена на несколько направлений, необходимо вставить их все.

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

• Вернитесь на вкладку «Шрифты». Перед каждой RSS-лентой необходимо активировать кнопку.

Вот и все. Осталось дождаться проверки системы (это занимает несколько минут). Если в статусе указано «Ошибок нет», значит все сделано правильно.

Турбо-страницы можно настроить и через другие плагины: Яндекс.Новости от Теплицы, Я Турбо, Яндекс Турбо Лента. Если вы имеете в виду настройки на сайте продукта, вам нужно создать файл YML вместо RSS. На WP это делается через плагин Export YML.

Облегченные версии страниц Яндекса также устанавливаются на сайты, совместимые с другими CMS:

• 1-С Битрикс — через один из модулей;

• Joomla — через специальные расширения;

• Drupal: с помощью модуля экспорта Яндекс Турбо;

• Instant: через компонент Instant CMS;

• VamShop — специальный платежный модуль;

• Вебасист: через плагин.

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

Это бесплатно

Вам даже не нужно платить за Директ. На данный момент.

Достаточное количество строительных блоков и даже шаблонов

Вы не сможете воплотить в них все свои идеи, но основные необходимые строительные блоки имеются.

Они становятся лучше

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

Легко создать

Очень легко учиться. Так как функционал минимальный и он интуитивно понятен.

Очень быстрая зарядка

А это очень важно в современном мире мобильного интернета.

Выглядеть нормально

Очень простой. Неприхотливый супер дизайн. Но они хорошо выглядят.

Конструктор турбо страниц в Яндекс Директ

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

Инструкция по оформлению из панели Я.Директ:

• открыть Директ/Мои кампании, перейти в Инструменты/Конструктор;

• нажмите кнопку «Создать», выберите «Турбо»;

• введите название, выберите один из готовых шаблонов, а если сайт строится с нуля, то «Пустая страница»;

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

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

• после настройки шапки, тела, футера и других разделов нужно нажать «Опубликовать».

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

RSS-канал (канал, фид) — это динамический XML-файл. Он привязан к домену сайта и автоматически обновляется по мере добавления новых материалов на ресурс.

Для формирования RSS-ленты для турбо-страниц в CMS (WordPress, Drupal, Joomla, 1-С Битрикс) Яндекс рекомендует использовать плагины. Для других двигателей лента формируется самостоятельно.

rSS-структура

Канал должен быть отправлен в поисковую систему. Для этого есть два варианта:

• загрузка через функционал Вебмастера (для небольших сайтов за один раз можно передать до 1000 страниц);

• место с помощью API (подходит для всех сайтов) — требуется авторизация через токен OAuth.

Важно! Чтобы RSS-канал отображался правильно, необходимо разрешить его отображение в файле robots.txt.

Турбо страницы для интернет-магазина

Турбо-страницы подходят для владельцев малого бизнеса в сфере электронной коммерции. Например, тот, у кого есть определенный ассортимент товаров, но нет отдельного сайта. В этом случае технология временно заменит сайт на собственном хостинге, пока не будет создан полноценный интернет-магазин. А пока вы можете добавлять карточки товаров с изображениями, ценами и описаниями. Предусмотрена настраиваемая корзина; есть возможность редактировать и добавлять варианты оплаты/доставки.

Однако вскоре Яндекс обещает добавить функционал, который позволит запустить уже крупный интернет-магазин с поддержкой:

• промокоды при оформлении заказов;
• встроенный поиск с подсказками;
• настройка способов оплаты;
• динамический расчет стоимости доставки и многое другое.

Преимущества технологии Турбо для интернет-магазинов неоспоримы: растет охват и повышается конверсия, меньше отказов. Возможности страницы:

• мгновенная реакция на действия пользователя благодаря мобильной скорости;
• легкая настройка цветов и дизайна;
• формирование фрагментов с товарными листами или галереей изображений;
• наличие бокового меню с дополнительными разделами;
• автоматически заполняемые формы заказов;
• оплата в один клик и так далее

Создать турбо-сайт можно через конструктор Яндекс.Директа или из панели Вебмастера.

Ошибки турбо страниц

При модерации турбо-страниц бывает, что появляются сообщения об ошибках. Рассмотрим самые популярные.

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

• Ошибка проверки. Это происходит, если адрес RSS-ленты указан неверно или фид изначально забанен в robots.txt.

• Много изображений. Это не ошибка, а предупреждение. Вы можете оставить его или исправить. Как правило, он выделяется, если в тексте более 30 изображений.

Возможны другие ошибки.

Итого

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

Купить Отключить рекламу

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

Здравствуйте!

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

Что такое турбо-страницы Яндекса и для чего они нужны

Турбо-страницы — это легкие веб-страницы, которые загружаются в 15 раз быстрее. Даже при медленном интернет-соединении они открываются почти мгновенно. Быстрая загрузка происходит за счёт применения вёрстки, оптимизированной для мобильных устройств, и хранением данных таких страниц на серверах Яндекса. В поисковой выдаче турбо-страницы помечаются иконкой в виде ракеты.

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

По словам представителей Яндекса, турбо-страницы — это безграничные возможности для привлечения и удержания пользователей, увеличения доходов с показа рекламы. За 2018 год эту технологию внедрили десятки тысяч сайтов Рунета. Общее количество визитов на турбо-страницы перевалило отметку в 10 млрд. Миллионы уникальных посетителей предпочитают изучать контент именно на страницах с мгновенной загрузкой. Только представьте, сколько трафика вы потеряли, если до сих пор не подключили турбо-страницы. 

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

Лента рекомендаций на турбо-страницах

Страницы с ускоренной загрузкой не уменьшат ваши доходы от показа рекламы. На них тоже можно разместить рекламные блоки, используя авторасстановку. Судя по данным Яндекса, доход от 1000 показов рекламных блоков на сайтах с турбо-страницами вырос минимум на 40%.  

Рекламные блоки на турбо-страницах

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

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

Подключить турбо-страницы вполне реально своими руками, не прибегая к помощи веб-мастера. С этой пошаговой инструкцией вы точно не ошибётесь. 

Шаг 1:

Добавление сайта в Яндекс.Вебмастер

Войдите в свой аккаунт Яндекс.Вебмастера и добавьте сайт. Нажмите на кнопку «Добавить сайт», введите в поле домен вашего ресурса и нажмите на кнопку «Добавить».

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

Когда поисковик распознает метатег, кусок html-кода или изменённую DNS-запись, вы увидите в разделе «Настройки — Права доступа» пользователей, которые управляют сайтом. Теперь можно приступать к подготовке RSS-файла. 

Шаг 2: 

Подготовка RSS-файла 

Турбо-страницы статейных сайтов формируются из RSS-канала, а интернет-магазинов — из YML-файла. Для сайтов под управлением популярных CMS — WordPress, Bitrix, Drupal и т. д. — можно RSS с помощью плагинов. О них расскажу ниже. Для самописных CMS придётся создавать этот файл самостоятельно. 

Шаг 3: 

Загрузка RSS-файла в Вебмастер

Разместите готовый RSS-файл на сервере вашего сайта и загрузите его в панель вебмастера. Перейдите в раздел «Турбо-страницы — Источники», а в поле «Добавить RSS-канал» пропишите путь до RSS-файла на сервере и нажмите на кнопку «Добавить».

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

Шаг 4: 

Включение турбо-страниц

В настройках одного сайта вы можете указать до 10 источников данных турбо-страниц. Когда вы всё укажете в настройках, на той же странице передвиньте переключатель в положение «Вкл» и согласитесь с офертой.

Шаг 5: 

Установка Метрики и других счётчиков веб-аналитики

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

Помимо Яндекс.Метрики, вы можете привязать LiveInternet, Google Analytics, Mediascope, Mail.Ru, Rambler Топ-100.

Шаг 6: 

Настройка внешнего вида

Внешний вид турбо-страниц легко изменить в разделе «Турбо-страницы — Настройки». 

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

Меню. На турбо-страницах могут отображаться два меню — верхнее и основное. Чтобы добавить их, добавьте списком разделы и укажите ссылки на посадочные страницы.

Не забудьте сохранить изменения, кликнув на кнопку «Сохранить».

CSS. Отредактировав стили CSS, вы сможете изменить внешний вид турбо-страниц на мобильных устройствах и десктопе.

Нажмите на «Добавить CSS» и добавьте новые стили. Проверьте изменения в разделе «Турбо-страницы — Отладка». 

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

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

Поиск. Чтобы облегчить навигацию, разместите строку поиска. Укажите URL страницы результатов поиска в поле и нажмите кнопку «Сохранить».

Плагины турбо-страниц для CMS

Плагины турбо-страниц ускорят и облегчат процесс создания турбо-страниц. Вот модули для популярных CMS.

WordPress

1. 2.0 Yandex.News Feed by Teplitsa (плагин с конвертацией содержимого сайта в формат турбо-страниц)
2. 2.0 Яндекс Турбо-страницы (модуль с автоматическим созданием RSS-лент)
3. Ya Turbo (плагин с гибкой настройкой RSS 2.0 выгрузки)

Bitrix

1. Яндекс Турбо-страницы (RSS 2.0 с выгрузкой блоков и статичных страниц)
2. Яндекс Турбо-страницы (выгрузка инфоблоков с перелинковкой в виде RSS-файлов)
3. Яндекс Турбо-страницы Pro для 1С Битрикс (универсальный модуль для статейных сайтов и интернет-магазинов)

Opencart

• Яндекс Турбо-страницы для товаров 0.1 (модуль для интернет-магазинов)

Drupal

• Yandex.Turbo (выбор и выгрузка любых типов в RSS канал)

Joomla

• Расширение Joomla! (для турбо-страниц и Яндекс.Дзена)
• Яндекс Турбо-страницы (плагин с поддержкой материалов компонентов Content, Zoo, K2, JoomShopping и Virtuemart).

Как отключить турбо-страницы

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

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

Если вас не устраивает упрощённая вёрстка, вы можете отключить турбо-страницы. Чтобы это сделать, добавьте атрибут turbo=»false» в элемент item нужной страницы:

link — это URL страницы, для которой нужно отключить показ турбо-страниц. Изменения вступят в силу через несколько дней, а вместо турбо-страницы пользователи увидят десктопную или мобильную версию сайта. 

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

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

Светлана
Гайдышева, Руководитель отдела контекстной рекламы
AGGO

В этой статье Светлана Гайдышева, руководитель отдела контекстной рекламы AGGO, делится опытом настройки турбо-сайта, а еще рассказывает о его возможностях.

Скорость загрузки сайта — один из самых важных параметров в интернет-продвижении. В идеале страницы должны загружаться не более чем за 3 секунды, однако у среднестатистического сайта на это уходит примерно секунд 8.

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

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

Расскажем, что можно сделать, если сайт загружается медленно, а рекламную кампанию нет возможности отключить.

Один из самых простых способов — использовать специальные инструменты рекламных систем. Например, технология турбо-страниц в Яндекс.Директе позволяет создавать быстрые и легкие версии сайтов. Для разных целей Яндекс предлагает разное применение этой технологии:

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

Остановимся подробнее на том, как создавать турбо-сайты и какие возможности они предлагают.

Подробнее о турбо-сайтах

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

Главными преимуществами турбо-сайта являются:

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

Вот пример такого сайта.

Турбо-сайт позволяет создать как одностраничный лендинг, так и несколько отдельных страниц, которые будут объединены одним доменом такого вида: <name>.turbo.site. При этом свой уникальный домен использовать нельзя. В примере, который мы привели выше, адрес сайта такой: store.turbo.site.

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

Расскажем, как его создать.

Как создать турбо-сайт

Чтобы настроить турбо-сайт, не нужно обладать специальными знаниями. Яндекс позаботился о том, чтобы технология была доступна, и создал простой конструктор. Найти инструмент вы можете во вкладке «Конструктор Турбо-страниц» на странице «Мои кампании» в Яндекс.Директе.

В новом интерфейсе навигация находится в верхнем меню, в старом — в нижней части страницы.

Для начала вам необходимо выбрать уже готовый шаблон и адаптировать его под бизнес или создать свой макет с нуля. Шаблоны уже включают часть дизайна и тематические блоки (секции), которые вы можете легко отредактировать. Вы можете создать сайт как для интернет-магазина с товарами, так и для продвижения услуг.

Затем выберите секции, которые нужны вашему сайту, или отредактируйте те, что уже добавлены в шаблон.

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

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

• задать имя сайту или странице в формате name.turbo.site;
• выбрать из списка страниц, какая из них будет главной;
• загрузить фавиконку в формате PNG.

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

Другие возможности турбо-сайта

Создавайте сквозные секции

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

Шаг 1: выберите соответствующую вкладу у нужной секции.

Шаг 2: добавьте эту секцию в библиотеку и отметьте, что хотите сделать ее сквозной.

Подключайте электронную коммерцию

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

Убедитесь, что у вас добавлены и настроены секции «Товары» и «Шапка». Тогда корзина и форма оформления заказа автоматически появятся в шапке сайта.

Затем настройте окно оформления заказа. Эскиз находится под секцией «Подвал». Обязательно заполните поле «Юридическая информация» и добавьте ссылку на пользовательское соглашение.

Добавьте информацию из Яндекс.Справочника

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

Установите на сайт онлайн-чат

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

Затем добавьте секцию «Кнопки контактов», в панели справа выберите тип кнопки «Яндекс.Чаты» и укажите идентификатор диалога.

После этих действий на турбо-сайте появится кнопка диалога, которая будет перемещаться, когда пользователь будет прокручивать сайт.

Оптимизируйте текст под SEO

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

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

В поле «Описание» разместите текст с вашим предложением. В нем также должны быть ключевые слова, соответствующие поисковым запросам.

Добавьте счетчик Яндекс.Метрики

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

При создании автоматического счетчика цели также будут созданы автоматически. Если вы самостоятельно создаете счетчик, проставьте вручную идентификаторы в поле «Цели Яндекс.Метрики». Эти идентификаторы должны совпадать с идентификаторами в целях Яндекс.Метрики.

Укажите трекинговые параметры

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

Если вы выполнили все необходимые и дополнительные настройки, можете добавлять турбо-сайт к объявлениям. О том, как это сделать, читайте в справке Яндекса.

Подводя итог

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

Больше о турбо-страницах и о том, как продвигаться в интернете, если сайт плохой или его совсем нет, эксперты eLama рассказали на вебинаре.

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

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

Что из себя представляют Турбо-сайты и чем они выгодны

Турбо-сайт — простой сайт, который можно создать на основе Турбо-страниц в интерфейсе Яндекс.Директа. Он создается в конструкторе из готовых блоков. Если вы раньше работали с Тильдой или другими подобными сервисами — принцип создания вам уже знаком.

Турбо-сайт подойдет, если у вас еще нет сайта или вы хотите протестировать несколько гипотез, не задействуя основной сайт. 

Рассмотрим подробнее особенности и преимущества Турбо-сайтов.

Плюсы Турбо-сайтов

Оптимизированы под быструю загрузку

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

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

• лишних эффектов, замедляющих загрузку страницы;

• скриптов;

• «тяжелых» картинок и другой графики.

Это позволяет не терять пользователей, у которых на момент загрузки сайта плохой интернет (с обычными сайтами дело обстоит так: если страница не грузится в течение нескольких секунд — ее закрывают). 

Подходят для SEO 

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

Позволяют получать больше конверсий с мобильного трафика

Легкий вес страниц и быстрая загрузка на мобильных влияет на эффективность сайта. Чем меньше отказов (а Турбо-сайты позволяют снизить этот показатель до 30%), тем больше потенциальных клиентов попадают в воронку и в итоге вы получаете больше конверсий.

Бесплатны и без лимитов по количеству сайтов в аккаунте

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

Создаются в несколько кликов

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

Для тех, кто уже работал с конструкторами (например Wix или Тильдой), конструктор Турбо-сайтов от Яндекса будет максимально понятным.

Адаптивность

При создании Турбо-сайта не нужно переживать за адаптивность и готовить отдельные отображения для разных расширений экрана. Сайты уже адаптивные и при создании вы сможете в режиме предпросмотра проверить, как Турбо-сайт отображается на мобильных, а как — на десктопе.

Есть готовые шаблоны

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

Интегрированы с Метрикой

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

Есть функционал для интернет-магазинов

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

В каких случаях пригодятся Турбо-сайты

Турбо-сайты можно использовать для разных задач. Вот несколько вариантов, на которые вы можете ориентироваться:

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

• Как мобильная версия основного сайта. Этот вариант подойдет тем, у кого уже есть сайт, но нет адаптации под мобильные. Разработка и оптимизация мобильной версии может быть дорогой (и затяжной по времени), а Турбо-сайт создается быстро, уже имеет адаптацию и хорошую скорость загрузки страниц.

• Промо-страница. Универсальный вариант — подойдет для продвижения отдельных товаров/услуг (например, сезонного ассортимента), акций, конкурсов и других спецпредложений.

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

Инструмент простой, удобный и легко внедряется. Это дает возможность безболезненно тестировать офферы без затрат на дизайнеров и программистов.

Ограничения Турбо-сайтов

Недостатки у технологии тоже имеются. Функционал Турбо-сайтов ограничен, и вы не сможете:

• использовать собственный дизайн;

• редактировать исходный код сайта;

• добавлять дополнительные функции или модули;

• настраивать автоматическую выгрузку товаров с помощью фидов.

Тем не менее Турбо-сайты отлично подходят для тестирования различных гипотез и продвижения промоакций. А для небольших магазинов могут стать аналогом полноценного сайта на первое время (пока нет бюджета на разработку интернет-магазина или оплату дорогой CMS).

А теперь — к практике. Пошагово покажем, как работать с конструктором Турбо-сайтов и как создать в нем интернет-магазин детских игрушек.

Как настроить рекламу в Яндекс.Директе для лендинга

Пошаговый гайд: создаем Турбо-сайт с нуля 

Конструктор Турбо-страниц находится в разделе «Инструменты» Яндекс.Директа. Переходим в раздел и выбираем нужный инструмент:

Во всплывающем окне нам предлагают создать сайт с нуля или с помощью шаблона. В конструкторе доступно 16 шаблонов под разные ниши. Для интернет-магазина, например, в шаблоне уже созданы примеры карточек товаров (их нужно только отредактировать под свою тематику).

Также здесь можно указать следующие настройки:

• задать название первой страницы Турбо-сайта;

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

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

Первоначальные настройки

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

Пройдемся по основным настройкам, которые здесь есть.

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

Прописываем адрес сайта. Обратите внимание, Турбо-сайты всегда размещаются на домене turbo.site, но можно задавать произвольное название сайта. Наш сайт мы назовем так:

mirigrushek.turbo.site

После создания нескольких страниц здесь мы также сможем указать главную страницу (которая должна открываться по умолчанию при переходе по URL https://mirigrushek.turbo.site). 

Также загружаем фавиконку.

Счетчик Яндекс.Метрики

При создании сайта в Метрике автоматически генерируется новый счетчик, который связан с нашим Турбо-сайтом.

Вот так он отображается в Метрике:

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

В настройках счетчика можно добавить свой счетчик (если вы хотите отслеживать данные с помощью счетчика, который создали самостоятельно). В этом случае вам нужно будет вручную проставить идентификаторы целей, которые необходимо отслеживать. Если этот момент для вас не принципиально важен, рекомендуем все же использовать автоматический счетчик — это проще.

Настройки страницы

Здесь находятся настройки страницы, которая сейчас открыта в интерфейсе конструктора. Заполняем следующие поля:

• Адрес страницы. Система по умолчанию генерирует рандомный адрес, нам же нужно указать здесь нормальную ЧПУ-ссылку.

• Поля для SEO. Указываем заголовок страницы, описание. Дополнительно можно закрыть страницу от индексации, а также указать канонический адрес.

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

• Заполняем блок соцсети — влияет на то, как ссылка на ваш сайт будет выглядеть при публикации в соцсетях. Здесь нужно загрузить картинку, а также прописать заголовок и краткое описание.

Ссылки для просмотра

В этом разделе отображаются две ссылки:

• на опубликованную версию страницы;

• ссылка предпросмотра.

Моя организация

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

Создаем страницу в конструкторе

Теперь разберемся, как работать с конструктором (этот раздел будет полезен тем, кто раньше не работал с подобными сервисами). 

Главное в интерфейсе

В центральной области — страница сайта, которую можно собирать из готовых блоков. 

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

Строкой ниже — панель инструментов:

Здесь есть кнопки для различных действий:

• добавление секций;

• отмены/повторения внесенных изменений;

• переключение между вариантами отображения страницы — десктопная версия, планшетная и версия для мобильных), также есть кнопка предпросмотра;

• просмотр истории версий (вы сможете откатываться к предыдущим версиям или проверять изменения);

• копирование страницы;

• сохранение и публикация.

Страница собирается по принципу конструктора — из готовых секций (блоков), адаптированных для разных видов контента. Секции можно редактировать и менять местами. Если при создании страницы использовался шаблон, он уже содержит базовый набор блоков, подходящих для выбранной тематики. Вы можете использовать эту же структуру и изменить только контент. Либо редактировать и структуру:

• менять секции местами;

• удалять ненужные и добавлять новые.

Для создания нового блока необходимо:

1. Нажать «Добавить секцию» на панели инструментов 

2. Выбрать тип секций.

3. Выбрать вариант, который больше всего подходит для ваших задач.

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

Секция добавлена на страницу с шаблонными данными. Теперь наша задача — изменить содержимое:

• добавить логотип компании и указать название;

• убрать ненужные ссылки и добавить ссылки на будущие разделы сайта, которые пригодятся потенциальным клиентам (Товары, Доставка);

• добавить номер телефона и график работы. 

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

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

Чтобы изменить текст в любом элементе, достаточно просто кликнуть на него (появится курсор и вы сможете редактировать текст). Также это можно сделать в меню настроек секции — оно отображается справа.

В меню редактируем пункты (удаляем ненужные из шаблона и добавляем те, которые нам нужны). В настройках пункта указываем, что должно открываться при клике на него:

• секция текущей страницы;

• другая страница (страница Турбо-сайта или внешний ресурс).

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

Далее переходим к блоку «Контакты». Здесь можно указать четыре типа данных:

• телефон;

• адрес (физический адрес магазина или офиса);

• электронная почта;

• часы работы.

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

Добавляем и настраиваем обложку

В обложке можно поставить фоновое изображение, разместить заголовок с подзаголовком и кнопки для перехода к главным разделам страницы.

Создаем новую секцию, выбираем «Обложка» и нужный шаблон: 

Загружаем картинку для фона (кстати, фон можно просто залить цветом), и оформляем обложку в таком виде:

Размещаем секцию с описанием преимуществ магазина

В настройках секции можно выбрать:

• нужно ли отображать изображение (опция «Формат контента»);

• количество колонок;

• ширину и формат изображения.

Чтобы преимущества визуально выглядели еще лучше, добавляем к ним подложку со скругленными углами.

Добавляем секцию с товарами

При создании секции можно выбрать сетку компоновки товаров на странице — от одного до четырех в ряд. Нам подходит вариант «В четыре колонки» — так на одном экране сразу будут видны несколько позиций и клиентам будет проще ориентироваться в ассортименте.

Секция без добавленных товаров выглядит так:

Далее секцию нужно будет заполнить (ниже покажем подробнее, как это делается).

Помните, мы говорили о кнопке «Корзина» в шапке? Вот она, автоматически появляется в шапке после того, как на страницу добавили секцию «Товары»: 

После добавления секции с товарами появляется еще один блок — внизу страницы отображается предпросмотр формы заказа (она будет показываться клиентам при нажатии на кнопку «Купить»).

Создаем карточки товаров

Кликаем по секции «Товары» и переходим к её настройкам.

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

Что настраиваем:

• Количество колонок для карточек товара. Здесь важно уточнить, эта опция влияет только на десктопную версию сайта. На мобильных и планшетах будет только одна колонка (с другими секциями, у которых в структуре несколько колонок, произойдет то же самое). 

• Формат фото (если отключены дополнительные настройки, вы не увидите эту опцию). Здесь можно задать соотношение сторон для фото товаров (по умолчанию — 1:1).

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

В настройках секции можно управлять существующими товарами (редактировать, менять местами, копировать или удалять) а также добавлять новые.

Обратите внимание! Лимита на количество товаров нет, поэтому можете добавлять любое количество товаров. Единственный недостаток — каждый товар придется заводить вручную.

Как добавлять товары

Открываем режим редактирования товара (нужно кликнуть на иконку карандаша). Появится всплывающее окно с возможностью добавления необходимых данных.

Вот что здесь можно добавить:

• Изображение. Одна или несколько картинок, которые можно загрузить разными способами: с компьютера, из библиотеки Яндекса или выбрать из ранее загруженных.

Изображение нужно будет подогнать под формат:

Добавьте нужное количество изображений. Посетители сайта смогут кликать на основное фото в карточке товара и просматривать все изображения в виде слайдера.

• Название (длиной до 50 знаков) и описание. 

Для текста доступно базовое форматирование — выделение жирным, изменение цвета текста и добавление заливки. В описании текст также можно выделить курсивом или подчеркиванием. 

• Цена товара. Можно указать обычную цену или цену со скидкой. Для отображения скидки нужно заполнить оба поля.

Вот так отображаются скидки в карточках товаров:

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

• формат отображения скидки (в рублях или %);

• цвет зачеркнутой цены;

• цвет стикера с отображением размера скидки.

В секции с товарами можно настроить фон — добавить фоновое изображение или заливку цветом.

Правильное SEO для карточки товара

Добавляем секцию с картой и контактами магазина

Если клиенты могут прийти в офлайн-магазин или офис для самовывоза или приобретения товаров — добавляем карту с адресом и контактами.

Для этого нам понадобится секция «Контакты»:

Указываем контактную информацию (телефон, email, адрес и часы работы магазина).

Обратите внимание! На десктопе контакты отображаются в ряд, на мобильных устройствах и планшетах — в столбец. 

Дополнительно можно выбрать стиль иконок:

• темные;

• светлые;

• или совсем убрать иконки.

Чтобы в секции отобразилась карта с проставленной геометкой и схемой проезда, ее предварительно нужно создать в Конструкторе карт Яндекса. А затем добавить в настройках секции ссылку на нее.

Для карты доступна настройка размера (с помощью кнопок XS-XL). Также можно менять компоновку элементов секции — размещать контакты над картой или слева столбиком.

Внизу в секции с контактами можно добавить иконки аккаунтов соцсетей:

Редактируем форму заказа

Пролистываем страницу в самый низ — здесь находится предпросмотр формы заказа.

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

Обязательно нужно указать:

• Адрес электронной почты, на которую хотим получать заказы. Если у вас работают менеджеры, указывайте несколько адресов — заказы будут приходить на вашу почту и на почту менеджера.

• Юридическую информацию о компании или физлице.

Задаем поля для ввода 

По умолчанию при оформлении заказа необходимо заполнить поля с ФИО, телефоном и email.

Телефон и почта — обязательные поля. Их нельзя убрать из формы или отредактировать. 

Для поля «Ваше имя» доступны корректировки:

• можно отредактировать название поля;

• убрать или изменить плейсхолдер;

• сделать поле необязательным для ввода.

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

Варианты доставки

В блоке «Варианты получения заказа» необходимо задать варианты доставки, которые доступны клиентам.

В форме по умолчанию есть три базовых варианта доставки. Их можно удалить и добавить собственные. Ну или отредактировать существующие.

Способы оплаты

По умолчанию отображаются два способа оплаты: картой при получении или наличными.

Один из них можно удалить (два не получится, так как должен отображаться хотя бы один способ оплаты). Также можно менять название. Добавлять другие способы оплаты нельзя.

Как малому бизнесу рекламироваться в сервисах Яндекса

Последняя секция — футер

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

В настройках секции футера можно добавить больше информации для отображения:

• краткое описание компании;

• название компании и год основания;

• логотип;

• меню (ссылки на основные разделы или страницы);

• контакты;

• иконки социальных сетей.

Еще одна настройка — тема оформления. Есть два варианта: светлая или темная. Выберите подходящий вариант, исходя из общей стилистики страницы.

Финальная проверка и публикация

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

С помощью кнопок переключайтесь между режимами отображения и просматривайте, как меняется отображение контента в зависимости от типа устройства. 

Если все в порядке, публикуйте страницу.

Теперь вы сможете привлекать трафик на сайт и получать заказы.

Создавайте Турбо-сайты, получайте заказы и тестируйте гипотезы: это бесплатно и просто

Напоследок несколько советов:

• Соблюдайте принцип контрастности — это особенно важно, если вы размещаете текст на фоне картинки или подложки с цветной заливкой. Недостаточно контрастный цвет может сливаться с фоном и плохо считываться.

• Для СТА-кнопок контраст еще более важен. Незаметная кнопка может стать причиной низкой конверсии.

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

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

• Используйте не более 2 цветов для текста. Для выделения важной информации вообще достаточно полужирного начертания. А цветом при необходимости можно выделить важный фрагмент в заголовке обложки.

• Не размещайте слишком много информации и различных блоков на странице. Обилие контента может отвлечь пользователя от конверсионного действия (оформления заказа или звонка).

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