Cara Tambah Pelbagai Bahasa pada Aplikasi atau Laman Web Anda

Untuk menambah pelbagai bahasa pada aplikasi, pindahkan setiap teks antara muka ke dalam fail terjemahan (satu bagi setiap bahasa), muatkannya dengan pustaka i18n, dan tambah penukar bahasa yang mengingati pilihan. Untuk halaman awam yang anda mahu ditemui dalam carian, berikan setiap bahasa URL sendiri seperti /fr/ dan pautkan versi-versi itu dengan tag hreflang. Kemudian uruskan bahagian yang selalu dilupakan: tarikh, nombor dan mata wang, teks yang lebih panjang dalam sesetengah bahasa, skrip kanan-ke-kiri, dan kandungan yang disimpan dalam pangkalan data anda.

Istilah yang akan anda dengar

• Pengantarabangsaan (i18n): menyediakan kod untuk menyokong sebarang bahasa — tiada rentetan yang dikodkan keras, pemformatan peka tempatan, susun atur yang fleksibel. Angka "18" ialah bilangan huruf antara i dan n.
• Penyetempatan (l10n): menyesuaikan aplikasi untuk bahasa atau pasaran tertentu, kebanyakannya terjemahan, kadangkala juga mata wang, imej dan teks undang-undang.
• Locale: bahasa dan secara pilihan wilayah, seperti en-GB atau pt-BR.

Lakukan i18n sekali, dan menambah setiap bahasa baharu kebanyakannya menjadi kerja terjemahan.

Pilihan dan pertukaran

Bagi kebanyakan aplikasi, pustaka i18n standard dengan fail terjemahan ialah asas yang betul. Hasilkan draf terjemahan dengan terjemahan mesin atau AI jika anda mahu, kemudian minta penutur fasih menyemak apa yang paling banyak dilihat pelanggan.

Bahagian-bahagian aplikasi pelbagai bahasa

Fail terjemahan

Daripada <h1>Selamat kembali</h1>, kod menulis t('dashboard.welcome'), dan setiap locale mempunyai fail dengan teksnya:

{
  "dashboard": {
    "welcome": "Selamat kembali, {{name}}",
    "items_one": "{{count}} item",
    "items_other": "{{count}} item"
  }
}

Gunakan pemegang tempat untuk pembolehubah dan bukannya menggabungkan serpihan ayat — susunan perkataan berbeza antara bahasa. Dan gunakan peraturan jamak pustaka: bahasa Inggeris mempunyai dua bentuk (1 item, 2 item), tetapi sesetengah bahasa mempunyai tiga, empat atau lebih.

Memformat tarikh, nombor dan wang

Jangan format ini secara manual. API Intl yang terbina dalam pelayar memformat untuk mana-mana locale: 1,234.5 dalam bahasa Inggeris ialah 1.234,5 dalam bahasa Jerman; tarikh bertukar antara hari-dahulu dan bulan-dahulu; simbol mata wang berpindah. Simpan tarikh dalam UTC dan wang sebagai nombor dengan kod mata wang, dan format hanya untuk dipaparkan.

Susun atur yang meregang

Teks terjemahan selalunya lebih panjang daripada bahasa Inggeris — perkataan Jerman dan Finland khususnya. Elakkan butang lebar tetap dan label yang dipotong, dan uji dengan bahasa terpanjang anda.

Bahasa kanan-ke-kiri

Bahasa Arab, Ibrani, Parsi dan Urdu dibaca dari kanan ke kiri. Tetapkan dir="rtl" pada halaman untuk locale tersebut dan gunakan sifat logik CSS (margin-inline-start dan bukannya margin-left; dalam Tailwind, ms-4 dan bukannya ml-4) supaya susun atur mencerminkan dirinya sendiri. Ikon yang menunjukkan arah, seperti anak panah, juga perlu dibalikkan.

Penukar bahasa dan pengesanan

Paparkan penukar pada setiap halaman, dilabel dengan nama setiap bahasa dalam bahasanya sendiri ("Deutsch", "Français", "العربية") dan bukannya bendera — bendera mewakili negara, bukan bahasa. Kesan bahasa pilihan pelayar pada lawatan pertama untuk mencadangkan versi, tetapi biarkan pilihan jelas pelawat menang dan ingatinya.

URL dan SEO

Bagi halaman yang anda mahu muncul dalam hasil carian, setiap bahasa memerlukan URL sendiri. Setakat September 2026, panduan Google untuk laman pelbagai bahasa ialah:

• URL berasingan bagi setiap bahasa — subdirektori (example.com/fr/) ialah yang paling mudah; subdomain dan domain negara juga berfungsi. Parameter URL (?lang=fr) tidak disyorkan.
• Jangan tukar bahasa melalui kuki atau tetapan pelayar sahaja; perayap Google mungkin tidak pernah melihat versi lain.
• Jangan alih secara automatik mengikut bahasa; pautkan antara versi.
• Gunakan hreflang untuk memberitahu Google halaman mana yang merupakan terjemahan antara satu sama lain. Setiap versi mesti menyenaraikan dirinya dan semua yang lain, atau anotasi mungkin diabaikan. Tambah x-default untuk halaman sandaran.
• Google mengesan bahasa halaman daripada kandungan yang kelihatan, bukan daripada lang atau hreflang — jadi terjemahkan keseluruhan halaman, bukan hanya menu.

Tetap tetapkan <html lang="fr"> pada setiap versi: pembaca skrin menggunakannya untuk memilih sebutan yang betul, dan ia merupakan keperluan kebolehaksesan.

