Хлебные крошки на Tilda: как добавить навигационную цепочку

Хлебные крошки — строка навигации вида «Главная → Услуги → Чистка зубов», которая показывает, где находится посетитель. На Tilda, в отличие от CMS с древовидной структурой, страницы не связаны в иерархию автоматически. Поэтому навигационную цепочку приходится планировать и собирать вручную.

Нужны ли крошки вашему сайту

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

• разделы услуг и отдельные страницы услуг
• блог с рубриками и статьями
• каталог с категориями и товарами

Для одностраничного лендинга или сайта из пяти страниц крошки не нужны: навигацию закрывает меню.

Сначала — структура адресов

Tilda позволяет задать адрес каждой странице вручную. Прежде чем рисовать крошки, приведите адреса к иерархии: /uslugi/, /uslugi/chistka/, /blog/, /blog/kak-vybrat-implant/. Тогда цепочка на странице будет совпадать с адресом, и поисковику проще понять структуру сайта.

Варианты реализации

Текстовый блок со ссылками

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

Zero Block

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

HTML-блок

Для полного контроля можно вставить цепочку HTML-кодом через блок для собственного кода. Этот вариант удобен тем, что вместе с видимыми ссылками можно добавить и микроразметку.

Микроразметка BreadcrumbList

Чтобы поисковик точно понял цепочку, добавьте разметку Schema.org типа BreadcrumbList в формате JSON-LD. В ней перечисляются элементы по порядку: позиция, название и адрес. Разметку можно вставить в HTML-блок на странице или в код, который Tilda позволяет добавить в заголовок страницы через её настройки.

Важно, чтобы данные разметки совпадали с видимыми крошками. Проверить разметку можно инструментом проверки расширенных результатов Google и валидатором микроразметки в Яндекс Вебмастере.

Каталог Tilda

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

Правила оформления

• Цепочка стоит в верхней части страницы, до заголовка H1
• Первый элемент — «Главная», а не логотип
• Названия коротко повторяют названия разделов в меню
• Текущая страница — последним элементом, без ссылки
• Разделитель — стрелка или косая черта, одинаковые на всём сайте

Типичные ошибки

• Крошки скопированы с другой страницы, и название текущей не поменяли
• Ссылки ведут на страницы, которые были удалены или переименованы
• На мобильных цепочка занимает три строки и сдвигает первый экран
• Разметка BreadcrumbList не совпадает с видимыми крошками
• Крошки добавлены, а адреса страниц остались плоскими и без логики

Пример для сайта услуг

Представим клинику косметологии в Ташкенте: на Tilda есть раздел «Процедуры» и дюжина страниц отдельных процедур. На каждой странице процедуры под меню стоит строка: «Главная / Процедуры / Чистка лица». Адреса выстроены так же: /procedures/ и /procedures/chistka-lica/. В подвале и на странице раздела есть ссылки на все процедуры. При такой схеме посетитель, пришедший из поиска на конкретную процедуру, одним нажатием переходит к полному списку, а поисковик видит понятную двухуровневую структуру вместо набора разрозненных лендингов.

Поддержка в актуальном состоянии

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