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

Ответ от нейросети

sobes.tech AI

Для многоязычных страниц используется атрибут lang на элементе <html> для указания основного языка страницы. Для отдельных элементов с контентом на другом языке можно использовать атрибут lang непосредственно на этих элементах.

Также важно использовать мета-тег <meta charset="UTF-8"> для корретной поддержки символов разных языков.

Для поисковых систем и удобства навигации можно использовать теги <link rel="alternate" hreflang="<код_языка>" href="<URL_страницы_на_данном_языке>"> в секции <head> для указания альтернативных версий страницы на других языках.

Пример:

<!DOCTYPE html>
<html lang="ru"> // Основной язык - русский
<head>
  <meta charset="UTF-8">
  <title>Многоязычная страница</title>
  <link rel="alternate" hreflang="en" href="https://example.com/en/"> // Ссылка на английскую версию
  <link rel="alternate" hreflang="es" href="https://example.com/es/"> // Ссылка на испанскую версию
</head>
<body>
  <h1>Привет мир!</h1>
  <p>Это пример текста на русском языке.</p>
  <p lang="en">This is an example text in English.</p> // Часть текста на английском
</body>
</html>

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

JavaScript: Динамическая подгрузка переводов или перенаправление пользователя на соответствующую версию страницы.
Библиотеки: Использование специализированных библиотек для интернационализации (i18n), например, react-i18next для React.

Серверная реализация может включать:

Маршрутизация: Настройка веб-сервера для обработки URL с указанием языка (/en/page, /es/page).
Шаблонизаторы: Использование серверных шаблонизаторов с поддержкой интернационализации для рендеринга контента на нужном языке.

Важно обеспечить соответствие информации на всех языковых версиях и использовать понятные URL-адреса.