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

Sobes Copilot

Получайте ответы в реальном времени

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

sobes.tech AI

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

<html lang="ru">
  ...
</html>

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

Пример:

<head>
  <link rel="alternate" hreflang="ru" href="https://example.com/страница" />
  <link rel="alternate" hreflang="en" href="https://example.com/en/page" />
  <link rel="alternate" hreflang="x-default" href="https://example.com/" />
</head>

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 (схематично):

// src/i18n.js
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

import translationEN from './locales/en/translation.json';
import translationRU from './locales/ru/translation.json';

const resources = {
  en: {
    translation: translationEN,
  },
  ru: {
    translation: translationRU,
  },
};

i18n
  .use(initReactI18next) // passes i18n to react-i18next
  .init({
    resources,
    lng: 'ru', // default language
    interpolation: {
      escapeValue: false, // react already safes from xss
    },
  });

export default i18n;

// src/locales/ru/translation.json
{
  "title": "Привет, мир!"
}

// src/locales/en/translation.json
{
  "title": "Hello, world!"
}

// src/App.js
import React from 'react';
import { useTranslation } from 'react-i18next';

function App() {
  const { t, i18n } = useTranslation();

  const changeLanguage = (lng) => {
    i18n.changeLanguage(lng);
  };

  return (
    <div>
      <h1>{t('title')}</h1>
      <button onClick={() => changeLanguage('ru')}>Русский</button>
      <button onClick={() => changeLanguage('en')}>English</button>
    </div>
  );
}

export default App;

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