Kuidas peaks olema vormindatud leht, kus sisu on…

SEO ja kasutajasõbralikkuse tagamiseks igal lehel tuleks kasutada lang atribuuti <html>-s.

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

Alternatiivsete leheversioonide märkimiseks teistes keeltes kasutatakse <head>-is hreflang meta-tähist. See näitab otsingumootoritele (näiteks Google), et on olemas teised keeleversioonid samast leheküljest.

Näide:

<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": näitab vene keele versiooni.
hreflang="en": näitab inglise keele versiooni.
hreflang="x-default": näitab vaikimisi lehte, kui ükski keel ei vasta kasutaja eelistatud keelele. Tavaliselt on see peamine leht või keelevaliku leht.

Keelevahetuse funktsionaalsus frontendis võib olla erinev:

Eraldi URL-id iga keele jaoks: example.com/ru/page, example.com/en/page. See on SEO jaoks eelistatud.
Päringupäringud: example.com/page?lang=ru, example.com/page?lang=en. Vähem soovitatav SEO jaoks.
Cookie või Local Storage: Keel salvestatakse kliendi poolel. Vajalik on serveri või kliendi poolel töötlemine, et kuvada sobiv sisu.

Keelehalduseks kasutatakse sageli rahvusvahelistamise (i18n) raamatukogusid:

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

Need raamatukogud võimaldavad:

tõlkekirjete väljavõtmist koodist.
erinevate keelefailide haldamist (näiteks JSON-formaadis).
dünaamilist keelevahetust ilma lehe uuesti laadimata (kuigi täielik URL-i ja sisu vahetamine on parem serveripoolse renderduse või eraldi URL-ide kasutamisega).
keele käänete, mitmuse ja kuupäevade/numberite formaadi töötlemist keele järgi.

Näide i18next kasutamisest Reactiga (skeemiline):

// 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) // ühendab i18n react-i18next-ga
  .init({
    resources,
    lng: 'ru', // vaikimisi keel
    interpolation: {
      escapeValue: false, // react juba kaitseb xss-i eest
    },
  });

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')}>Vene keel</button>
      <button onClick={() => changeLanguage('en')}>Inglise keel</button>
    </div>
  );
}

export default App;

Sisu (tekstid, pildid tekstiga) peaks olema tõlgitud ja kuvatud vastavalt valitud keele/URL-ile.

Kuidas peaks olema vormindatud leht, kus sisu on saadaval erinevates keeltes?