Hoe moet de pagina worden vormgegeven waarop de…

Voor SEO en gebruiksgemak moet het lang-attribuut in elke pagina worden gebruikt binnen de <html>-tag.

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

Om alternatieve versies van de pagina in andere talen aan te geven, wordt de meta-tag hreflang in <head> gebruikt. Dit toont zoekmachines (bijvoorbeeld Google) dat er andere taalversies van dezelfde pagina bestaan.

Voorbeeld:

<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": geeft de Russische versie van de pagina aan.
hreflang="en": geeft de Engelse versie aan.
hreflang="x-default": geeft de standaardpagina aan wanneer geen taal overeenkomt met de voorkeur van de gebruiker. Dit is meestal de hoofdpagina of de taalkeuzepagina.

De implementatie van taalwissel op de frontend kan variëren:

Aparte URL's voor elke taal: example.com/ru/page, example.com/en/page. Dit is de voorkeursmethode voor SEO.
Query-parameters: example.com/page?lang=ru, example.com/page?lang=en. Minder voorkeurs voor SEO.
Cookie of Local Storage: De taal wordt aan de clientzijde opgeslagen. Server-side verwerking of client-side rendering is vereist om de inhoud in de juiste taal te tonen.

Voor het beheren van vertalingen op de frontend worden vaak internationalisatiebibliotheken (i18n) gebruikt:

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

Deze bibliotheken bieden:

Het extraheren van strings voor vertalingen uit de code.
Het beheren van verschillende taalbestanden (bijvoorbeeld in JSON-formaat).
Het dynamisch wisselen van taal zonder de pagina te herladen (hoewel voor volledige URL- en inhoudswisseling server-side rendering of aparte URL's beter is).
Het verwerken van verbuigingen, meervouden en datum/numerieke opmaak die specifiek is voor de taal.

Voorbeeld van gebruik van i18next met 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) // geeft i18n door aan react-i18next
  .init({
    resources,
    lng: 'ru', // standaardtaal
    interpolation: {
      escapeValue: false, // react beschermt al tegen 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;

De inhoud van de pagina (teksten, afbeeldingen met tekst) moet vertaald en weergegeven worden afhankelijk van de gekozen taal/URL.

Hoe moet de pagina worden vormgegeven waarop de inhoud in verschillende talen beschikbaar is?