Турбо-страницы Яндекса: пошаговое руководство

Поговорим про турбо-страницы Яндекса.

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

Преимущества у турбо-страницы Яндекса следующие:

— Ускоренная загрузка. Личный тест: 5 секунд у обычного лендинга на Tilda против 2 секунд у турбо-страницы.

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

— Интуитивно понятный и удобный конструктор. Я освоила его минут за 20 и дальше уже приступила к созданию самого сайта.

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

Минусы:

— Чересчур минималистичный дизайн, из-за чего один турбо-сайт похож на другой.

— Не поставить сторонние системы аналитики: пиксели соцсетей и Google Analytics. Только Яндекс.Метрика и UTM-метки.

Сегодня я составлю путеводитель по конструктору Яндекс.Директа для новичков. Покажу, как пошагово и просто создать турбо-страницу, которая поможет вашему продвижению в интернете. Результат будет по ссылке в конце, чтобы вы сами убедились в удобстве турбо-сайта и скорости его загрузки. Начнём!

Для создания турбо-сайта нам понадобятся:

— Открытый кабинет Яндекс.Директ

— Фотографии вашего продукта

— Фантазия, воображение, копирайтерские таланты — текст на странице тоже нужен

В кабинете переходим во вкладку “Инструменты”, ищем блок “Конструктор Турбо-страниц”, нажимаем “Подробнее”.

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

Так выглядит окно при создании Турбо-сайта

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

Всего у Яндекса 16 шаблонов + №17 — пустая страница с нуля. Вы можете сами просмотреть, что из себя представляют шаблоны, просто дважды на них кликнув. Если вас не устроит содержимое, просто удалите её. Позже покажу, как это делается

Кратко о 4 основных и самых универсальных шаблонах:

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

Или интернет-магазин букетов, на примере Яндекса

— Базовый. Один экран с фото, описанием в пару предложений и лид-формой. Лучше всего подойдёт, если вы продаёте билеты на какое-то мероприятие, например, концерт. Ещё хорошо зайдёт в нишу срочных услуг, например, вскрытие замка у захлопнувшейся двери или выездного шиномонтажа — фото мастера, указание цен, пара предложений про “приедем за 10 минут в любой район города” и лид-форма. Всё. Людям в таких ситуациях обычно не до красивой обёртки и гениально продающих текстов — им нужна максимальная оперативность услуги.

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

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

Например, здесь Яндекс предлагает тест-драйв автомобиля

— Товарный. Подойдёт для любого товарного интернет-магазина с очень маленьким выбором, буквально 2-3 товара. От интернет-магазина отличается лишь оформлением.

Пример с деревянным оружием. Кстати, интересно, как бы такая страница прошла модерацию Яндекса

Остальные шаблоны нишевые, останавливаться на них я не буду — четыре вышеперечисленных и так прекрасно справятся.

Сегодня я остановлюсь на информационном шаблоне

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

Кстати, о моём продукте — сегодня это будет питомник мопсов “Чёрные ушки”. Цель страницы — рассказать о питомнике, показать щенков и взрослых собак, оставить контакты, по которым можно связаться с заводчиками и купить себе одного из малышей.
Сразу покажу, какой сайт у меня получился:

Двойным кликом выбираем нужный шаблон. Видим следующий экран.

Обратите внимание на блок справа — здесь находятся части сайта. Их можно перемещать, удалять, ну и менять, конечно же! Чем мы и займёмся.

Начнём с шапки: кликаем на саму шапку и нам открывается меню. Начнём с пункта «Дизайн». Здесь мы выбираем нужный нам формат логотипа (или удаляем его, тут уж как вам нужно).
По умолчанию «Шапка» фиксируется в верхней части экрана и висит на протяжении скроллинга всего сайта. Это можно отключить также в пункте «Дизайн», чуть ниже переключатель «Фиксировать при скролле».

Форматы логотипа: «иконка», «текст», «текст + иконка» или «без логотипа»

Так в итоге выглядят шапка и меню на мобильных устройствах

Теперь переходим в пункт «Контент»: здесь мы заполняем текст сайта, контактные данные и меню, о котором я расскажу чуть позже. Обязательно нужно заполнить название компании, а также поставить логотип, если вы выбрали его отображение.

Остальные пункты особого значения для меня не имеют, поэтому оставляю их пустыми

 

Также все заголовки и названия можно редактировать прямо на экране предпросмотра

Далее «Меню». Здесь всё очень просто: берём и редактируем, удаляем или добавляем.

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

