Kaip turėtų būti suformatuota puslapis, kuriame…

SEO ir naudotojo patogumui kiekviename puslapyje turėtų būti naudojamas lang atributas <html> žymėje.

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

Alternatyvių puslapio versijų kitomis kalbomis nurodymui naudojamas <head> viduje hreflang meta žymė. Ji rodo paieškos sistemoms (pvz., Google), kad egzistuoja kitos kalbų versijos to paties puslapio.

Pavyzdys:

<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": nurodo rusų kalbos versiją.
hreflang="en": nurodo anglų kalbos versiją.
hreflang="x-default": nurodo numatytąją puslapio versiją, kai nė viena kalba neatitinka naudotojo pageidaujamos kalbos. Dažniausiai tai pagrindinis puslapis arba kalbos pasirinkimo puslapis.

Kalbų perjungimo funkcionalumas gali būti įvairus:

Atskiri URL kiekvienai kalbai: example.com/ru/page, example.com/en/page. Tai yra pageidautinas SEO požiūriu.
Užklausos parametrai: example.com/page?lang=ru, example.com/page?lang=en. Mažiau pageidautina SEO.
Cookie arba Local Storage: Kalba saugoma kliento pusėje. Reikalingas serverio ar kliento pusės apdorojimas, kad būtų rodomas atitinkamas turinys.

Kalbų valdymui dažnai naudojamos internacionalizacijos bibliotekos:

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

Šios bibliotekos leidžia:

išgauti teksto eilutes iš kodo vertimui.
valdyti skirtingus kalbų failus (pvz., JSON formatu).
dinamiškai keisti kalbą be puslapio perkrovimo (nors pilnam URL ir turinio keitimui geriau naudoti serverio renderinimą arba atskirus URL).
tvarkyti kalbos linksniavimą, daugiskaitą ir datos/skaičiaus formatavimą pagal kalbą.

Pavyzdys i18next naudojimo su React (schematiškai):

// 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) // perduoda i18n react-i18next
  .init({
    resources,
    lng: 'ru', // numatytoji kalba
    interpolation: {
      escapeValue: false, // react jau saugo nuo 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')}>Anglų</button>
    </div>
  );
}

export default App;

Turinys (tekstas, paveikslėliai su tekstu) turi būti išverstas ir rodomas priklausomai nuo pasirinktos kalbos/URL.

Kaip turėtų būti suformatuota puslapis, kuriame turinys yra prieinamas įvairiomis kalbomis?