Skrin aplikasi yang log masuk tidak perlu diindeks, jadi bagi skrin tersebut, menyimpan bahasa dalam profil pengguna adalah baik. Lihat SEO untuk laman web yang dibina dengan AI untuk mendapatkan halaman awam dirayapi pada mulanya.

Kandungan dalam pangkalan data anda

Teks antara muka berada dalam fail; kandungan seperti nama produk, catatan blog dan kategori berada dalam pangkalan data. Dua corak biasa:

• Jadual terjemahan: product_translations (product_id, locale, name, description). Kemas dan boleh berskala untuk banyak bahasa.
• Lajur JSON bagi setiap medan: name: {"en": "...", "fr": "..."}. Lebih ringkas untuk beberapa bahasa.

Tentukan apa yang berlaku apabila terjemahan tiada — biasanya jatuh balik kepada bahasa lalai dan bukannya memaparkan ruang kosong.

E-mel dan notifikasi

Simpan bahasa setiap pengguna dan gunakannya untuk e-mel, notifikasi dan PDF juga. Mudah untuk menterjemah aplikasi dan terlupa bahawa e-mel selamat datang masih tiba dalam bahasa Inggeris.

Prompt yang berkesan

Tambah pengantarabangsaan dengan react-i18next. Pindahkan setiap rentetan yang dilihat pengguna ke locales/en.json dengan kunci berruang nama, gunakan interpolasi dan peraturan jamak dan bukannya penggabungan rentetan, dan format tarikh, nombor dan harga dengan Intl menggunakan locale semasa. Jangan tukar sebarang perkataan lagi.

Tambah bahasa Perancis dan Jerman. Halaman pemasaran awam mendapat awalan URL /fr/ dan /de/ dengan Inggeris di akar, pautan hreflang pada setiap halaman (termasuk rujukan kendiri dan x-default), dan html lang ditetapkan bagi setiap halaman. Tambah penukar bahasa yang memaparkan nama asal setiap bahasa. Bagi halaman yang log masuk, simpan bahasa pada profil pengguna.

Tambah bahasa Arab dengan sokongan kanan-ke-kiri: tetapkan dir="rtl" untuk Arab, gantikan margin dan padding kiri/kanan dengan sifat logik, cerminkan ikon arah, dan semak bahawa borang dan jadual masih dibaca dengan betul.

Langkah demi langkah

1. Pilih bahasa tambahan pertama berdasarkan permintaan sebenar — di mana pelawat atau pelanggan anda berada.
2. Jadikan kod antarabangsa: pindahkan rentetan ke fail, tambah jamak dan pemformatan Intl. Lancarkan ini dengan Inggeris sahaja dan semak tiada yang berubah.
3. Tentukan struktur URL untuk halaman awam dan tambah hreflang.
4. Terjemah: hasilkan draf dengan terjemahan mesin atau AI, kemudian semak dengan penutur fasih. Beri penterjemah konteks — perkataan seperti "Book" ialah kata nama pada satu skrin dan kata kerja pada skrin lain.
5. Terjemah kandungan pangkalan data dan tetapkan sandaran.
6. Setempatkan selebihnya: e-mel, mesej ralat, halaman undang-undang, imej yang mengandungi teks.
7. Uji setiap bahasa pada lebar telefon, dan dengan kanan-ke-kiri jika berkaitan.
8. Sediakan proses supaya ciri baharu dilancarkan dengan terjemahan, bukan beberapa bulan kemudian.

Kesilapan biasa

• Menggabungkan ayat ("Anda ada " + n + " mesej"), yang rosak dalam bahasa lain.
• Teks yang dikodkan keras ditinggalkan dalam komponen, mesej ralat dan rentetan pengesahan.
• Memformat tarikh dan harga secara manual.
• Bendera untuk bahasa, dan pengalihan automatik yang memerangkap orang dalam versi yang salah.
• Satu URL untuk semua bahasa pada halaman yang anda mahu diindeks.
• Pautan balik hreflang yang hilang, menyebabkan Google mengabaikan anotasi.
• Menterjemah antara muka tetapi bukan kandungan, atau sebaliknya.
• Terjemahan mesin yang tidak disemak pada halaman harga, undang-undang dan pembayaran.

Senarai semak pelbagai bahasa

• Tiada rentetan yang dilihat pengguna dikodkan keras; peraturan jamak dan pemegang tempat digunakan
• Tarikh, nombor dan mata wang diformat dengan Intl
• Penukar bahasa dengan nama asal pada setiap halaman; pilihan diingati
• URL berasingan bagi setiap bahasa untuk halaman awam; tiada pengalihan paksa
• hreflang pada setiap versi, termasuk diri sendiri dan x-default
• html lang (dan dir="rtl" jika perlu) ditetapkan bagi setiap halaman
• Kandungan pangkalan data diterjemahkan dengan sandaran yang munasabah
• E-mel dan notifikasi dihantar dalam bahasa pengguna
• Teks yang dilihat pelanggan disemak oleh penutur fasih

Pelbagai bahasa pada Mythex

Di Mythex, anda menambah bahasa dengan meminta dalam sembang — tiada panel terjemahan berasingan — jadi prompt di atas berfungsi seperti yang ditulis. Lakukan langkah pengantarabangsaan dahulu dan semaknya dalam Pratonton sebelum menambah bahasa; ia refaktor yang besar, dan titik semak sembang memberi anda tempat untuk berundur jika sesuatu rosak (sembang dan titik semak). Jika anda mahu aplikasi menterjemah kandungan secara automatik dengan AI atau API terjemahan, itu menggunakan kunci API anda sendiri, disimpan dalam tetapan projek (pembolehubah persekitaran dan rahsia); cara menggunakan API LLM menerangkan kosnya. Terbitkan semula apabila bahasa baharu sudah sedia.

Soalan lazim