Как настроить фильтры в Tilda с обновлением URL и мета-тегов
Многие владельцы сайтов на Tilda сталкиваются с задачей: при выборе фильтра (например, по категории товара) нужно динамически менять URL, заголовок страницы (title) и мета-описание (description), но при этом сама панель фильтрации должна оставаться на месте. Создавать отдельную страницу под каждую комбинацию - трудоёмко и неудобно. Разберём, как это реализовать без лишних страниц.
Почему стандартные фильтры Tilda не подходят
Встроенные фильтры в Tilda работают на уровне JavaScript и не меняют URL страницы. Поисковые системы не видят отфильтрованные варианты, поэтому ранжирование страниц с фильтрами затруднено. Чтобы исправить ситуацию, нужно использовать кастомные решения с параметрами GET-запроса.
Реализация через параметры URL
Для обновления URL при выборе фильтра используйте JavaScript, который добавляет в адресную строку параметр ?category=название. Например, при клике на пункт «Обувь» URL становится site.ru/catalog/?category=obuv. Это позволяет:
- Сохранять состояние фильтра при перезагрузке страницы;
- Передавать ссылку на отфильтрованный список;
- Индексировать страницы поисковиками (при правильной настройке).
Как менять title и description динамически
Используйте блок Zero Block или вставьте HTML-код с JavaScript, который при изменении параметра ?category подставляет нужный заголовок и описание через document.title и document.querySelector('meta[name="description"]').content. Заранее подготовьте массив соответствий: например, для «obuv» - title «Купить обувь в Москве», description «Большой выбор обуви по низким ценам».
Ограничение выбора одного пункта
Чтобы не ломать логику фильтрации, действительно стоит разрешить выбор только одной категории. Реализуйте радиокнопки или скрипт, который снимает выделение с предыдущего пункта при клике на новый. Это упрощает работу с мета-тегами и предотвращает конфликты.
Сохранение панели фильтрации
Панель фильтрации остаётся видимой, так как вы не перезагружаете страницу целиком, а только обновляете контент и мета-теги. Используйте AJAX-подгрузку товаров или скрытие/показ блоков через классы. Главное - не использовать редирект на отдельные страницы.
Альтернативный подход: Zero Block с базой данных
Если у вас много товаров, рассмотрите интеграцию Tilda с внешней базой данных (например, через API). Zero Block позволяет выводить данные из JSON-файла, который вы обновляете вручную или через CMS. Фильтрация происходит на стороне клиента, URL меняется через History API.
Проверка индексации
После настройки убедитесь, что поисковые системы видят отфильтрованные страницы. Добавьте в robots.txt разрешение на индексацию параметров, а в sitemap.xml - основные комбинации. Используйте Google Search Console для проверки.