Cum trebuie să fie formatată pagina pe care…

Pentru SEO și confortul utilizatorului, atributul lang trebuie utilizat în fiecare pagină în tag-ul <html>.

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

Pentru a indica versiuni alternative ale paginii în alte limbi, se folosește meta-tag-ul hreflang în <head>. Acesta arată motoarelor de căutare (de exemplu, Google) că există alte variante în alte limbi ale aceleiași pagini.

Exemplu:

<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": indică versiunea în limba rusă a paginii.
hreflang="en": indică versiunea în limba engleză.
hreflang="x-default": indică pagina implicită, atunci când limba preferată a utilizatorului nu corespunde niciunei versiuni. De obicei, este pagina principală sau pagina de selecție a limbii.

Implementarea schimbării limbii pe frontend poate varia:

URL-uri separate pentru fiecare limbă: example.com/ru/page, example.com/en/page. Aceasta este abordarea preferată pentru SEO.
Parametri în URL: example.com/page?lang=ru, example.com/page?lang=en. Mai puțin preferat pentru SEO.
Cookie sau Local Storage: Limba este salvată pe partea clientului. Necesită procesare pe server sau redare pe client pentru afișarea conținutului în limba corectă.

Pentru gestionarea traducerilor pe frontend, se folosesc adesea biblioteci de internaționalizare (i18n):

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

Aceste biblioteci permit:

Extracția stringurilor pentru traducere din cod.
Gestionarea fișierelor de limbi diferite (de exemplu, în format JSON).
Schimbarea dinamică a limbii fără reîncărcarea paginii (deși pentru schimbarea completă a URL-ului și a conținutului, este mai bine să se folosească redarea pe server sau URL-uri separate).
Procesarea declinării, pluralului și formatarea datelor/numerelor specifice limbii.

Exemplu de utilizare a i18next cu React (schematic):

// 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) // transmite i18n la react-i18next
  .init({
    resources,
    lng: 'ru', // limba implicită
    interpolation: {
      escapeValue: false, // react protejează deja de 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')}>Rusă</button>
      <button onClick={() => changeLanguage('en')}>Engleză</button>
    </div>
  );
}

export default App;

Conținutul paginii (texte, imagini cu text) trebuie tradus și afișat în funcție de limba/URL-ul selectat.

Cum trebuie să fie formatată pagina pe care conținutul este disponibil în diferite limbi?