Kā būtu formatētai lapa, kurā saturs ir pieejams…

SEO un lietotāja ērtībai katrā lapā būtu jāizmanto lang atribūts <html> tagā.

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

Lai norādītu alternatīvas lapas versijas citās valodās, izmanto <head> iekšā hreflang meta tagu. Tas rāda meklētājprogrammām (piemēram, Google), ka ir citas valodu versijas šai pašai lapai.

Piemērs:

<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": norāda uz krievu valodas versiju.
hreflang="en": norāda uz angļu valodas versiju.
hreflang="x-default": norāda uz noklusējuma lapu, kad neviena valoda neatbilst lietotāja vēlamajai valodai. Parasti tas ir galvenais lapas vai valodu izvēles lapas variants.

Valodu pārslēgšanas funkcionalitāte frontendā var būt dažāda:

Atsevišķi URL katrai valodai: example.com/ru/page, example.com/en/page. Tas ir ieteicamākais SEO risinājums.
Pārlūka parametri: example.com/page?lang=ru, example.com/page?lang=en. Mazāk ieteicams SEO.
Cookie vai Local Storage: Valoda tiek saglabāta klienta pusē. Nepieciešama servera vai klienta puses apstrāde, lai attēlotu atbilstošo saturu.

Valodu pārvaldībai bieži izmanto internacionalizācijas bibliotēkas:

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

Šīs bibliotēkas ļauj:

izvilkt teksta rindas no koda tulkošanai.
pārvaldīt dažādus valodu failus (piemēram, JSON formātā).
dinamiskai pārslēgšanai valodu bez lapas pārlādes (lai gan pilnīgai URL un satura maiņai labāk izmantot servera renderēšanu vai atsevišķus URL).
apstrādāt locījumus, daudzskaitli un datumu/skaitļu formatēšanu atbilstoši valodai.

Piemērs i18next izmantošanai ar React (schematiski):

// 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) // nodod i18n react-i18next
  .init({
    resources,
    lng: 'ru', // noklusējuma valoda
    interpolation: {
      escapeValue: false, // react jau pasargā no 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')}>Krievu</button>
      <button onClick={() => changeLanguage('en')}>Angļu</button>
    </div>
  );
}

export default App;

Satura (teksti, attēli ar tekstu) tulkošana un attēlošana ir atkarīga no izvēlētās valodas/URL.

Kā būtu formatētai lapa, kurā saturs ir pieejams dažādās valodās?