Jak by měla být stránka formátována, na které je…

Pro SEO a pohodlí uživatele by měl být na každé stránce použit atribut lang v tagu <html>.

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

Pro označení alternativních verzí stránky v jiných jazycích se používá meta-tag hreflang v <head>. Tento informuje vyhledávače (například Google), že existují jiné jazykové varianty téže stránky.

Příklad:

<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": označuje ruskou verzi stránky.
hreflang="en": označuje anglickou verzi.
hreflang="x-default": označuje výchozí stránku nebo stránku výběru jazyka.

Způsob přepínání jazyků na frontendu může být různý:

Samostatné URL pro každý jazyk: example.com/ru/page, example.com/en/page. To je preferovaný přístup pro SEO.
Parametry dotazu: example.com/page?lang=ru, example.com/page?lang=en. Méně preferované pro SEO.
Cookie nebo Local Storage: Jazyk je uložen na straně klienta. Vyžaduje serverové zpracování nebo klientský rendering.

Pro správu překladů na frontendu se často používají knihovny internacionalizace (i18n):

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

Tyto knihovny umožňují:

Vytažení řetězců pro překlad z kódu.
Správu různých jazykových souborů (například ve formátu JSON).
Dynamické přepínání jazyka bez reloadu stránky.
Zpracování sklonů, množného čísla a formátování dat/číslic specifických pro jazyk.

Příklad použití i18next s React (schematicky):

// 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)
  .init({
    resources,
    lng: 'ru',
    interpolation: {
      escapeValue: false,
    },
  });

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')}>Русский</button>
      <button onClick={() => changeLanguage('en')}>English</button>
    </div>
  );
}

export default App;

Obsah stránky (texty, obrázky s textem) by měl být přeložen a zobrazen podle zvolené jazyka/URL.

Jak by měla být stránka formátována, na které je obsah dostupný v různých jazycích?