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

html

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

Пример:

html

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

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

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

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

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

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

Извлекать строки для перевода из кода.
Управлять разными языковыми файлами (например, в формате JSON).
Динамически переключать язык без перезагрузки страницы (хотя для полного переключения URL и контента лучше использовать серверный рендеринг или отдельные URLы).
Обрабатывать склонения, множественное число и форматирование дат/чисел специфично для языка.

Пример использования i18next с React (схематично):

javascript

javascript

javascript

javascript

Сам контент страницы (тексты, изображения с текстом) должен быть переведен и отображен в зависимости от выбранного языка/URL.

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