Jak powinna wyglądać strona, na której dostępna jest…

Dla SEO i wygody użytkownika, w każdej stronie należy używać atrybutu lang w tagu <html>.

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

Aby wskazać alternatywne wersje strony w innych językach, używa się meta-tagu hreflang w <head>. Pokazuje to wyszukiwarkom (np. Google), że istnieją inne wersje tej samej strony w różnych językach.

Przykład:

<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": wskazuje wersję rosyjską strony.
hreflang="en": wskazuje wersję angielską.
hreflang="x-default": wskazuje domyślną stronę, gdy żadna z wersji językowych nie odpowiada preferencjom użytkownika. Zazwyczaj jest to strona główna lub strona wyboru języka.

Implementacja zmiany języka na frontendzie może się różnić:

Oddzielne URL dla każdego języka: example.com/ru/page, example.com/en/page. To podejście jest preferowane dla SEO.
Parametry zapytania: example.com/page?lang=ru, example.com/page?lang=en. Mniej preferowane dla SEO.
Cookie lub Local Storage: Język jest przechowywany po stronie klienta. Wymaga obsługi po stronie serwera lub renderowania po stronie klienta, aby wyświetlić treść w odpowiednim języku.

Do zarządzania tłumaczeniami na frontendzie często używa się bibliotek internacjonalizacji (i18n):

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

Te biblioteki umożliwiają:

Wyodrębnianie tekstów do tłumaczenia z kodu.
Zarządzanie różnymi plikami językowymi (np. w formacie JSON).
Dynamiczną zmianę języka bez przeładowania strony (chociaż dla pełnej zmiany URL i treści lepiej używać renderowania po stronie serwera lub oddzielnych URLi).
Obsługę odmian, liczby mnogiej i formatowania dat/liczb specyficznych dla języka.

Przykład użycia i18next z React (schematycznie):

// 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) // przekazuje i18n do react-i18next
  .init({
    resources,
    lng: 'ru', // domyślny język
    interpolation: {
      escapeValue: false, // react już chroni przed 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')}>Русский</button>
      <button onClick={() => changeLanguage('en')}>Английский</button>
    </div>
  );
}

export default App;

Контент страницы (тексты, изображения с текстом) должен переводиться и отображаться в зависимости от выбранного языка/URL.

Jak powinna wyglądać strona, na której dostępna jest treść w różnych językach?