How should a page be formatted if content is…

For SEO and user convenience, the lang attribute should be used in the <html> tag on each page.

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

To specify alternative versions of a page in other languages, the hreflang meta-tag is used in <head>. It indicates to search engines (e.g., Google) that there are other language variants of the same page.

Example:

<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": indicates the Russian version of the page.
hreflang="en": indicates the English version.
hreflang="x-default": indicates the default page when none of the languages match the user's preferred language. Usually, this is the main page or a language selection page.

The implementation of language switching on the frontend can vary:

Separate URLs for each language: example.com/ru/page, example.com/en/page. This is the preferred approach for SEO.
Query parameters: example.com/page?lang=ru, example.com/page?lang=en. Less preferred for SEO.
Cookie or Local Storage: The language is stored on the client side. Server-side processing or client rendering is required to display content in the desired language.

For managing translations on the frontend, internationalization (i18n) libraries are often used:

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

These libraries allow:

Extracting translation strings from code.
Managing different language files (e.g., in JSON format).
Dynamically switching languages without reloading the page (though for full URL and content switching, server-side rendering or separate URLs are better).
Handling declensions, pluralization, and date/number formatting specific to the language.

Example of using i18next with React (schematically):

// 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) // passes i18n to react-i18next
  .init({
    resources,
    lng: 'ru', // default language
    interpolation: {
      escapeValue: false, // react already safes from 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;

The page content (texts, images with text) should be translated and displayed depending on the selected language/URL.

How should a page be formatted if content is available in multiple languages?