Come dovrebbe essere formattata la pagina in cui il…

Per SEO e comodità dell'utente, si dovrebbe usare l'attributo lang nel tag <html> in ogni pagina.

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

Per indicare versioni alternative della pagina in altre lingue, si utilizza il meta tag hreflang in <head>. Questo mostra ai motori di ricerca (ad esempio Google) che ci sono altre versioni della stessa pagina in diverse lingue.

Esempio:

<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": indica la versione in russo della pagina.
hreflang="en": indica la versione in inglese.
hreflang="x-default": indica la pagina di default quando nessuna lingua corrisponde alle preferenze dell'utente. Di solito è la pagina principale o la pagina di selezione della lingua.

L'implementazione del cambio di lingua nel frontend può variare:

URL separati per ogni lingua: example.com/ru/page, example.com/en/page. Questo approccio è preferibile per SEO.
Parametri di query: example.com/page?lang=ru, example.com/page?lang=en. Meno preferibile per SEO.
Cookie o Local Storage: La lingua viene salvata sul lato client. Richiede elaborazione lato server o rendering lato client per mostrare il contenuto nella lingua corretta.

Per gestire le traduzioni nel frontend, si usano spesso librerie di internazionalizzazione (i18n):

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

Queste librerie permettono:

Estrarre le stringhe per la traduzione dal codice.
Gestire diversi file di lingua (ad esempio in formato JSON).
Cambiare dinamicamente lingua senza ricaricare la pagina (anche se per un cambio completo di URL e contenuto, è meglio usare il rendering lato server o URL separati).
Gestire declinazioni, plurali e formattazione di date/numeri specifici della lingua.

Esempio di utilizzo di i18next con React (schematico):

// 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) // passa i18n a react-i18next
  .init({
    resources,
    lng: 'ru', // lingua di default
    interpolation: {
      escapeValue: false, // react già protegge da 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')}>Russo</button>
      <button onClick={() => changeLanguage('en')}>Inglese</button>
    </div>
  );
}

export default App;

Il contenuto della pagina (testi, immagini con testo) deve essere tradotto e mostrato in base alla lingua/URL selezionata.

Come dovrebbe essere formattata la pagina in cui il contenuto è disponibile in diverse lingue?