วิธีเพิ่มหลายภาษาในแอปหรือเว็บไซต์ของคุณ

การเพิ่มหลายภาษาให้แอป คือการย้ายข้อความทั้งหมดบนหน้าจอไปไว้ในไฟล์การแปล (หนึ่งไฟล์ต่อหนึ่งภาษา) โหลดไฟล์เหล่านั้นด้วยไลบรารี i18n แล้วเพิ่มตัวสลับภาษาที่จดจำการเลือกของผู้ใช้ไว้ สำหรับหน้าสาธารณะที่ต้องการให้ค้นเจอ ให้แต่ละภาษามี URL ของตัวเอง เช่น /fr/ และเชื่อมเวอร์ชันต่างๆ ด้วยแท็ก hreflang จากนั้นจัดการส่วนที่มักถูกลืม ได้แก่ วันที่ ตัวเลข และสกุลเงิน ข้อความที่ยาวขึ้นในบางภาษา ภาษาที่อ่านจากขวาไปซ้าย และเนื้อหาที่เก็บไว้ในฐานข้อมูล

คำศัพท์ที่จะได้ยิน

• Internationalisation (i18n): การเตรียมโค้ดให้รองรับทุกภาษา ไม่มีข้อความฝังในโค้ด จัดรูปแบบตามท้องถิ่นได้ และมีเลย์เอาต์ที่ยืดหยุ่น เลข "18" คือจำนวนตัวอักษรระหว่าง i กับ n
• Localisation (l10n): การปรับแอปให้เข้ากับภาษาหรือตลาดเฉพาะ ส่วนใหญ่คือการแปล และบางครั้งรวมถึงสกุลเงิน รูปภาพ และข้อความทางกฎหมาย
• Locale: ภาษาพร้อมภูมิภาค (ถ้ามี) เช่น en-GB หรือ pt-BR

ทำ i18n ครั้งเดียว แล้วการเพิ่มภาษาใหม่แต่ละครั้งจะกลายเป็นงานแปลเป็นหลัก

ตัวเลือกและข้อแลกเปลี่ยน

สำหรับแอปส่วนใหญ่ ไลบรารี i18n มาตรฐานพร้อมไฟล์การแปลคือพื้นฐานที่เหมาะ ร่างการแปลด้วยเครื่องหรือ AI ได้ตามต้องการ แล้วให้ผู้ที่พูดภาษานั้นได้คล่องตรวจข้อความที่ลูกค้าเห็นบ่อยที่สุด

ส่วนประกอบของแอปหลายภาษา

ไฟล์การแปล

แทนที่จะเขียน <h1>Welcome back</h1> โค้ดจะเขียน t('dashboard.welcome') และแต่ละ locale มีไฟล์ที่เก็บข้อความนั้นไว้:

{
  "dashboard": {
    "welcome": "Welcome back, {{name}}",
    "items_one": "{{count}} item",
    "items_other": "{{count}} items"
  }
}

ใช้ตัวแทนค่า (placeholder) สำหรับตัวแปร แทนการต่อประโยคเป็นชิ้นๆ เพราะลำดับคำในแต่ละภาษาไม่เหมือนกัน และใช้กฎพหูพจน์ของไลบรารี ภาษาอังกฤษมีสองรูป (1 item, 2 items) แต่บางภาษามีสาม สี่ หรือมากกว่านั้น

การจัดรูปแบบวันที่ ตัวเลข และเงิน

อย่าจัดรูปแบบเหล่านี้เอง ให้ใช้ API Intl ที่มีในเบราว์เซอร์ ซึ่งจัดรูปแบบตามท้องถิ่นได้ทุกภาษา เช่น 1,234.5 ในภาษาอังกฤษจะเป็น 1.234,5 ในภาษาเยอรมัน วันที่สลับระหว่างวันก่อนเดือนและเดือนก่อนวัน และสัญลักษณ์สกุลเงินย้ายตำแหน่งได้ เก็บวันที่เป็น UTC และเก็บเงินเป็นตัวเลขพร้อมรหัสสกุลเงิน แล้วค่อยจัดรูปแบบตอนแสดงผลเท่านั้น

