Cara Membuat Website Multibahasa dengan i18n

Di era digital saat ini, menjangkau audiens global bukan lagi pilihan, melainkan sebuah keharusan. Salah satu cara paling efektif untuk melakukannya adalah dengan menyediakan website multibahasa. Dengan adanya versi website dalam berbagai bahasa, Anda dapat meningkatkan aksesibilitas, pengalaman pengguna, dan potensi pasar. Untuk membangun website semacam ini, konsep Internationalization (i18n) menjadi sangat penting.

i18n adalah singkatan numerik dari Internationalization (18 huruf antara 'I' dan 'n'). Ini adalah proses desain dan pengembangan produk agar mudah diadaptasi ke berbagai bahasa, wilayah, dan budaya tanpa perlu rekayasa ulang kode. Jadi, i18n adalah fondasi teknis yang memungkinkan lokalisasi (l10n), yaitu proses adaptasi produk secara spesifik untuk pasar atau lokasi tertentu (misalnya, terjemahan teks, format tanggal/waktu, mata uang).

Baca Juga : Menggunakan hreflang untuk SEO Internasional

Mengapa Membangun Website Multibahasa dengan i18n?

Jangkauan Global: Akses audiens yang lebih luas di seluruh dunia.
Pengalaman Pengguna Lebih Baik: Pengguna cenderung lebih nyaman berinteraksi dengan website dalam bahasa ibu mereka.
Peningkatan SEO (Search Engine Optimization): Search engine dapat mengindeks konten Anda dalam berbagai bahasa, meningkatkan visibilitas di hasil pencarian lokal.
Kredibilitas dan Profesionalisme: Menunjukkan bahwa Anda peduli dengan audiens internasional.
Skalabilitas: Memudahkan penambahan bahasa baru di masa mendatang tanpa perubahan kode besar.

Baca Juga : Strategi SEO untuk Website dengan Beberapa Bahasa

Konsep Kunci dalam i18n

Sebelum melangkah ke implementasi, pahami beberapa konsep dasar i18n:

Ekstraksi Teks (Externalizing Strings): Semua teks yang ditampilkan di website (label, tombol, pesan error, konten) tidak boleh hardcoded langsung di HTML atau JavaScript. Teks-teks ini harus diekstraksi ke dalam file terpisah (sering disebut message files atau translation files).
Pemilihan Bahasa (Locale Selection): Mekanisme untuk menentukan bahasa yang akan ditampilkan kepada pengguna. Ini bisa berdasarkan:
- Pengaturan browser pengguna (Accept-Language header).
- Pilihan manual pengguna (tombol dropdown).
- Subdirektori URL (contoh: mysite.com/en/, mysite.com/id/).
- Subdomain (contoh: en.mysite.com, id.mysite.com).
Manajemen Terjemahan (Translation Management): Bagaimana Anda menyimpan dan mengakses terjemahan untuk setiap bahasa. Biasanya dalam format JSON, YAML, atau property files.
Format Lokal (Locale Formatting): Selain teks, ada elemen lain yang perlu diadaptasi:
- Tanggal dan Waktu: Format berbeda di berbagai negara (MM/DD/YYYY vs DD/MM/YYYY).
- Angka: Pemisah desimal dan ribuan (1,234.56 vs 1.234,56).
- Mata Uang: Simbol mata uang ($ vs Rp) dan posisi simbol.
- Arah Teks: Kanan-ke-kiri (RTL) seperti Arab atau Ibrani.
Pesan Berparameter (Pluralization & Interpolation): Menangani kalimat yang berubah berdasarkan jumlah (plural) atau membutuhkan penyisipan variabel (interpolasi).
- "1 item" vs "2 items"
- "Halo, [nama pengguna]!"
SEO untuk Multibahasa: Menggunakan atribut HTML lang, hreflang tags, dan struktur URL yang tepat agar search engine memahami varian bahasa website Anda.

Baca Juga : Tantangan dalam Membangun Website Global

