Turli tillarda mavjud bo'lgan kontent bo'lgan sahifa…

SEO va foydalanuvchi qulayligi uchun, har bir sahifada <html> tegida lang atributidan foydalanish kerak.

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

Boshqa tillardagi sahifaning alternativ versiyalarini ko'rsatish uchun <head> ichida hreflang meta-tegi ishlatiladi. Bu qidiruv tizimlariga (masalan, Google) ayni sahifaning boshqa tillardagi versiyalari mavjudligini ko'rsatadi.

Misol:

<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": rus tilidagi versiyani ko'rsatadi.
hreflang="en": ingliz tilidagi versiyani ko'rsatadi.
hreflang="x-default": standart sahifa, foydalanuvchining til afzalliklariga mos kelmaydigan holatda ishlatiladi. Odatda, asosiy sahifa yoki til tanlash sahifasi.

Frontendda tilni o'zgartirishning turli usullari mavjud:

Har til uchun alohida URL: example.com/ru/page, example.com/en/page. Bu SEO uchun afzalroq.
So'rov parametrlar: example.com/page?lang=ru, example.com/page?lang=en. Bu kamroq afzal.
Cookie yoki Local Storage: Til foydalanuvchi qurilmasida saqlanadi. Server yoki klient tarafidan ishlov berishni talab qiladi.

Frontendda tarjimalarni boshqarish uchun ko'pincha i18n kutubxonalari ishlatiladi:

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

Ushbu kutubxonalar quyidagilarni imkonini beradi:

Koddan tarjima satrlarini chiqarib olish.
Turli tillar uchun fayllarni boshqarish (masalan, JSON formatida).
URL va kontentni to'liq o'zgartirmasdan, tilni dinamik ravishda o'zgartirish.
Tilga xos o'zgarishlar, ko'p sonli shakllar va sana/numeral formatlash.

i18next bilan React uchun misol (schematik):

// 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) // react-i18next'ga i18n'ni o'tkazadi
  .init({
    resources,
    lng: 'ru', // standart til
    interpolation: {
      escapeValue: false, // react XSS'dan himoya qiladi
    },
  });

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')}>Rus</button>
      <button onClick={() => changeLanguage('en')}>Ingliz</button>
    </div>
  );
}

export default App;

Sahifa mazmuni (matnlar, rasm va matn bilan) tanlangan til/URLga mos ravishda tarjima qilinishi va ko'rsatilishi kerak.

Turli tillarda mavjud bo'lgan kontent bo'lgan sahifa qanday tartibda bo'lishi kerak?