Artikel , SEO

Membuat Website Multi Language

Panduan singkat membuat website dengan banyak versi bahasa, strategi SEO tingkatkan traffic website.

Website multi-language adalah situs website yang menyediakan konten dengan banyak versi bahasa atau lebih dari satu bahasa. Website Multi language bertujuan menjangkau dan mendapatkan banyak audiens dari berbagai negara dan supaya pengunjung dari berbagai latar belakang negara bisa mengakses informasi dalam bahasa yang mereka pahami. Hal ini juga salah satu langkah strategi SEO paling efektif dalam meningkat traffic website.

Berikut adalah panduan cara membuat website multi-language (banyak bahasa), lengkap dengan konsep, struktur folder, dan contoh kode. Kamu bisa memilih pendekatan yang paling sesuai dengan teknologi yang kamu gunakan.

✅ 1. Tentukan Struktur Bahasa

Ada beberapa cara untuk menyimpan versi bahasa:

A. Folder terpisah (paling sederhana)

satelit. Net/id/   → versi Indonesia
satelit.net/en/   → versi Inggris
satelit.net/jp/   → versi Jepang

Kelebihan: SEO friendly, mudah dikelola
Kekurangan: Perlu routing per bahasa

B. Menggunakan parameter URL

satelit.net?lang=id
satelit.net?lang=en

Kelebihan: Paling mudah dibuat
Kekurangan: Kurang bagus untuk SEO

C. Menggunakan subdomain

id.example.com
en.example.com

Kelebihan: SEO friendly, mudah dikelola
Kekurangan: Perlu routing per bahasa

D. Menggunakan deteksi otomatis (browser language detection)

Browser mengirim Accept-Language, lalu website memilih bahasa default.

✅ 2. Siapkan File Konten untuk Setiap Bahasa

Oke lah, langkah selanjutnya akan kita mulai topik pembahasan WordPress, atau framework lain:

Contoh HTML sederhana:

id/index.html

<h1>Selamat datang di website kami</h1>
<p>Ini adalah versi bahasa Indonesia.</p>

en/index.html

<h1>Welcome to our website</h1>
<p>This is the English version.</p>

✅ 3. Buat Tombol / Menu Pemilih Bahasa

Contoh HTML:

<nav>
  <a href="/id/">Bahasa Indonesia</a> | 
  <a href="/en/">English</a>
</nav>

Jika menggunakan JavaScript:

<select onchange="window.location.href=this.value">
  <option value="/id/">ID</option>
  <option value="/en/">EN</option>
</select>

✅ 4. Menggunakan JavaScript untuk Teks Multi-Bahasa (Tanpa Banyak File)

Jika ingin satu halaman saja:

<script>
const teks = {
  id: {
    title: "Selamat datang",
    content: "Ini adalah versi Indonesia."
  },
  en: {
    title: "Welcome",
    content: "This is the English version."
  }
};

function gantiBahasa(lang) {
  document.getElementById("title").innerText = teks[lang].title;
  document.getElementById("content").innerText = teks[lang].content;
}
</script>

<button onclick="gantiBahasa('id')">ID</button>
<button onclick="gantiBahasa('en')">EN</button>

<h1 id="title"></h1>
<p id="content"></p>

<script>
gantiBahasa('id'); // bahasa default
</script>

✅ 5. Jika Menggunakan WordPress

Install plugin multilingual:
- Polylang (gratis)
- WPML (premium)
Tambahkan bahasa baru melalui pengaturan.
Buat halaman versi Indonesia & Inggris.
WordPress akan otomatis membuat switcher bahasa.

✅ 6. Jika Menggunakan Framework (React, Vue, Next.js, Nuxt)

ChatGPT

Masuk

Anda bilang:

Membuat website multi language

ChatGPT bilang:

Berikut adalah panduan cara membuat website multi-language (banyak bahasa), lengkap dengan konsep, struktur folder, dan contoh kode. Kamu bisa memilih pendekatan yang paling sesuai dengan teknologi yang kamu gunakan.

✅ 1. Pendekatan Umum Multi-Language

Ada 3 pendekatan populer:

A. Menggunakan URL berbeda

/id/halaman
/en/page
/fr/page

Kelebihan: SEO friendly, mudah dikelola
Kekurangan: Perlu routing per bahasa

B. Menggunakan query parameter

?page=home&lang=id

Kelebihan: Paling mudah dibuat
Kekurangan: Kurang bagus untuk SEO

C. Menggunakan deteksi otomatis (browser language detection)

Browser mengirim Accept-Language, lalu website memilih bahasa default.

✅ 2. Struktur File yang Disarankan

Contoh jika memakai file JSON sebagai sumber teks:

/languages
    en.json
    id.json
    fr.json
index.html
script.js

en.json

{
  "title": "Welcome",
  "description": "This is a multi-language website"
}

id.json

{
  "title": "Selamat Datang",
  "description": "Ini adalah website multi-bahasa"
}

✅ 3. Contoh Multi-language Dengan HTML + JavaScript (Sederhana)

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Multi Language</title>
</head>
<body>
    <select id="language-picker">
        <option value="en">English</option>
        <option value="id">Indonesia</option>
    </select>

    <h1 data-translate="title"></h1>
    <p data-translate="description"></p>

    <script src="script.js"></script>
</body>
</html>

script.js

const picker = document.getElementById('language-picker');

picker.addEventListener('change', function () {
    loadLanguage(this.value);
});

function loadLanguage(lang) {
    fetch(`/languages/${lang}.json`)
        .then(res => res.json())
        .then(data => {
            document.querySelectorAll('[data-translate]').forEach(el => {
                const key = el.getAttribute('data-translate');
                el.textContent = data[key];
            });
        });
}

// Set default language
loadLanguage('id');

✅ 4. Multi-language dalam Framework Populer

A. Laravel

Laravel sudah punya package localization:

resources/lang/en/messages.php
resources/lang/id/messages.php

Routing:

Route::get('/{lang}/home', function ($lang) {
    App::setLocale($lang);
    return view('home');
});

Pemakaian:

{{ __('messages.welcome') }}

B. Next.js / React

Gunakan:

next-intl
react-i18next

Config i18n.js:

export const i18n = { defaultLocale: ‘id’, locales: [‘id’, ‘en’], };

Demikianlah sedikit tips sederhana membangun website multi language, semoga bermanfaat dan terima kasih.

Unmetered