Cara Implementasi i18n (Contoh JavaScript/React)

Prinsip i18n dapat diterapkan di berbagai platform dan framework (PHP, Python, Java, .NET, dll.). Namun, untuk website modern, implementasi di sisi frontend dengan JavaScript sangat umum. Kita akan menggunakan contoh umum dengan React dan library react-i18next (yang merupakan implementasi dari i18next untuk React), meskipun konsepnya serupa untuk library lain atau framework JS lainnya.

Langkah 1: Siapkan Struktur Proyek

Asumsikan Anda memiliki proyek React dasar.

Bash

npx create-react-app my-multilingual-app
cd my-multilingual-app

Langkah 2: Instalasi Library i18n

Kita akan menggunakan i18next sebagai mesin inti dan react-i18next untuk integrasi dengan React.

Bash

npm install i18next react-i18next i18next-browser-languagedetector
# Atau yarn add i18next react-i18next i18next-browser-languagedetector

i18next: Mesin inti i18n.
react-i18next: Integrasi i18next untuk komponen React.
i18next-browser-languagedetector: Plugin untuk mendeteksi bahasa pengguna dari browser.

Langkah 3: Konfigurasi i18n

Buat file konfigurasi i18n, misalnya src/i18n.js:

JavaScript

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import LanguageDetector from 'i18next-browser-languagedetector';

// File terjemahan Anda
import translationEN from './locales/en/translation.json';
import translationID from './locales/id/translation.json';

// Konfigurasi i18next
i18n
  // Plugin untuk mendeteksi bahasa browser
  .use(LanguageDetector)
  // Integrasi dengan React
  .use(initReactI18next)
  // Inisialisasi i18next
  .init({
    // Fallback language jika terjemahan tidak ditemukan
    fallbackLng: 'en',
    debug: true, // Aktifkan debug mode di console (opsional)

    interpolation: {
      escapeValue: false, // React sudah menangani escaping XSS
    },

    resources: {
      en: {
        translation: translationEN,
      },
      id: {
        translation: translationID,
      },
    },

    // Deteksi bahasa: preferensi dari localStorage, kemudian browser, dll.
    detection: {
      order: ['localStorage', 'navigator', 'htmlTag'],
      caches: ['localStorage'],
    },
  });

export default i18n;

Langkah 4: Buat File Terjemahan

Buat folder src/locales/ dan di dalamnya en/ dan id/. Dalam setiap folder, buat translation.json:

src/locales/en/translation.json:

JSON

{
  "greeting": "Hello, {{name}}!",
  "welcome_message": "Welcome to our multilingual website!",
  "about_us": "About Us",
  "contact_us": "Contact Us",
  "home": "Home",
  "items": "item",
  "items_plural": "items",
  "language_selector": "Select Language"
}

src/locales/id/translation.json:

JSON

{
  "greeting": "Halo, {{name}}!",
  "welcome_message": "Selamat datang di website multibahasa kami!",
  "about_us": "Tentang Kami",
  "contact_us": "Hubungi Kami",
  "home": "Beranda",
  "items": "item",
  "items_plural": "item",
  "language_selector": "Pilih Bahasa"
}

Catatan: Untuk pluralisasi yang lebih canggih, i18next mendukung format key_one, key_other, dll.

Langkah 5: Integrasikan ke Aplikasi React Anda

src/index.js:

JavaScript

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import './i18n'; // Impor konfigurasi i18n Anda

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

src/App.js:

JavaScript

import React from 'react';
import { useTranslation, Trans } from 'react-i18next';

