Comment doit-on formater la page où le contenu est…

Pour le SEO et la commodité de l'utilisateur, il faut utiliser l'attribut lang dans la balise <html> sur chaque page.

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

Pour indiquer des versions alternatives de la page dans d'autres langues, on utilise la balise meta hreflang dans <head>. Elle indique aux moteurs de recherche (par exemple, Google) qu'il existe d'autres versions dans différentes langues de la même page.

Exemple:

<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": indique la version en russe de la page.
hreflang="en": indique la version en anglais.
hreflang="x-default": indique la page par défaut lorsque aucune langue ne correspond à la préférence de l'utilisateur. Généralement, c'est la page principale ou la page de sélection de langue.

La mise en œuvre du changement de langue en frontend peut varier:

URLs séparées pour chaque langue: example.com/ru/page, example.com/en/page. C'est l'approche préférée pour le SEO.
Paramètres dans la requête: example.com/page?lang=ru, example.com/page?lang=en. Moins préféré pour le SEO.
Cookies ou stockage local: La langue est sauvegardée côté client. Nécessite un traitement côté serveur ou un rendu côté client pour afficher le contenu dans la langue appropriée.

Pour gérer les traductions en frontend, on utilise souvent des bibliothèques d'internationalisation (i18n):

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

Ces bibliothèques permettent:

Extraire les chaînes pour la traduction du code.
Gérer différents fichiers de langue (par exemple, en JSON).
Changer dynamiquement la langue sans recharger la page (bien que pour un changement complet d'URL et de contenu, il soit préférable d'utiliser le rendu côté serveur ou des URLs séparées).
Traiter les déclinaisons, la pluralisation et le formatage des dates/nombres spécifiques à la langue.

Exemple d'utilisation de i18next avec React (de manière schématique):

// 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) // passe i18n à react-i18next
  .init({
    resources,
    lng: 'ru', // langue par défaut
    interpolation: {
      escapeValue: false, // react protège déjà contre 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;

Le contenu de la page (textes, images avec texte) doit être traduit et affiché en fonction de la langue/URL sélectionnée.

Comment doit-on formater la page où le contenu est disponible dans différentes langues?