Müxtəlif dillərdə mövcud olan məzmunun olduğu səhifə…

SEO və istifadəçi rahatlığı üçün hər səhifədə <html> tagında lang atributundan istifadə edilməlidir.

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

Başqa dillərdə səhifənin alternativ versiyalarını göstərmək üçün <head> daxilində hreflang meta-tegi istifadə olunur. Bu, axtarış sistemlərinə (məsələn, Google) həmin səhifənin digər dil variantlarının mövcud olduğunu bildirir.

Misal:

<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 dilində versiyanı göstərir.
hreflang="en": İngilis dilində versiyanı göstərir.
hreflang="x-default": Əsas səhifəni və ya dil seçim səhifəsini göstərir.

Dillər arasında keçid üçün müxtəlif üsullar mövcuddur:

Hər dil üçün ayrıca URL: example.com/ru/page, example.com/en/page. Bu SEO üçün tövsiyə olunan yoldur.
Sorğu parametrləri: example.com/page?lang=ru, example.com/page?lang=en. Bu SEO üçün daha az tövsiyə olunur.
Cookie və ya Local Storage: Dil istifadəçinin brauzerində saxlanılır. Bu halda server və ya müştəri tərəfi renderinq istifadə edilə bilər.

Frontend-də tərcümələri idarə etmək üçün i18n kitabxanaları istifadə olunur:

React üçün: react-i18next, react-intl
Vue üçün: vue-i18n
Angular üçün: @angular/localize
Sadə JavaScript üçün: i18next

Bu kitabxanalar aşağıdakı imkanları verir:

Tərcümə üçün stringləri koddan çıxarmaq.
Müxtəlif dil fayllarını idarə etmək (məsələn, JSON formatında).
Dili dinamik olaraq dəyişmək və səhifəni yeniləmədən dil dəyişdirmək.
Dilə görə şəkil, format və digər lokalizasiyaları tənzimləmək.

Misal üçün, React və i18next istifadə edən nümunə:

// 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;

Əsas səhifə və ya mətnlər istifadəçinin seçdiyi dilə uyğun göstərilməlidir.

Müxtəlif dillərdə mövcud olan məzmunun olduğu səhifə necə tərtib olunmalıdır?