როგორ უნდა იყოს ფორმატირებული გვერდი, სადაც კონტენტი…

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. ეს არის საძიებო სისტემებისთვის სასურველი მიდგომა.
საკითხის პარამეტრები: example.com/page?lang=ru, example.com/page?lang=en. ნაკლებად სასურველია SEO-სთვის.
Cookie ან Local Storage: ენა ინახება მომხმარებლის მხარეს. საჭიროა სერვერული ან კლიენტური მხარის დამუშავება, რათა გამოჩნდეს შესაბამისი ენის კონტენტი.

ფრონტენდზე თარგმანების მართვისთვის ხშირად გამოიყენება ინტერნაციონალიზაციის ბიბლიოთეკები:

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

ეს ბიბლიოთეკები საშუალებას აძლევენ:

ტექსტების ამოღება თარგმნისთვის კოდიდან.
სხვადასხვა ენის ფაილების მართვა (მაგალითად, JSON ფორმატში).
დინამიურად შეცვალოს ენა გვერდის გადატვირთვის გარეშე (თუმცა სრული URL-ის და კონტენტის შეცვლისთვის უკეთესია სერვერული რენდერინგი ან ცალკეული URL-ები).
დამუშავდეს ენის სპეციფიკური ფორმატირება, მრავლობითი და სხვა.

მაგალითი 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) // გადასცემს i18n-ს react-i18next-ს
  .init({
    resources,
    lng: 'ru', // საწყისი ენა
    interpolation: {
      escapeValue: false, // react-ი უკვე იცავს 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')}>ინგლისური</button>
    </div>
  );
}

export default App;

გვერდის კონტენტი (ტექსტები, სურათები) უნდა იყოს თარგმნილი და გამოჩნდეს არჩეული ენის/URL-ის მიხედვით.

როგორ უნდა იყოს ფორმატირებული გვერდი, სადაც კონტენტი სხვადასხვა ენებზეა ხელმისაწვდომი?