Переключатель языков на сайте: удобный, доступный и безопасный для SEO

Хороший переключатель языков на сайте находится на каждой странице в одном и том же месте, обычно в правом верхнем углу, показывает языки их собственными названиями (Deutsch, Español, Русский) и при выборе ведёт не на главную, а на ту же страницу на выбранном языке. Флаги — лишь вспомогательный знак рядом с названием языка, а меню должно работать с клавиатуры и с программой экранного доступа. В статье разбираем расположение, спор «флаги или названия», риски автоматического перенаправления, правила доступности и настройку переключателя в WordPress — на примере переключателя этого сайта.

Где разместить переключатель языков

Большинство пользователей ищут переключатель в правом верхнем углу, рядом с главным меню. Если нет веской причины ломать эту привычку, ставьте его туда и держите на одном месте на всех страницах. Второй список языков в подвале помогает тем, кто долистал страницу до конца. Это особенно полезно на длинных страницах, например в статьях блога. На мобильных переключатель должен быть либо небольшой кнопкой в верхней панели, либо заметным разделом в раскрытом меню; крошечную ссылку в самом низу меню легко не заметить.

Флаги или названия языков

Флаги обозначают страны, а языки принадлежат людям. Английский — это Великобритания или США, испанский — Испания или Мексика, арабский — какая страна? Переключатель из одних флагов легко понять неправильно, а некоторых посетителей он может задеть. Поэтому всегда пишите название языка, причём на самом этом языке: носитель немецкого быстрее узнает «Deutsch», чем «немецкий». Полностью отказываться от флагов не нужно — рядом с названием они ускоряют поиск глазами. Главное — выбрать для каждого языка один флаг и использовать его везде одинаково.

Иногда страна и язык действительно расходятся. Для программ, которые продаются по всему миру в одной валюте, язык важнее страны: например, наша программа табло Multi Score Screen для спортивных объектов указывает цены тарифов в долларах США, и на сайте такого продукта достаточно выбора языка. Если цены, доставка или юридические тексты зависят от страны, предлагайте выбор языка и страны в отдельных меню.

Почему эмодзи-флаги создают проблемы

Эмодзи-флаги вроде 🇷🇺 в некоторых системах отображаются двумя буквами вместо флага; распространённые браузеры в Windows не рисуют эмодзи-флаги. Поэтому на этом сайте флаги нарисованы как небольшие встроенные SVG: никаких запросов к внешним файлам и сервисам, одинаковый вид в любой системе, скрыты от программ экранного доступа, а название языка всегда написано рядом.

Куда должен вести выбор языка

Отправлять на главную страницу посетителя, сменившего язык, — самая частая ошибка. Тот, кто был на странице услуг и переключился на английский, хочет увидеть английскую страницу услуг. Каждая языковая ссылка должна вести на аналог текущей страницы. Если перевода нет, сообщите об этом и отправьте посетителя на ближайшую подходящую страницу, например список статей блога на этом языке, и не выводите hreflang для непереведённых страниц. Технические детали — в нашем руководстве по hreflang.

Автоматическое перенаправление: осторожно

Автоматически перенаправлять посетителей по языку браузера или IP-адресу заманчиво, но здесь два риска. Первый — удобство: русскоязычный посетитель, живущий в Германии, не обрадуется, если его принудительно отправят на немецкую версию. Второй — поисковые системы: Google не рекомендует автоматически перенаправлять пользователей по предполагаемому языку и советует вместо этого давать ссылки на все языковые версии, потому что поисковые роботы должны видеть каждую из них. Безопасная схема такая: при первом визите предложите язык браузера, запомните выбор пользователя в cookie и держите переключатель всегда доступным. Перенаправление по языку браузера в AYM Multilingual тоже запоминает выбор посетителя.

Доступность: меню, удобное для всех

• Доступное имя: кнопка языка должна озвучиваться понятно, например «Язык: Русский».
• Состояние: если используется выпадающее меню, кнопка сообщает, открыто оно или закрыто.
• Клавиатура: меню открывается клавишей Enter или пробелом, перемещение — стрелками, закрытие — Esc.
• Атрибуты языка: каждая ссылка указывает свой язык, чтобы программа экранного доступа правильно произнесла название.
• Видимый фокус: при навигации с клавиатуры должно быть ясно видно, какой пункт в фокусе.
• Декоративные флаги: скрывайте флаги от программ экранного доступа — информацию несёт название языка.

Простая структура, следующая этим принципам, выглядит так:

<div class="lang">
  <button type="button" aria-expanded="false" aria-controls="lang-menu"
          aria-label="Language: Deutsch">
    <svg aria-hidden="true" viewBox="0 0 5 3">…</svg> DE
  </button>
  <ul id="lang-menu" hidden>
    <li><a href="/tr/hizmetler" hreflang="tr" lang="tr">Türkçe</a></li>
    <li><a href="/services" hreflang="en" lang="en">English</a></li>
    <li><a href="/de/dienstleistungen" hreflang="de" lang="de" aria-current="true">Deutsch</a></li>
  </ul>
</div>

Со скольких языков нужно выпадающее меню

При двух-трёх языках быстрее всего показать их рядом в виде ссылок: смена языка в один клик. Начиная с четырёх языков аккуратнее выглядит выпадающее меню. Отмечайте текущий язык, не переводите названия языков и держите постоянный порядок (по алфавиту или по приоритету рынков) и делайте пункты достаточно крупными, чтобы по ним было удобно попадать пальцем на телефоне.

Типичные ошибки из практики

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

Настройка переключателя в WordPress

Большинство плагинов мультиязычности позволяют добавить переключатель как пункт меню, виджет, блок или шорткод. Наш AYM Multilingual сопоставляет меню, шапку и подвал для каждого языка и перенаправляет по языку браузера, запоминая выбор посетителя. Если вы добавляете язык впервые, сначала продумайте структуру URL и процесс перевода; пошагово об этом — в руководстве как добавить язык на сайт WordPress. Переключатель хорош настолько, насколько хорош контент за ним, поэтому прочитайте и статью про локализацию и перевод.

Чек-лист

1. Находится ли переключатель на всех страницах в одном месте и легко ли его найти на телефоне?
2. Названы ли языки своими названиями, а флаги — лишь подсказка?
3. Ведёт ли каждая ссылка на аналог текущей страницы?
4. Работает ли автоматическое перенаправление только как предложение и запоминается ли выбор?
5. Можно ли пользоваться меню с клавиатуры и программой экранного доступа?

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

Поделиться:XLinkedInWhatsApp