Как связать языковые версии сайта и не отправлять всех на главную
Переключатель языка — не две буквы в углу, а карта соответствий между страницами. Если посетитель читает услугу на русском, кнопка EN должна открыть ту же услугу на английском, а не главную. Дизайнеру не нужно писать роутер: сначала собираются пары страниц и обычные ссылки, затем небольшой мод может синхронизировать язык документа, текущий пункт и сохранённый выбор.
Мультиязычный сайт часто начинают с шапки: рисуют RU / EN, копируют страницу и только потом решают, куда ведут две ссылки. Для лендинга из одной страницы это ещё можно исправить вручную. На сайте услуг из двадцати страниц такая схема быстро превращается в список случайных переходов.
Короткий ответ
Сначала создайте отдельные страницы каждого языка и таблицу их соответствий.
Сделайте переключатель обычными ссылками, которые работают без JavaScript.
После этого модификация может подсветить текущий язык, поставить lang и помнить
выбор. Она не переводит контент и не заменяет SEO-настройку языковых версий.
Начните не с кнопки, а с карты страниц
Для небольшого сайта достаточно простой таблицы:
| Русская версия | Английская версия |
|---|---|
/ | /en/ |
/services/ | /en/services/ |
/contacts/ | /en/contacts/ |
/portfolio/project-a/ | /en/portfolio/project-a/ |
Эта таблица отвечает на главный вопрос переключателя: куда вести с текущей страницы. Если пары нет, решение тоже нужно записать — скрыть язык, оставить текущую страницу или вести на языковую главную.
Не оставляйте выбор на усмотрение кода. Скрипт не знает, является ли
/portfolio/coffee-shop/ парой для /en/cases/cafe/, если вы не сказали ему об
этом явно.
Что можно сделать без кода
Для сайта из нескольких страниц соберите переключатель в меню или Zero Block и
назначьте каждой кнопке обычный адрес пары. У ссылки должен быть настоящий
href, а не только действие по клику.
Преимущества простого варианта:
- работает, даже если JavaScript не загрузился;
- адрес видно и можно проверить в редакторе;
- клиент может заменить ссылку самостоятельно;
- браузерная кнопка «Назад» ведёт себя ожидаемо.
Если страниц немного, это уже готовое решение. Модификация не обязательна.
Что означает язык проекта
Тильда хранит язык проекта в атрибуте data-tilda-project-lang. Её скрипты читают
это значение для части системных словарей — например, подписей магазина.
Но одна настройка проекта не создаёт структуру мультиязычного сайта. Она не решает автоматически:
- какая русская страница соответствует английской;
- куда вести из портфолио или статьи;
- какие адреса указать в
hreflang; - какую страницу 404 показывать для языка;
- как перевести свои тексты, формы и сообщения.
Отдельно проверяйте корзину, поиск и поля адреса: часть подсказок может зависеть от внешнего сервиса или браузера, а не только от языка видимого контента.
Где нужен MOD-170
Для большого клиентского сайта поддерживать десятки ссылок вручную неудобно. MOD-170 задуман как один слой над уже готовой структурой:
- берёт явную карту пар страниц;
- оставляет посетителя в том же разделе;
- ставит языку документа правильный
lang; - подсвечивает текущий пункт RU или EN;
- помнит сделанный выбор там, где пара существует.
Мод не подменяет тексты через JavaScript. Такой «перевод» плохо редактируется, не виден клиенту как отдельная страница и создаёт проблемы с поиском.
MOD-170 уже собран: языковые ссылки размечаются data-mk-lang, остаются обычными
ссылками без JavaScript, а мод добавляет lang, активное состояние и память
выбора посетителя.
Что проверить до показа клиенту
Пройдите сайт не по меню, а переключателем:
- Главная RU → главная EN → назад.
- Услуга RU → та же услуга EN.
- Страница портфолио → её смысловая пара.
- Прямая ссылка на английскую страницу в новом окне.
- Страница, у которой пары пока нет.
- Форма, корзина и сообщение после отправки на обоих языках.
Особенно полезен четвёртый пункт. Сайт должен понимать английский адрес не только после того, как посетитель сначала побывал на русской версии.
Что передать клиенту
Вместе с сайтом отдайте таблицу пар и короткое правило добавления новой страницы:
- Создать обе языковые версии.
- Перевести заголовок, описание, форму и системные сообщения.
- Добавить пару в карту переключателя.
- Проверить ссылки в обе стороны.
- Настроить SEO-метаданные для обеих страниц.
Тогда клиент сможет расширять сайт, не вспоминая, где спрятан случайный скрипт.