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

Почему я ненавижу турбо-страницы от Яндекса

Яндекс запустил свою версию «ускоренных страниц» под названием “Турбо” в далеком 2017 году. Это был эксперимент, но прошло уже 5 лет, и я вижу в этой технологии больше проблем, чем их решения.

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

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

С точки зрения пользователя

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

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

С точки зрения разработчика

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

• Отдача контента через XML! Я, в принципе, понимаю почему так: Яндексу привычно работать с этим форматом, как и большим медийным площадкам — все Яндекс-новости экспортируются через RSS. Видимо, ставка была на то, чтобы интернет СМИ по-быстрому переделали свои RSS и не сильно нагружались. Поначалу так и было, но потом требований становилось все больше, функционал разрастался и нагрузка на разработчиков возросла до поддержки этого отдельного XML в постоянном режиме.
• Для обновления содержимого страницы необходимо перегенерировать все тот же XML, и, если на сайт добавлен новый виджет, то извольте отправить все страницы на инвалидацию, учитывая, что у нас несколько миллионов материалов, то задача с отправкой XML по API с квотированием 10 000 элементов на один канал (https://yandex.ru/dev/turbo/doc/api/quota.html) не выглядит такой уж тривиальной.
• Ошибки и предупреждения — это наша головная боль, их необходимо постоянно отслеживать, например, через Вебмастер, который является не самым дружественным инструментом с точки зрения интерфейса, да и сами ошибки иногда вводят в ступор, например: Внутри элемента turbo:content указан URL на Турбо-версию страницы. Чтобы не получать такое уведомление, укажите URL на обычную версию страницы и используйте атрибут data-turbo со значением true Тут редактор поставил ссылку на турбо страницу другого издания. Если Яндекс считает турбо полноценными страницами, почему это надо запрещать? В итоге приходится парсить страницы на наличие таких ссылок и заменять их на нормальные, спасибо за работу! Вот еще ошибка: Слишком много картинок в тексте страницы Да, на этой странице стоит фоторепортаж, у которого больше 30 изображений, таких материалов много, и их требуется удалить из выдачи, либо они сами исключаются из-за нарушений квотирования.

• Пользовательские компоненты. Это самое страшное зло. Мы не можем поставить на сайт виджет, которого нет в списке разрешенных для турбо-страниц https://github.com/turboext/components, в противном случае получим предупреждение: “Ваши турбо-страницы отличается от оригинала” , и они будут исключены из выдачи. В результате приходится неделями ждать, пока виджет будет доступен в репозитории турбо-компонентов, и только после этого размещать его на сайте. У нас случилась подобная история с озвучкой текста, его не было в списке турбо-компонентов, но мы разместили его на сайте, как итог получили множество предупреждений в Вебмастере. Виджет, конечно, пришлось снять, и дожидаться появления в официальном репозитории.

Не обошлось без проблем и в смежных областях.

С точки зрения маркетинга:

• Аналитика по дефолту! Можно добавить идентификаторы счетчиков Google Analytics (GA), Яндекс Метрики и т.д, без возможности настройки дополнительных параметров, в итоге мы теряем множество данных, а результаты выборок с основного сайта (где отправляются десяток пользовательских определений в GA) и турбо с трудом связываются между собой. Для примера: с сайта в GA отправляется информация об авторе материала, с возможностью в дальнейшем построить выборку «Как читали автора X», но в турбо такой возможности нет, и получается, что автор вообще не работал.
• Проблему идентичности ресурса уже описывал в разделе про пользователей, но страдают от нее и маркетологи, им стало сложнее продвигать бренд, который выглядит как сотня других и отличается только логотипом в верхнем углу экрана.
• Турбо затрудняет обмен ссылками на оригинальный материал. Находясь на такой странице, можно поделиться ссылкой только на турбо-страницу, т.е оригинальный ресурс не получает никакой обратной ссылки, ее получает Яндекс! В связи с этим у издателей есть тенденция удалять со страниц блок “sharing”.

С точки зрения ресурса

• Турбо-страницы принадлежат Яндексу и если компания в какой-то момент решит, проект не выгодный, и закроют его, владельцам ресурсов придется просто смириться, а все ссылки превратятся в ошибки 404. Рано или поздно это произойдет, и тогда проблема «битых ссылок» встанет максимально остро.
• Ресурсы вынуждены отдавать свои страницы Яндексу, в противном случае есть риск недополучить хоть какой-то трафик. Хотя и нет официальной информации о пессимизации за отсутствие турбо, но ставить эксперименты на себе никому не хочется.

Про отрицательные стороны поговорили, а есть ли позитивные моменты? Есть! Некоторые показатели у турбо выше — это, разумеется, скорость загрузки, показатели отказов и.. всё. Остальные, например, глубина просмотров и время проведенное пользователями на странице у сайта, больше.

Если резюмировать вышесказанное, проблемы турбо это:

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

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

«Яндекс.Вебмастер»: самый подробный обзор функционала

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

Ценность «Яндекс.Вебмастера» заключается и в том, что это абсолютно бесплатный инструмент. Если научиться использовать его потенциал «на полную», можно избавиться от необходимости платить за другие сервисы и существенно сократить сумму расходов на SEO-продвижение. В статье мы расскажем, как настроить «Вебмастер» «Яндекс» правильно и какие возможности он даёт.

Для чего используется «Яндекс.Вебмастер»

Когда SEO-специалист видит, что сайт «захандрил» — а главным признаком того является падение трафика — то первым делом отправляется в «Яндекс.Вебмастер». Благодаря «Яндекс.Вебмастер» проверить сайт удастся по множеству критериев:

• корректно ли отображается на мобильных устройствах;
• какие странички вылетели из индекса, изменилось ли их количество;
• изменилось ли количество внутренних и внешних ссылок;
• в порядке ли SSL-сертификат, а также файлы robots.txt, sitemap.xml;
• поменялось ли значение ИКС — индекса качества сайта;
• изменились ли позиции важных ключевых фраз.

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

Как добавить новый сайт в «Яндекс.Вебмастер»: пошаговая инструкция

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

Прежде всего зайдите на https://webmaster.yandex.ru/ , используя учетные данные вашей «Яндекс.Почты». Затем нажмите кнопку «+» в верхней панели сервиса.

Введите в пустое поле адрес ресурса и нажмите «Добавить».

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

• Добавить специальный метатег в раздел «head» главной страницы (1).
• Создать HTML-файл и добавить в корень сайта (2).
• Внести TXT-запись в DNS домена (3).

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

Подтвердили права? Теперь нажмите «Проверить». Проверка займёт несколько секунд, потом сервис вынесет вердикт: удалось вам связать ресурс с «Яндекс.Вебмастером» или нет.

Поисковой робот «Яндекс» индексирует ресурс спустя примерно 7 дней с момента его регистрации в «Яндекс.Вебмастере».

После привязки сайта к «Вебмастеру» вы можете сделать ещё одну полезную вещь — объединить сервис с «Яндекс.Метрикой» (конечно, если ею пользуетесь). Зайдите в настройки «Метрики» и нажмите кнопку «Отправить запрос ещё раз» напротив надписи «Не подтвержден в Вебмастере».

Удаление сайта из «Яндекс.Вебмастер»

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

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

Предварительная настройка «Яндекс.Вебмастер»

Представим, что вы успешно зарегистрировались в чудо-сервисе «Яндекс.Вебмастер» — что дальше? Предлагаем начать с основ и выполнить следующее:

• Проверить файл robots.txt. Путь: «Инструменты» — «Анализ robots.txt» — нажать кнопку «Проверить». Файл robots.txt в основном нужен, чтобы закрыть от индексации страницы, которые роботу не нужны — и тем самым избавить его от лишней работы.
• Добавить ссылку на sitemap. Путь: «Индексирование» — «Файлы Sitemap» — внести в окошко ссылку на карту сайта и кликнуть на «Добавить». Если вас терзает то, что пользователи «Яндекс» обходят ваш сайт вниманием несмотря на его солидный возраст, возможно, это простое действие позволит решить проблему.
• Задать региональность — указать поисковику, в каком городе вы предоставляете услуги. Путь: «Информация о сайте» — «Региональность». Напротив пункта «Вебмастер» стоит шестерёнка — нажмите на неё.

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

При отсутствии на сайте страницы с информацией о региональной принадлежности ресурса задать региональность в «Яндекс.Вебмастере» не получится. Заявку можно подать, но её отклонят.

Какой регион выбрать? Если продвигаете интернет-магазин, выбирайте регион, в котором находится ваша компания. Если у вас блог или «новостник», подойдёт вариант «Россия».

Обзор разделов «Яндекс.Вебмастера»

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

Сводка

Уже по названию «Сводка» понятно, что это раздел, в котором скомпилирована основная информация о сайте:

• Обновления поиска.
• Проблемы сайта.
• Индекс скорости сайта.
• Динамика показателя ИКС.
• Данные из «Яндекс.Справочника».
• Последние внешние ссылки.

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

Диагностика

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

• Фатальные — вероятно, сайт «лёг» и его необходимо реанимировать. Пример фатальной ошибки — наличие проблем с безопасностью.
• Критичные — влияют на ранжирование. Пример критичной ошибки — «отвалился» SSL-сертификат.
• Возможные — могут влиять на ранжирование. Пример возможной ошибки — отсутствие тегов Title и Description у страниц.
• Рекомендации. «Яндекс.Вебмастер» может порекомендовать изменить формат фавиконки или зарегистрироваться в «Яндекс.Справочнике». Следовать рекомендациям не обязательно.

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

Поисковые запросы

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

Из примера выше легко сделать вывод, что веб-мастеру стоит поработать над привлекательностью сниппетов, поскольку CTR — просто катастрофа.

Также статистику в разрезе «Показов», «Кликов» и CTR можно выгрузить по страницам — в подразделе «Статистика страниц».

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

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

Индексирование

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

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

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

Представление в поиске

В большей степени рекламная витрина «Яндекса». Этот раздел, который позволяет сделать вывод, достаточное ли количество инструментов поисковой системы пользователь задействовал, чтобы сделать привлекательным сниппет и попасть в «специальные ответы» (читай — в нулевую позицию). Мерой здесь выступает статус подключения — шкала справа вверху.

Ссылки

В этом разделе 2 подраздела: «Внутренние ссылки» и «Внешние ссылки». В подразделе «Внутренние ссылки» отображается список нерабочих внутренних ссылок. Если их так много, как на рисунке ниже — это повод срочно приступить к проработке перелинковки.

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

Информация о сайте

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

Зато в разделе «Информация о сайте» «Яндекс.Вебмастера» региональность сайта задать по-прежнему можно. Причём не только для самого «Вебмастера», но и для «Яндекс.Справочника».

Турбо-страницы

Турбо-страницы — это версии страниц ресурса, облегченные ПС с целью увеличения скорости загрузки. Турбо-страницы на «мобильниках» загружаются втрое быстрее обычных.

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

В новейшей версии «Яндекс.Вебмастера» под турбо-страницы выделили сразу 2 раздела: первый — для контентных сайтов (блогов), второй — для интернет-магазинов.

Инструменты

Раздел «Инструменты» включает в себя набор важных для СЕО-шника сервисов. Эти сервисы позволяют:

• Выявить ошибки в файлах robots.txt и sitemap.xml.
• Проверить ответ сервера.
• Удалить страницы сайта из поиска. За день — максимум 500 штук.
• Проанализировать микроразметку и мобильную версию сайта.

Все инструменты здесь предельно просты. Работа веб-мастера сводится в основном к тому, чтобы вставить ссылку в пустое окошко и ознакомиться с результатом, который сервис выдаст через 2-3 секунды.

Настройки

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

Через настройки вы также можете привязаться к «Яндекс.Метрике» и получить код для добавления иконки «Яндекс ИКС» на сайт.

Полезные сервисы

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

Итоги

Разбираясь, для чего нужен «Яндекс.Вебмастер», приходишь к интересному выводу: программа — не только про продвижение в «Яндексе». «Вебмастер» содержит много полезных сервисов, которые анализируют сайт безотносительно к поисковой системе. В частности, инструменты «Валидатор микроразметки» и «Проверка мобильных страниц» можно считать универсальными — данные, которые они дают, помогают сделать сайт лучше для обоих поисковиков.

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

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

Вы можете самостоятельно управлять показами Турбо-страниц. Если вам нужно, чтобы Турбо-страница перестала отображаться, то передайте в RSS-канале в элементе item нужной страницы атрибут turbo со значением false. Отключение страницы произойдет в течение нескольких дней. Подробнее есть в Помощи: https://yandex.ru/support/webmaster/turbo/turn-on.html

Буду рад ответить на ваши вопросы про Директ, РСЯ, ADFOX, Метрику и Бизнес.
На сайте с 09.11.2018
26 февраля 2019, 07:36

Дмитрий Громов:
Вы можете самостоятельно управлять показами Турбо-страниц. Если вам нужно, чтобы Турбо-страница перестала отображаться, то передайте в RSS-канале в элементе item нужной страницы атрибут turbo со значением false. Отключение страницы произойдет в течение нескольких дней. Подробнее есть в Помощи: https://yandex.ru/support/webmaster/turbo/turn-on.html

Спасибо. А по поводу всплывающих форм обратной связи и картинок — их отображение невозможно в турбо-страницах ?

На сайте с 28.03.2008
26 февраля 2019, 07:45

Поддерживаются ли Виджеты Маркета на турбо-страницах? Можно ли как-то сделать чтобы они выводились? Будет ли их поддержка в будущем включена?

На сайте с 14.02.2013
26 февраля 2019, 14:17

Дмитрий Громов, Дим Adsence порубили, а кликабельные баннеры для монетизации уже как 1 год не можете сделать. Как быть простым, рядовым? Adfox интерефейс дико сложный, да и свою комиссию забираете. В чем проблема дать людям возможность напрямую работать с рек. площадками?

https://semotion.ru — позитивное продвижение сайтов 😉
На сайте с 08.02.2009
26 февраля 2019, 16:14

Дмитрий Громов, здравствуйте! Подскажите, пожалуйста, именно на сегодняшний день на Турбо страницах будет работать вот такой калькулятор — считать и подбирать цвет + отправка заявок на e-mail? Просто, ранее наш программист сказал – «калькулятор и подбор цвета работать не будет на Турбо», а для нас это большой минус, и именно по этой причине на Турбо пока не переходим. Потому что есть хороший сегмент аудитории, который целенаправленно вводит поисковые запросы с целью онлайн расчёта, и если онлайн расчёт не будет работать на Турбо = мы ввели пользователя в заблуждение, т.е. он не решит свою задачу которую вводил в поисковую систему, и это как-бы не по наше вине, а потому что Турбо не позволяют этого сделать. При этом вы рекомендуете подключать Турбо, да я и сам за Турбо, но ведь функционал должен работать? Если уже это реализовано – я извиняюсь, значит, упустил нужную информацию.

На сайте с 15.08.2018
27 февраля 2019, 15:08

reFLASHer:
Дмитрий Громов, такие вопросы:

1. Стоит ли отдавать разный контент в Турбо-страницы и обычные страницы?

Какой будет принцип ранжирования тогда?

Привожу пример — страница (в обычной выдаче) — занимает 10 место.

Турбо-страница с другим текстом — 50 место.

Что произойдет дальше?

Станет 30 место в обычной выдаче?

Или делать одинаковый контент правильнее?

2. Стоит ли делать Турбо-страницы для всего сайта или отдельных страниц?

Т.е. 100 страниц. Для 10 из них сделаны Турбо-страницы.

100 страниц — 1 главная Турбо-страница.

100 страниц — 100 Турбо-страниц.

Как количество Турбо-страниц влияет на ранжирование?

Количество страниц не влияет на ранжирование. Вы можете сделать Турбо-страницы как для всего сайта, так и для отдельных страниц. При этом контент на Турбо-версиях должен полностью совпадать с тем, который размещен на основных страницах вашего сайта: https://tech.yandex.ru/turbo/doc/rss/requirements-docpage/

paypay3:
Новостные страницы дублирую через rss в турбо-страницы
Надо ли в простых моих страницах ставить canonicial или что-то в этом роде? А турбо сама по себе ранжируется, моя страница сама по себе (ниже).

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

TheVS:
Чем Турбо лучше AMP?

Что мешает добавить возможность вставлять adsense без кривого костыля в виде adfox?

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

Saaa:
Добрый день. Подскажите, пожалуйста, насколько целесообразно подключать турбо страницы для сайта медклиники ? Учитывая что на сайте много поп-апов (кнопки при нажатии на которые выскакивает форма для обратной связи), картинок. Я же так понимаю все эти элементы не отображаются на турбо страницах.

Стоит попробовать вне зависимости от тематики. Турбо-страницы можно легко и быстро включить. Новая Турбо-страница попадет в ленту в течение суток. В рамках такого эксперимента вы сможете понять, как технология повлияет на ваш сайт и оценить все преимущества. Что касается элементов, то их большая часть будет доступна на Турбо-версии. Подробнее есть в Помощи: https://tech.yandex.ru/turbo/doc/rss/elements/header-docpage/ Если у вас возникнут вопросы, связанные с созданием страниц, напишите в поддержку. Коллеги помогут с рекомендациями.

Saaa:
Спасибо. А по поводу всплывающих форм обратной связи и картинок — их отображение невозможно в турбо-страницах ?

Возможно отображение картинок, а также блоков с «Обратной связью» и «Формой обратной связи». Список элементов, которые могут использоваться на Турбо-страницах есть в Помощи: https://tech.yandex.ru/turbo/doc/rss/elements/feedback-docpage/

qilly:
Поддерживаются ли Виджеты Маркета на турбо-страницах? Можно ли как-то сделать чтобы они выводились? Будет ли их поддержка в будущем включена?

В настоящий момент такого функционала нет. Пожелание коллегам передал. Информация о ближайших планах развития сервиса Турбо-страниц: https://yandex.ru/turbo

MegaSEOkg:
Дмитрий Громов, здравствуйте!
Подскажите, пожалуйста, именно на сегодняшний день на Турбо страницах будет работать вот такой калькулятор — считать и подбирать цвет + отправка заявок на e-mail?
Просто, ранее наш программист сказал – «калькулятор и подбор цвета работать не будет на Турбо», а для нас это большой минус, и именно по этой причине на Турбо пока не переходим. Потому что есть хороший сегмент аудитории, который целенаправленно вводит поисковые запросы с целью онлайн расчёта, и если онлайн расчёт не будет работать на Турбо = мы ввели пользователя в заблуждение, т.е. он не решит свою задачу которую вводил в поисковую систему, и это как-бы не по наше вине, а потому что Турбо не позволяют этого сделать. При этом вы рекомендуете подключать Турбо, да я и сам за Турбо, но ведь функционал должен работать?

Если уже это реализовано – я извиняюсь, значит, упустил нужную информацию.

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

Турбо-сайты в Яндекс.Директе: кому они пригодятся и как их создать

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• менять секции местами;
• удалять ненужные и добавлять новые.

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

1. Нажать «Добавить секцию» на панели инструментов
2. Выбрать тип секций.
3. Выбрать вариант, который больше всего подходит для ваших задач.

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

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

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

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

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

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

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

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

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

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

• телефон;
• адрес (физический адрес магазина или офиса);
• электронная почта;
• часы работы.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• краткое описание компании;
• название компании и год основания;
• логотип;
• меню (ссылки на основные разделы или страницы);
• контакты;
• иконки социальных сетей.

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

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

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

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

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

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

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

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

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

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