Чӣ гуна бояд саҳифае, ки мундариҷа дар он ба забонҳои…

Барои оптимизатсияи SEO ва бароҳатии корбар, бояд дар ҳар саҳифа хосияти lang дар теги <html> истифода шавад.

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

Барои нишон додани версияҳои алтернативии саҳифа дар дигар забонҳо, истифода мешавад мета-тег hreflang дар <head>. Ин ба системҳои ҷустуҷӯ (масалан, 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 интихобшуда нишон дода шавад.

Чӣ гуна бояд саҳифае, ки мундариҷа дар он ба забонҳои гуногун дастрас аст, ташкил карда шавад?