Farklı dillerde erişilebilir içerik bulunan sayfa…

SEO ve kullanıcı rahatlığı için, her sayfada <html> etiketi içinde lang özniteliği kullanılmalıdır.

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

Başka dillerdeki alternatif sayfa versiyonlarını belirtmek için <head> içinde hreflang meta etiketi kullanılır. Bu, arama motorlarına (örneğin Google) aynı sayfanın farklı dillerdeki diğer versiyonlarının olduğunu gösterir.

Örnek:

<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": sayfanın Rusça versiyonunu gösterir.
hreflang="en": İngilizce versiyonunu gösterir.
hreflang="x-default": varsayılan sayfayı gösterir, kullanıcının tercih ettiği dile uygun olmayan durumlarda kullanılır. Genellikle ana sayfa veya dil seçim sayfasıdır.

Frontend'de dil değiştirme uygulaması farklı şekillerde olabilir:

Her dil için ayrı URL'ler: example.com/ru/page, example.com/en/page. Bu SEO için tercih edilen yaklaşımdır.
Sorgu parametreleri: example.com/page?lang=ru, example.com/page?lang=en. SEO açısından daha az tercih edilir.
Cookie veya Local Storage: Dil, istemci tarafında saklanır. Sunucu tarafı işlem veya istemci tarafı render gerekebilir.

Frontend'de çevirileri yönetmek için sık kullanılan kütüphaneler:

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

Bu kütüphaneler şunları sağlar:

Çeviri dizgilerini koddan çıkarma
Farklı dil dosyalarını yönetme (örneğin JSON formatında)
URL ve içerik tam anlamıyla değiştirilmeksizin dili dinamik olarak değiştirme
Dil çekinceleri, çoğul kullanımı ve tarih/sayı biçimlendirmesi gibi dil özelliklerini işleme

i18next ile React kullanımı örneği (şematik):

// 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'e i18n'yi geçirir
  .init({
    resources,
    lng: 'ru', // varsayılan dil
    interpolation: {
      escapeValue: false, // react zaten XSS'e karşı korur
    },
  });

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ça</button>
      <button onClick={() => changeLanguage('en')}>İngilizce</button>
    </div>
  );
}

export default App;

Sayfa içeriği (metinler, metin içeren görseller) seçilen dil/URL'ye göre çevrilmeli ve gösterilmelidir.

Farklı dillerde erişilebilir içerik bulunan sayfa nasıl düzenlenmelidir?