Кнопка редактирования выделена на скриншоте

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

Заполняем ваши соцсети

** Instagram, продукт компании Meta, которая признана экстремистской организацией в России

Ставим кнопку в шапку. Я решила поставить её со скроллом к секции формы. Также тут можно поменять цвет шрифта и заливку кнопки, нажав на «Настроить стиль». Я решила сделать кнопку синей с белым текстом.

Следующий блок: «обложка». Здесь мы остаёмся в пункте «Контент». Заполняем заголовок и изображение. Подзаголовок и кнопку по желанию.

1. нечётные блоки будут служить заголовками. Чётные — описанием. Соответственно, заполняем мы у каждого только их.
2. далее практически везде мы работаем только в пункте «Контент». В «Дизайне» можно отредактировать отступы. Стандартные настройки выглядят достаточно хорошо, поэтому я не рекомендую их трогать. Если нужно будет обратиться к пункту «Дизайн», я напишу об этом дополнительно.

Блок «Текст 1». Помните о связи с «Меню»? Давайте введём заголовок его пункта.

Заполняем заголовок

Секция «Текст 2». Развиваем мысль, выраженную в заголовке («Текст 1»). Здесь также есть заголовок, подзаголовок и описание. Заполню лишь последнее.

Пишем, какие мы хорошие и уникальные, чем хорош наш продукт

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

«Текст 4» — по аналогии с «Текст 2»: пишем описание к заголовку

Результат: «Текст 3» и «Текст 4» вместе

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

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

«Текст 5» в этом шаблоне снова связан с меню, теперь уже с третьим пунктом. Заполняем заголовок.

«Текст 6» предваряет блок «Форма». Рекомендую написать сюда что-то такое, что зацепит посетителя, заставит задуматься и оставить заявку. Решила попробовать так

Ввожу цепляющее описание в текст 6

«Форма» — самый главный блок, ради которого мы и делали этот сайт. Здесь мы снова заполняем название компании, а также ИНН. В полях формы просим клиента оставить контакты (номер телефона, e-mail, не важно), имя и что-то на своё усмотрение.

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

Кнопку формы можно отредактировать так же, как и кнопку в «шапке», которую мы делали в самом начале.

Обязательно нужно указать наименование и ИНН компании/физ.лица, если вы или ваш заказчик — самозанятый. Это будет отображаться в пункте «Подробнее», под кнопкой «Отправить»

После заполнения формы и её отправки, пользователь увидит «Сообщение благодарности». К сожалению, ни удалить, ни отредактировать его нельзя.

«Кнопки контактов» — ссылки на соцсети или мессенджеры. Укажите все, возможно, чтобы клиент мог связаться с вами любым удобным ему способом.

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

У меня это будет ВКонтакте, например

В блоке «Подвал» вы можете написать информацию о компании, вновь поставить логотип, меню, контакты — прямо как в «Шапке». Я решила не дублировать её, и оставить «Подвал» как есть.

Турбо-сайт почти готов, остались лишь штрихи.

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

Сначала жмём «Предпросмотр»…

Осталось только задать адрес сайта. Переходим в настройки, нажимая на кнопку шестерёнки.

Сразу же откроются настройки сайта. Введите туда имя, которое считаете нужным. По желанию, добавьте фавиконку в формате PNG.

А как же аналитика?! Куда ставить Яндекс.Метрику?

Про неё я не забыла. Дело в том, что счётчик Яндекс.Метрики ставится на турбо-страницу автоматически. Более того: цели тоже создаются без вашего участия.

Все цели скринить не буду, их 76 штук на все случаи жизни. Как-то удалить или отредактировать их нельзя.

Как удалить страницу: в стартовой странице конструктора видим кнопку «Создать». Создаём папку, называем, например «Корзина».

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

Переносим в «Корзину» и нажимаем «Сохранить здесь».

Из двух мы выбираем ту, что я выделила

Правой кнопкой мыши нажимаем на «Корзину», нажимаем кнопку «Удалить». Всё готово!

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

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

P.S. Питомник «Чёрные ушки» — выдуманный от начала до конца: адрес ненастоящий, телефон тоже, кнопки соцсетей ведут на мои аккаунты.

 

Автор: Alice Syrowatko

 

Читайте другие материалы блога

Яндекс Бизнес: как настроить, возможности, инструменты, плюсы

Google Мой бизнес: как создать аккаунт

Динамические объявления в Яндекс Директ: как настроить