เลย์เอาต์ที่ต้องยืดได้

ข้อความที่แปลแล้วมักยาวกว่าภาษาอังกฤษ โดยเฉพาะภาษาเยอรมันและภาษาฟินแลนด์ หลีกเลี่ยงปุ่มที่กว้างตายตัวและป้ายที่ถูกตัดคำ และทดสอบด้วยภาษาที่ยาวที่สุดของคุณ

ภาษาที่อ่านจากขวาไปซ้าย

ภาษาอาหรับ ฮีบรู เปอร์เซีย และอูรดูอ่านจากขวาไปซ้าย สำหรับ locale เหล่านี้ ตั้งค่า dir="rtl" ที่หน้า และใช้ CSS logical properties (เช่น margin-inline-start แทน margin-left ใน Tailwind ใช้ ms-4 แทน ml-4) เพื่อให้เลย์เอาต์กลับด้านเองโดยอัตโนมัติ ไอคอนที่บอกทิศทาง เช่น ลูกศร ก็ต้องกลับด้านด้วย

ตัวสลับภาษาและการตรวจจับ

แสดงตัวสลับภาษาในทุกหน้า โดยใช้ชื่อของแต่ละภาษาเองเช่น "Deutsch", "Français", "العربية" แทนการใช้ธง เพราะธงแทนประเทศ ไม่ได้แทนภาษา ตรวจจับภาษาที่เบราว์เซอร์ตั้งไว้ในการเข้าชมครั้งแรกเพื่อแนะนำเวอร์ชันที่เหมาะสม แต่ให้การเลือกของผู้เข้าชมมีผลเหนือกว่าและจดจำไว้

URL และ SEO

สำหรับหน้าที่ต้องการให้ขึ้นในผลการค้นหา แต่ละภาษาต้องมี URL ของตัวเอง ตามแนวทางของ Google สำหรับเว็บหลายภาษาในเดือนกันยายน 2026 คือ:

• แยก URL ตามภาษา: โฟลเดอร์ย่อย (example.com/fr/) ง่ายที่สุด ซับโดเมนและโดเมนประจำประเทศก็ใช้ได้เช่นกัน ไม่แนะนำให้ใช้พารามิเตอร์ URL (?lang=fr)
• อย่าสลับภาษาด้วยคุกกี้หรือการตั้งค่าเบราว์เซอร์เพียงอย่างเดียว เพราะตัวรวบรวมข้อมูลของ Google อาจไม่เห็นเวอร์ชันอื่นเลย
• อย่าเปลี่ยนเส้นทางตามภาษาอัตโนมัติ ให้เชื่อมโยงระหว่างเวอร์ชันแทน
• ใช้ hreflang เพื่อบอก Google ว่าหน้าไหนเป็นการแปลของหน้าไหน แต่ละเวอร์ชันต้องระบุตัวเองและเวอร์ชันอื่นทั้งหมด ไม่เช่นนั้นคำอธิบายอาจถูกละเลย เพิ่ม x-default สำหรับหน้าสำรอง
• Google ตรวจหาภาษาของหน้าจากเนื้อหาที่มองเห็น ไม่ได้ดูจาก lang หรือ hreflang ดังนั้นแปลทั้งหน้า ไม่ใช่แค่เมนู

ยังควรตั้งค่า <html lang="fr"> ในแต่ละเวอร์ชันด้วย เพราะโปรแกรมอ่านหน้าจอใช้ค่านี้เลือกการออกเสียงให้ถูก ซึ่งเป็นข้อกำหนดด้าน การเข้าถึง

หน้าจอของแอปที่ต้องล็อกอินไม่จำเป็นต้องถูกจัดทำดัชนี ดังนั้นสำหรับหน้าเหล่านี้ การเก็บภาษาไว้ในโปรไฟล์ของผู้ใช้ก็เพียงพอ ดู SEO สำหรับเว็บไซต์ที่สร้างด้วย AI เพื่อให้หน้าสาธารณะถูกรวบรวมข้อมูลตั้งแต่แรก