function App() {
  const { t, i18n } = useTranslation(); // 't' adalah fungsi terjemahan, 'i18n' untuk mengubah bahasa

  const changeLanguage = (lng) => {
    i18n.changeLanguage(lng);
  };

  const itemCount = 2; // Contoh variabel untuk pluralisasi

  return (
    <div style={{ padding: '20px', textAlign: 'center' }}>
      <h1>{t('welcome_message')}</h1>
      
      {/* Contoh interpolasi */}
      <p>{t('greeting', { name: 'Pengguna' })}</p>

      {/* Contoh pluralisasi (sederhana) */}
      <p>Anda memiliki {itemCount} {t(itemCount === 1 ? 'items' : 'items_plural')}.</p>

      <nav>
        <button onClick={() => changeLanguage('en')}>English</button>
        <button onClick={() => changeLanguage('id')}>Bahasa Indonesia</button>
      </nav>

      <ul style={{ listStyle: 'none', padding: 0 }}>
        <li><a href="#">{t('home')}</a></li>
        <li><a href="#">{t('about_us')}</a></li>
        <li><a href="#">{t('contact_us')}</a></li>
      </ul>

      {/* Contoh penggunaan komponen Trans untuk interpolasi dan styling */}
      <p>
        <Trans i18nKey="language_selector">
          Pilih Bahasa:
        </Trans>
        {' '}
        <select onChange={(e) => changeLanguage(e.target.value)} value={i18n.language}>
          <option value="en">English</option>
          <option value="id">Bahasa Indonesia</option>
        </select>
      </p>

    </div>
  );
}

export default App;

Jalankan Aplikasi Anda

Bash

npm start

Sekarang, Anda akan melihat website dengan teks yang diterjemahkan. Anda dapat mengklik tombol untuk mengganti bahasa, dan teks akan berubah secara dinamis.

Baca Juga : Plugin Terbaik untuk Website Multilingual di WordPress

Pertimbangan Penting Lainnya

Struktur URL untuk SEO:
- Subdirektori: example.com/en/page, example.com/id/page (paling direkomendasikan untuk SEO).
- Subdomain: en.example.com, id.example.com.
- Parameter URL: example.com/page?lang=en (kurang direkomendasikan untuk SEO karena search engine mungkin menganggapnya duplikat). Anda perlu mengonfigurasi routing backend atau frontend Anda untuk mendukung ini.
hreflang Tags: Ini adalah atribut HTML dalam <head> yang memberitahu search engine tentang varian bahasa dan regional dari halaman Anda.
HTML
```
<link rel="alternate" href="http://example.com/en/page" hreflang="en" />
<link rel="alternate" href="http://example.com/id/page" hreflang="id" />
<link rel="alternate" href="http://example.com/page" hreflang="x-default" />
```
- x-default menunjukkan halaman default jika tidak ada bahasa yang cocok atau untuk pengguna yang tidak memiliki bahasa yang terdeteksi.
Arah Teks (RTL): Untuk bahasa seperti Arab atau Ibrani yang ditulis dari kanan ke kiri (RTL), Anda perlu menyesuaikan CSS dan mungkin HTML (dir="rtl" pada <html> atau <body>).
Konten Media: Gambar, video, atau ikon mungkin juga perlu dilokalisasi jika mengandung teks atau konteks budaya spesifik.
Penerjemah Profesional: Untuk terjemahan berkualitas tinggi, pertimbangkan untuk menggunakan jasa penerjemah profesional. Terjemahan otomatis mungkin kurang akurat dan terdengar tidak alami.
Content Delivery Network (CDN): Untuk distribusi konten yang lebih cepat ke pengguna di seluruh dunia.
Manajemen Terjemahan: Untuk proyek besar, pertimbangkan platform manajemen terjemahan (TMS) seperti Lokalise, Phrase, Transifex, atau Crowdin. Mereka mempermudah kolaborasi dengan penerjemah dan mengelola banyak file terjemahan.

Membangun website multibahasa dengan i18n adalah investasi strategis yang membuka pintu bagi audiens global. Dengan mengekstraksi teks, mengelola terjemahan, dan memperhatikan format lokal, Anda dapat menciptakan pengalaman pengguna yang mulus dan relevan bagi pengunjung dari berbagai latar belakang. Meskipun ada beberapa langkah teknis yang terlibat, library seperti i18next membuat proses ini jauh lebih mudah diimplementasikan, memastikan website Anda siap untuk dunia.