Ինչպես պետք է ձևավորվի էջը, որտեղ բովանդակությունը…

Անհրաժեշտ է SEO և օգտվողի հարմարավետության համար, յուրաքանչյուր էջում օգտագործել lang հատկանիշը <html> թեգում:

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

Այլ լեզուներով էջի այլընտրանքային տարբերակները նշելու համար օգտագործվում է <head> հատվածում hreflang մետա-տեգը: Դա տեղեկացնում է որոնողական համակարգերին (օրինակ, Google), որ այս էջի այլ լեզվական տարբերակներ կան:

Օրինակ:

<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": ցույց է տալիս ռուսերեն տարբերակը:
hreflang="en": ցույց է տալիս անգլերեն տարբերակը:
hreflang="x-default": ցույց է տալիս հիմնական կամ լեզվի ընտրության էջը:

Լեզուն փոխելու տարբերակները ֆրոնտենդում կարող են լինել տարբեր:

Ամեն լեզվի համար առանձին URL: example.com/ru/page, example.com/en/page: սա SEO-ի համար նախընտրելի է:
Հարցման պարամետրեր: example.com/page?lang=ru, example.com/page?lang=en: սա ավելի քիչ է նախընտրելի:
Cookie կամ Local Storage: Լեզուն պահվում է հաճախորդի կողմից: Պահանջվում է սերվերի կամ հաճախորդի կողմի ռենդերինգ:

Ֆրոնտենդում թարգմանությունները կառավարելու համար հաճախ օգտագործվում են i18n գրադարաններ:

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

Այս գրադարանները թույլ են տալիս:

Տեքստերի թարգմանական տողեր հանել կոդից:
Տարբեր լեզվական ֆայլեր կառավարել (օրինակ, JSON ձևաչափով):
Դինամիկ լեզու փոխել առանց էջը թարմացնելու:
Լեզվի հատուկ ձևաչափում, բազմակի թիվ, ամսաթվի և թվերի ձևաչափում:

Օրինակ՝ i18next React-ի հետ օգտագործելու համար:

// 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)
  .init({
    resources,
    lng: 'ru',
    interpolation: {
      escapeValue: false,
    },
  });

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;

Նպատակը՝ բովանդակությունը թարգմանել և ցուցադրել ընտրած լեզվի/URL-ի համաձայն։

Ինչպես պետք է ձևավորվի էջը, որտեղ բովանդակությունը հասանելի է տարբեր լեզուներով։