Middle
20
0
questionbank

Как следует оформлять страницу, на которой контент доступен на разных языках?

Answer from sobes.tech neural network

Для SEO и удобства пользователя на каждой странице следует использовать атрибут lang в теге <html>.

html

Для указания альтернативных версий страницы на других языках используется мета-тег hreflang в <head>. Он показывает поисковым системам (например, Google), что существуют другие языковые варианты этой же страницы.

Пример:

html
  • hreflang="ru": указывает на русскую версию страницы.
  • hreflang="en": указывает на английскую версию.
  • hreflang="x-default": указывает на страницу по умолчанию, когда ни один из языков не соответствует предпочитаемому языку пользователя. Обычно это главная страница или страница выбора языка.

Реализация переключения языков на фронтенде может быть разной:

  1. Отдельные URL для каждого языка: example.com/ru/page, example.com/en/page. Это предпочтительный подход для SEO.
  2. Параметры запроса: example.com/page?lang=ru, example.com/page?lang=en. Менее предпочтительно для SEO.
  3. Cookie или Local Storage: Язык сохраняется на стороне клиента. Требуется серверная обработка или клиентский рендеринг для отображения контента на нужном языке.

Для управления переводами на фронтенде часто используют библиотеки интернационализации (i18n):

  • React: react-i18next, react-intl
  • Vue: vue-i18n
  • Angular: @angular/localize
  • Vanilla JS: i18next

Эти библиотеки позволяют:

  • Извлекать строки для перевода из кода.

Для SEO и удобства пользователя на каждой странице следует использовать атрибут lang в теге <html>.

html

Для указания альтернативных версий страницы на других языках используется мета-тег hreflang в <head>. Он показывает поисковым системам (например, Google), что существуют другие языковые варианты этой же страницы.

Пример:

html
  • hreflang="ru": указывает на русскую версию страницы.
  • hreflang="en": указывает на английскую версию.
  • hreflang="x-default": указывает на страницу по умолчанию, когда ни один из языков не соответствует предпочитаемому языку пользователя. Обычно это главная страница или страница выбора языка.

Реализация переключения языков на фронтенде может быть разной:

  1. Отдельные URL для каждого языка: example.com/ru/page, example.com/en/page. Это предпочтительный подход для SEO.
  2. Параметры запроса: example.com/page?lang=ru, example.com/page?lang=en. Менее предпочтительно для SEO.
  3. Cookie или Local Storage: Язык сохраняется на стороне клиента. Требуется серверная обработка или клиентский рендеринг для отображения контента на нужном языке.

Для управления переводами на фронтенде часто используют библиотеки интернационализации (i18n):

  • React: react-i18next, react-intl
  • Vue: vue-i18n
  • Angular: @angular/localize
  • Vanilla JS: i18next

Эти библиотеки позволяют:

  • Извлекать строки для перевода из кода.

Register or sign in to get access to full answers for all questions from the question bank.

internationalizationlocalizationmulti-languageweb-designuser-experienceurl-strategieshreflang
Our Telegram Channel