เนื้อหาในฐานข้อมูล

ข้อความบนหน้าจอเก็บไว้ในไฟล์ ส่วนเนื้อหาอย่างชื่อสินค้า บทความ และหมวดหมู่เก็บอยู่ใน ฐานข้อมูล มีสองรูปแบบที่พบบ่อย:

• ตารางการแปล: product_translations (product_id, locale, name, description) เป็นระเบียบและรองรับหลายภาษาได้ดี
• คอลัมน์ JSON ต่อฟิลด์: name: {"en": "...", "fr": "..."} ง่ายกว่าเมื่อมีไม่กี่ภาษา

กำหนดให้ชัดว่าจะทำอย่างไรเมื่อไม่มีการแปล โดยทั่วไปให้ใช้ภาษาหลักเป็นค่าสำรอง แทนการแสดงช่องว่าง

อีเมลและการแจ้งเตือน

เก็บภาษาของผู้ใช้แต่ละคนและนำไปใช้กับอีเมล การแจ้งเตือน และ PDF ด้วย เป็นเรื่องง่ายที่จะแปลแอปแล้วลืมว่าอีเมลต้อนรับยังคงส่งเป็นภาษาอังกฤษ

พรอมต์ที่ได้ผล

เพิ่ม internationalisation ด้วย react-i18next ย้ายข้อความทุกอันที่ผู้ใช้เห็นไปไว้ใน locales/en.json โดยใช้คีย์แบบมีเนมสเปซ ใช้การแทนค่าและกฎพหูพจน์แทนการต่อสตริง และจัดรูปแบบวันที่ ตัวเลข และราคาด้วย Intl ตามภาษาปัจจุบัน ยังไม่ต้องเปลี่ยนถ้อยคำใดๆ

เพิ่มภาษาฝรั่งเศสและเยอรมัน หน้าการตลาดสาธารณะใช้คำนำหน้า URL เป็น /fr/ และ /de/ โดยภาษาอังกฤษอยู่ที่ราก เพิ่ม hreflang ทุกหน้า (รวมถึงการอ้างถึงตัวเองและ x-default) และตั้ง html lang ในแต่ละหน้า เพิ่มตัวสลับภาษาที่แสดงชื่อภาษาของแต่ละภาษาเอง สำหรับหน้าที่ต้องล็อกอิน ให้เก็บภาษาไว้ในโปรไฟล์ของผู้ใช้

เพิ่มภาษาอาหรับพร้อมรองรับการเขียนจากขวาไปซ้าย ตั้ง dir="rtl" สำหรับภาษาอาหรับ เปลี่ยนระยะขอบและระยะห่างซ้ายขวาเป็น logical properties กลับด้านไอคอนที่บอกทิศทาง และตรวจว่าฟอร์มและตารางยังอ่านได้ถูกต้อง

ทำทีละขั้น

1. เลือกภาษาเพิ่มภาษาแรก จากความต้องการจริง คือจากที่ผู้เข้าชมหรือลูกค้าของคุณอยู่
2. ทำ internationalisation ให้โค้ด: ย้ายข้อความไปไว้ในไฟล์ เพิ่มพหูพจน์และการจัดรูปแบบด้วย Intl เผยแพร่เฉพาะภาษาอังกฤษก่อน และตรวจว่าไม่มีอะไรเปลี่ยน
3. กำหนดโครงสร้าง URL สำหรับหน้าสาธารณะ และเพิ่ม hreflang
4. แปล: ร่างด้วยเครื่องหรือ AI แล้วให้ผู้เชี่ยวชาญภาษาตรวจ ให้บริบทแก่นักแปล เช่น คำว่า "Book" เป็นคำนามในหน้าหนึ่งแต่เป็นคำกริยาในอีกหน้าหนึ่ง
5. แปลเนื้อหาในฐานข้อมูล และกำหนดค่าสำรอง
6. ปรับส่วนที่เหลือให้เป็นท้องถิ่น: อีเมล ข้อความแสดงข้อผิดพลาด หน้านโยบายทางกฎหมาย และรูปภาพที่มีข้อความอยู่
7. ทดสอบแต่ละภาษา ที่ความกว้างหน้าจอมือถือ และทดสอบการเขียนจากขวาไปซ้ายหากเกี่ยวข้อง
8. ตั้งกระบวนการ เพื่อให้ฟีเจอร์ใหม่ออกพร้อมการแปล ไม่ใช่หลายเดือนให้หลัง

