Как добавить селектор языка на свой сайт: 2 метода

Подведите итог этому посту следующим образом: 8 мин чтения

ЧатGPT Недоумение Грок Google ИИ

Добавить селектор языка на сайт можно двумя способами. Создайте его самостоятельно в виде списка ссылок на каждую языковую версию текущей страницы или используйте инструмент перевода веб-сайта, который добавляет переключатель, который вы можете настроить. Какой бы вариант вы ни выбрали, селектор должен отображаться на каждой странице и помечать каждый язык на этом языке (немецкий, испанский, французский). Он также должен удерживать посетителя на той же странице при переключении и позволять людям выбирать, а не перенаправлять его.

Оба метода приведены ниже, шаг за шагом, с кодом, который вы можете скопировать, и правилами проектирования, которые рекомендуют W3C и Google.

Ключевые выводы

• Селектор языка должен ссылаться на реальный отдельный URL-адрес для каждого языка вместо замены текста скриптом. Отдельные URL-адреса позволяют поисковым системам индексировать каждую версию.
• Обозначайте языки их собственными названиями (“Deutsch”, а не “German”) и не полагайтесь только на флаги. W3C рекомендует не использовать флаги стран для идентификации языков.
• Разместите селектор в одном и том же месте на каждой странице, обычно в заголовке или фиксированном углу, и удерживайте посетителей на той же странице при переключении.
• Не принуждайте посетителей переходить на другой язык с помощью IP-адреса или настроек браузера. Google не рекомендует автоматические перенаправления между языковыми версиями и предлагает вместо этого связывать их.
• Перевод инструменты, такие как ConveyThis, автоматически добавляют селектор и позволяют стилизовать его (флаги, метки, положение, цвета) без кода.

Что делает селектор языка хорошим

Эти правила взяты из руководства по интернационализации W3C и документации Google по многоязычным сайтам:

1. Разместите это на каждой странице. W3C говорит: “Всегда лучше добавлять ссылки на версии на альтернативных языках, и делать это на каждой странице” (W3C).
2. Назовите каждый язык на его родном языке. Носитель немецкого языка, просматривающий английскую страницу, ищет “Deutsch”, а не “German.” W3C рекомендует, чтобы ссылки были “на языке страницы, на которую они указывают.”
3. Относитесь к флагам как к необязательному украшению, а не как к этикетке. W3C говорит: “Не поддавайтесь искушению использовать флаги стран для обозначения языков. В некоторых странах существует более одного языка, а на некоторых языках говорят более чем в одной стране.” Если вы используете флаги для стиля, всегда показывайте рядом с ними название языка.
4. Держите посетителя на одной странице. Переход на испанский с /pricing должен приземлиться на /es/pricing, не на домашней странице в Испании.
5. Не применяйте принудительные перенаправления. Google советует: “Избегайте автоматического перенаправления пользователей с одной языковой версии сайта на другую языковую версию сайта,” и предлагает вместо этого добавлять гиперссылки на другие языковые версии (Центр поиска Google). Если вы хотите предложить язык на основе браузера, используйте баннер, который посетитель может отклонить, вместо перенаправления.
6. Сделайте его простым в поиске и использовании. Поместите его в знакомое место (в правом верхнем углу заголовка или в нижнем колонтитуле на сайтах с большим количеством контента), сделайте его достаточно большим, чтобы можно было нажать на телефон, и убедитесь, что он работает с клавиатурой.

Метод 1: создайте селектор языка самостоятельно

Используйте это, если вы управляете собственным HTML или темой, и каждый язык уже имеет свой собственный URL-адрес.

Шаг 1: убедитесь, что у каждого языка есть свой URL-адрес

Селектор связывает версии, поэтому версии должны существовать первыми: example.com/about, example.com/de/about, example.com/es/about. Если вы все еще выбираете структуру, см подкаталоги против поддоменов для многоязычного SEO.

Шаг 2: добавьте разметку селектора

Самый простой доступный селектор — это список ссылок. Каждая ссылка говорит, на какой язык она ведет (hreflang) и на каком языке написан его текст (lang):

<nav aria-label="Language">
  <ul class="lang-switcher">
    <li><a href="/about" hreflang="en" lang="en" aria-current="true">English</a></li>
    <li><a href="/de/about" hreflang="de" lang="de">Deutsch</a></li>
    <li><a href="/es/about" hreflang="es" lang="es">Español</a></li>
    <li><a href="/fr/about" hreflang="fr" lang="fr">Français</a></li>
  </ul>
</nav>

