Como deve formatar-se a página onde o conteúdo está…

Para SEO e conveniência do utilizador, deve-se usar o atributo lang na tag <html> em cada página.

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

Para indicar versões alternativas da página em outros idiomas, usa-se a meta tag hreflang no <head>. Ela mostra aos motores de busca (por exemplo, Google) que existem outras versões nesta mesma página em diferentes idiomas.

Exemplo:

<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": indica a versão em russo da página.
hreflang="en": indica a versão em inglês.
hreflang="x-default": indica a página padrão quando nenhuma língua corresponde à preferência do utilizador. Geralmente, é a página principal ou a página de seleção de idioma.

A implementação da troca de idiomas no frontend pode variar:

URLs separadas para cada idioma: example.com/ru/page, example.com/en/page. É a abordagem preferida para SEO.
Parâmetros na query: example.com/page?lang=ru, example.com/page?lang=en. Menos preferido para SEO.
Cookies ou armazenamento local: O idioma é guardado no lado do cliente. Requer processamento no servidor ou renderização no cliente para mostrar o conteúdo no idioma correto.

Para gerir as traduções no frontend, costuma-se usar bibliotecas de internacionalização (i18n):

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

Estas bibliotecas permitem:

Extrair strings para tradução do código.
Gerir diferentes ficheiros de idiomas (por exemplo, em formato JSON).
Alterar dinamicamente o idioma sem recarregar a página (embora, para uma troca completa de URL e conteúdo, seja melhor usar renderização no servidor ou URLs separadas).
Processar declinações, pluralização e formatação de datas/números específicos do idioma.

Exemplo de uso do i18next com React (de forma esquemática):

// 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) // passa o i18n para react-i18next
  .init({
    resources,
    lng: 'ru', // idioma padrão
    interpolation: {
      escapeValue: false, // react já protege contra 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')}>Russo</button>
      <button onClick={() => changeLanguage('en')}>Inglês</button>
    </div>
  );
}

export default App;

O conteúdo da página (textos, imagens com texto) deve ser traduzido e exibido de acordo com o idioma/URL selecionado.

Como deve formatar-se a página onde o conteúdo está disponível em diferentes idiomas?