Две задачи одного элемента
Для пользователя переключатель — способ быстро открыть страницу на своём языке. Для поисковой системы это набор ссылок, по которым робот находит другие языковые версии. Если ссылки сделаны неправильно, страдает и то и другое: человек попадает не туда, а робот не находит переводы.
Куда должна вести ссылка
Главное правило: переключатель ведёт на эквивалент текущей страницы на другом языке, а не на главную страницу версии. Пользователь, читающий статью о доставке, хочет увидеть ту же статью на английском.
Если перевода конкретной страницы нет, допустимо вести на ближайший подходящий раздел версии — но лучше вовсе не показывать язык для такой страницы.
Как устроить ссылки
<nav aria-label="Язык">
<a href='/ru/delivery/' hreflang="ru" lang="ru">Русский</a>
<a href='/en/delivery/' hreflang="en" lang="en">English</a>
<a href='/de/lieferung/' hreflang="de" lang="de">Deutsch</a>
</nav>Каждый пункт — обычная ссылка с реальным адресом. Атрибуты hreflang и lang подсказывают браузеру и вспомогательным программам, на каком языке ссылка и её текст.
Хорошие и плохие решения
| Плохо | Хорошо | Почему |
|---|---|---|
| Выпадающий список, который ведёт на адрес только после скрипта | Обычные ссылки в разметке | Робот переходит только по настоящим ссылкам |
| Флаги вместо названий языков | Названия языков на самих языках | Флаг — это страна, а не язык |
| Ссылка всегда на главную страницу версии | Ссылка на эквивалент текущей страницы | Пользователь остаётся в контексте |
| Автоматическая смена языка при заходе | Выбор остаётся за пользователем | См. статью про автоопределение языка |
| Переключатель только в подвале | Заметное место в шапке | Пользователь ищет его сверху |
Запоминание выбора пользователя
Выбранный язык можно запомнить в cookie и использовать при следующем визите: например, показать пользователю подсказку или предложить перейти на его версию. Но адреса версий при этом остаются стабильными: один адрес — один язык. Автоматически подменять содержимое по cookie на том же адресе нельзя — робот увидит только одну версию.
Связь с hreflang: ссылки в переключателе и атрибуты hreflang должны вести на одни и те же адреса. Как задавать сами атрибуты — в статье про hreflang.
Доступность и удобство
- Текущий язык отмечен визуально и атрибутом
aria-current, чтобы пользователь понимал, где находится. - Пункты достаточно крупные для нажатия на телефоне и доступны с клавиатуры.
- Переключатель расположен на одном и том же месте на всех страницах.
- Названия языков не сокращаются до кодов вроде «RU» и «EN», если места достаточно.
Проверка перед запуском
| Что проверить | Как |
|---|---|
| Все ссылки ведут на страницы с кодом 200 | Прогнать краулером |
| Адреса совпадают с указанными в hreflang | Сравнить выгрузки ссылок и атрибутов |
| Переключатель работает без скриптов | Отключить выполнение скриптов и открыть страницу |
| Для непереведённых страниц нет ссылки на пустую версию | Проверить страницы без перевода |
Частые вопросы
Куда должен вести переключатель языка на внутренней странице?
На эквивалент этой же страницы на другом языке, а не на главную страницу версии, чтобы пользователь остался в том же контексте.
Можно ли использовать флаги для выбора языка?
Лучше нет: флаг обозначает страну, а не язык, поэтому надёжнее подписывать пункты названиями языков на самих этих языках.
Должен ли переключатель состоять из обычных ссылок?
Да: робот находит другие версии сайта только по настоящим ссылкам, а не по обработчикам событий.
Готовый адрес можно собрать прямо сейчас: откройте генератор ЧПУ — он транслитерирует фразу по таблице Яндекса, уберёт служебные слова и покажет длину адреса.