Wie sollte die Seite gestaltet werden, auf der…

Für SEO und Benutzerfreundlichkeit sollte das lang-Attribut im <html>-Tag auf jeder Seite verwendet werden.

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

Um alternative Versionen der Seite in anderen Sprachen anzugeben, wird das Meta-Tag hreflang im <head> verwendet. Es zeigt Suchmaschinen (z.B. Google), dass es andere Sprachversionen dieser Seite gibt.

Beispiel:

<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": zeigt die russische Version der Seite.
hreflang="en": zeigt die englische Version.
hreflang="x-default": zeigt die Standardseite, wenn keine Sprache mit der Nutzerpräferenz übereinstimmt. Meist die Hauptseite oder die Sprachwahlseite.

Die Implementierung des Sprachwechsels im Frontend kann variieren:

Separate URLs für jede Sprache: example.com/ru/page, example.com/en/page. Dies ist die bevorzugte SEO-Variante.
Query-Parameter: example.com/page?lang=ru, example.com/page?lang=en. Weniger bevorzugt für SEO.
Cookies oder Local Storage: Die Sprache wird auf der Client-Seite gespeichert. Erfordert serverseitige Verarbeitung oder clientseitiges Rendering.

Zur Verwaltung der Übersetzungen im Frontend werden häufig Internationalisierungsbibliotheken (i18n) verwendet:

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

Diese Bibliotheken ermöglichen:

Das Extrahieren von Übersetzungsstrings aus dem Code.
Das Verwalten verschiedener Sprachdateien (z.B. JSON-Format).
Das dynamische Umschalten der Sprache ohne Seitenreload (für vollständiges URL- und Inhaltswechsel ist serverseitiges Rendering oder separate URLs besser geeignet).
Die Behandlung von Deklinationen, Pluralformen und datums-/zahlenformatierungsspezifisch für die Sprache.

Beispiel für die Verwendung von i18next mit React (schematisch):

// 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) // übergibt i18n an react-i18next
  .init({
    resources,
    lng: 'ru', // Standardsprache
    interpolation: {
      escapeValue: false, // react schützt bereits vor 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')}>Russisch</button>
      <button onClick={() => changeLanguage('en')}>Englisch</button>
    </div>
  );
}

export default App;

Der Seiteninhalt (Texte, Bilder mit Text) sollte je nach gewählter Sprache/URL übersetzt und angezeigt werden.

Wie sollte die Seite gestaltet werden, auf der Inhalte in verschiedenen Sprachen verfügbar sind?