¿Cómo debe formatearse la página en la que el…

Para SEO y comodidad del usuario, se debe utilizar el atributo lang en la etiqueta <html> en cada página.

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

Para indicar versiones alternativas de la página en otros idiomas, se usa la metaetiqueta hreflang en <head>. Esto muestra a los motores de búsqueda (por ejemplo, Google) que existen otras versiones en diferentes idiomas de la misma página.

Ejemplo:

<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 la versión en ruso de la página.
hreflang="en": indica la versión en inglés.
hreflang="x-default": indica la página predeterminada cuando ningún idioma coincide con la preferencia del usuario. Generalmente, es la página principal o la página de selección de idioma.

La implementación del cambio de idioma en el frontend puede variar:

URLs separadas para cada idioma: example.com/ru/page, example.com/en/page. Es el enfoque preferido para SEO.
Parámetros en la consulta: example.com/page?lang=ru, example.com/page?lang=en. Menos preferido para SEO.
Cookies o almacenamiento local: El idioma se guarda en el lado del cliente. Requiere procesamiento en el servidor o renderizado en el cliente para mostrar el contenido en el idioma adecuado.

Para gestionar las traducciones en el frontend, a menudo se usan bibliotecas de internacionalización (i18n):

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

Estas bibliotecas permiten:

Extraer cadenas para traducción del código.
Gestionar diferentes archivos de idioma (por ejemplo, en formato JSON).
Cambiar dinámicamente el idioma sin recargar la página (aunque para cambiar URL y contenido completos, es mejor usar renderizado en el servidor o URLs separadas).
Procesar declinaciones, pluralización y formateo de fechas/números específicos del idioma.

Ejemplo de uso de i18next con 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) // pasa i18n a react-i18next
  .init({
    resources,
    lng: 'ru', // idioma predeterminado
    interpolation: {
      escapeValue: false, // react ya 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')}>Русский</button>
      <button onClick={() => changeLanguage('en')}>English</button>
    </div>
  );
}

export default App;

El contenido de la página (textos, imágenes con texto) debe ser traducido y mostrado en función del idioma/URL seleccionado.

¿Cómo debe formatearse la página en la que el contenido está disponible en diferentes idiomas?