ข้อผิดพลาดที่พบบ่อย

• ต่อประโยคด้วยการเชื่อมสตริง ("You have " + n + " messages") ซึ่งพังในภาษาอื่น
• ข้อความที่เขียนฝังไว้ในคอมโพเนนต์ ข้อความแสดงข้อผิดพลาด และข้อความตรวจสอบความถูกต้อง
• จัดรูปแบบวันที่และราคาด้วยตนเอง
• ใช้ธงแทนภาษา และการเปลี่ยนเส้นทางอัตโนมัติที่ขังผู้ใช้ไว้ในเวอร์ชันที่ไม่ใช่ที่ต้องการ
• URL เดียวสำหรับทุกภาษา ในหน้าที่ต้องการให้ถูกจัดทำดัชนี
• ไม่มี hreflang กลับ ทำให้ Google ละเว้นคำอธิบาย
• แปลหน้าจอแต่ไม่แปลเนื้อหา หรือกลับกัน
• การแปลด้วยเครื่องที่ไม่มีการตรวจทาน ในหน้าราคา หน้ากฎหมาย และหน้าชำระเงิน

เช็กลิสต์หลายภาษา

• ไม่มีข้อความที่ผู้ใช้เห็นฝังในโค้ด และใช้กฎพหูพจน์กับตัวแทนค่าแล้ว
• วันที่ ตัวเลข และสกุลเงินจัดรูปแบบด้วย Intl
• มีตัวสลับภาษาที่แสดงชื่อภาษาของแต่ละภาษาในทุกหน้า และจดจำการเลือกไว้
• หน้าสาธารณะแยก URL ตามภาษา และไม่มีการเปลี่ยนเส้นทางบังคับ
• มี hreflang ในทุกเวอร์ชัน รวมถึงการอ้างถึงตัวเองและ x-default
• ตั้งค่า html lang (และ dir="rtl" ถ้าจำเป็น) ในแต่ละหน้า
• เนื้อหาในฐานข้อมูลถูกแปลและมีค่าสำรองที่เหมาะสม
• อีเมลและการแจ้งเตือนส่งเป็นภาษาของผู้ใช้
• ข้อความที่ลูกค้าเห็นได้รับการตรวจทานโดยผู้เชี่ยวชาญภาษานั้น

หลายภาษาบน Mythex

บน Mythex คุณเพิ่มภาษาได้โดยขอในแชท ไม่มีแผงการแปลแยกต่างหาก ดังนั้นพรอมต์ด้านบนใช้ได้ตามที่เขียน ทำขั้นตอน internationalisation ก่อน และตรวจสอบใน Preview ก่อนเพิ่มภาษา เพราะเป็นการปรับโครงสร้างครั้งใหญ่ และ checkpoint ในแชทจะให้จุดย้อนกลับไว้หากมีอะไรพัง (แชทและ checkpoints) หากต้องการให้แอปแปลเนื้อหาอัตโนมัติด้วย AI หรือ API การแปล ต้องใช้คีย์ API ของคุณเองที่เก็บไว้ในการตั้งค่าโปรเจกต์ (ตัวแปรสภาพแวดล้อมและความลับ) และ วิธีใช้ LLM API อธิบายค่าใช้จ่าย เมื่อภาษาใหม่พร้อมแล้ว ให้เผยแพร่อีกครั้ง

คำถาม