Эта разметка работает по трем причинам:

• Простые ссылки можно сканировать, поэтому поисковые системы обнаруживают все языковые версии.
• lang по каждой ссылке позволяет читателям экрана правильно произносить “Deutsch”.
• aria-current отмечает язык, который посетитель читает сейчас.

При наличии более пяти языков раскрывающийся список экономит место. Используйте кнопку, которая открывает список, а не <select> который перемещается при изменении, что неудобно для пользователей клавиатуры.

Шаг 3: сгенерируйте ссылки для текущей страницы

Каждая ссылка должна указывать на текущую страницу на другом языке. В CMS это обычно происходит из-за переменных многоязычного плагина или шаблона. На статическом сайте сгенерируйте список во время сборки из карты эквивалентных URL-адресов. Не кодируйте жестко ссылки на домашнюю страницу каждого языка.

Шаг 4: добавьте теги hreflang в заголовок страницы

Видимый селектор предназначен для людей. Поисковые системы также нуждаются <link rel="alternate" hreflang="…"> теги в <head> каждой страницы, перечисляя все языковые версии, включая саму страницу, а также x-default. Наш полное руководство по hreflang показывает точную наценку.

Шаг 5: тест

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

Вы получаете полный контроль над дизайном и поведением. Стоимость заключается в том, что вы самостоятельно поддерживаете сопоставление URL-адресов, теги hreflang и переводы.

Метод 2: используйте селектор инструмента перевода веб-сайта

Инструмент перевода создает языковые версии, их URL-адреса, теги hreflang и селектор вместе, что позволяет синхронизировать их. С ConveyThis, переключатель добавляется при установке плагина, приложения или скрипта, и вы настраиваете его из настроек панели управления без написания кода.

Вот настройки, которые вы можете изменить:

Чтобы следовать лучшим практикам, изложенным выше, с помощью ConveyThis:

1. Установите метку на родное название языка. Сохраните флаги в качестве визуального дополнения или отключите их.
2. Поместите переключатель в заголовок, указав идентификатор элемента там, где он должен отображаться, чтобы он располагался там, где его ожидают посетители.
3. Оставьте необязательное автоматическое перенаправление по языку браузера отключенным, если у вас нет веской причины его использовать. Сама панель управления предупреждает, что поисковые роботы могут следовать таким перенаправлениям.
4. Выберите структуру URL (подпапки, поддомены или ?lang; домены второго уровня на плане Extreme). Теги Hreflang добавляются автоматически.

Подробнее о текущем дизайне читайте в познакомьтесь с новым переключателем языка, или см. руководства по платформе WordPress и Shopify.

Вы не пишете код, селектор, URL-адреса и hreflang автоматически синхронизируются, и это работает на большинстве платформ. Вы получаете меньше контроля над разметкой, чем при полностью индивидуальной сборке, хотя вы все равно можете размещать и стилизовать переключатель.

Какой метод выбрать?

Распространенные ошибки выбора языка

• Использование только флагов. Означает ли испанский флаг Испанию, Мексику или Аргентину? Швейцарский флаг — немецкий, французский или итальянский? Всегда добавляйте этикетку.
• Перечисление языков только на английском языке. Посетитель из Японии может не узнать это слово “японский”.
• Удаление посетителей с главной страницы после их переключения.
• Скрытие селектора в меню гамбургера на рабочем столе или за крошечным значком.
• Автоматическое перенаправление по IP-адресу или языку браузера, без возможности возврата назад.
• Переключение языков только по скрипту, без отдельных URL-адресов, поэтому поисковые системы видят только один язык.

Часто задаваемые вопросы

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

Должен ли я использовать флаги в переключателе языков? Только рядом с названиями языков. Флаги представляют страны, а не языки, поэтому сами по себе они сбивают с толку посетителей многоязычных стран и носителей широко распространенных языков.

Должен ли мой сайт автоматически менять язык в зависимости от браузера? Лучше не форсировать. Google не рекомендует автоматические перенаправления между языковыми версиями. Если вы хотите помочь посетителям, покажите им предложение, которое они могут принять или отклонить, и всегда держите селектор видимым.

Помогает ли выбор языка SEO? Сам селектор помогает поисковым системам находить ваши языковые версии с помощью сканируемых ссылок. Рейтинги на каждом языке зависят от наличия отдельных URL-адресов, тегов hreflang и переведенных метаданных.

Чтобы настроить переключатель, переведенные страницы и hreflang вместе, попробуйте ConveyThis бесплатно. Планы есть на страница цен.