अपने ऐप या वेबसाइट में कई भाषाएँ कैसे जोड़ें

ऐप में कई भाषाएँ जोड़ने के लिए, interface का हर टेक्स्ट अनुवाद फ़ाइलों में ले जाएँ (हर भाषा के लिए एक), उन्हें किसी i18n library से लोड करें, और एक भाषा बदलने का विकल्प जोड़ें जो चुनाव याद रखे। सार्वजनिक पेजों के लिए जो search में मिलने चाहिए, हर भाषा को अपना URL दें, जैसे /fr/, और संस्करणों को hreflang tags से जोड़ें। फिर उन हिस्सों को संभालें जिन्हें लोग अक्सर भूल जाते हैं: तारीख, संख्याएँ और मुद्रा, कुछ भाषाओं में लंबा टेक्स्ट, दाएँ-से-बाएँ लिपियाँ, और आपके database में सहेजा गया content।

जो शब्द आप सुनेंगे

• Internationalisation (i18n): कोड को किसी भी भाषा के लिए तैयार करना: बिना hard-coded strings, locale के अनुसार formatting, लचीले लेआउट। "18" का मतलब i और n के बीच के 18 अक्षर हैं।
• Localisation (l10n): ऐप को किसी ख़ास भाषा या बाज़ार के लिए ढालना, ज़्यादातर अनुवाद, कभी-कभी मुद्रा, चित्र और कानूनी टेक्स्ट भी।
• Locale: एक भाषा और, वैकल्पिक रूप से, एक क्षेत्र, जैसे en-GB या pt-BR।

i18n एक बार कर लें, तो हर नई भाषा जोड़ना ज़्यादातर सिर्फ़ अनुवाद का काम रह जाता है।

विकल्प और समझौते

ज़्यादातर ऐप्स के लिए अनुवाद फ़ाइलों वाली एक मानक i18n library सही आधार है। चाहें तो machine या AI से मसौदा अनुवाद करें, फिर ग्राहकों को सबसे ज़्यादा दिखने वाले हिस्से की समीक्षा किसी धाराप्रवाह बोलने वाले से कराएँ।

बहुभाषी ऐप के हिस्से

अनुवाद फ़ाइलें

<h1>Welcome back</h1> लिखने की बजाय कोड t('dashboard.welcome') लिखता है, और हर locale की एक फ़ाइल में वह टेक्स्ट होता है:

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

वेरिएबल के लिए placeholders इस्तेमाल करें, वाक्य के टुकड़े जोड़ने की बजाय, क्योंकि शब्दों का क्रम भाषाओं में अलग होता है। और library के plural rules इस्तेमाल करें: अंग्रेज़ी में दो रूप हैं (1 item, 2 items), पर कुछ भाषाओं में तीन, चार या उससे ज़्यादा रूप होते हैं।

तारीख, संख्या और पैसे की formatting

ये हाथ से format न करें। Browser का built-in Intl API किसी भी locale के लिए format करता है: अंग्रेज़ी में 1,234.5 जर्मन में 1.234,5 हो जाता है; तारीखें दिन-पहले या महीना-पहले के बीच बदलती हैं; मुद्रा चिन्ह अपनी जगह बदलते हैं। तारीखें UTC में सहेजें, पैसा currency code के साथ संख्या के रूप में सहेजें, और केवल दिखाने के लिए format करें।

खिंचने वाला लेआउट

अनुवादित टेक्स्ट अक्सर अंग्रेज़ी से लंबा होता है, ख़ासकर जर्मन और फ़िनिश शब्द। निश्चित चौड़ाई वाले buttons और कटे हुए labels से बचें, और अपनी सबसे लंबी भाषा से टेस्ट करें।

दाएँ-से-बाएँ भाषाएँ

अरबी, हिब्रू, फ़ारसी और उर्दू दाएँ से बाएँ पढ़ी जाती हैं। उन locales के लिए पेज पर dir="rtl" सेट करें और CSS logical properties इस्तेमाल करें (margin-left की जगह margin-inline-start; Tailwind में ml-4 की जगह ms-4), ताकि लेआउट अपने आप उलट जाए। दिशा बताने वाले icons, जैसे तीर, को भी पलटना होगा।

भाषा बदलने का विकल्प और पहचान

हर पेज पर एक switcher दिखाएँ, जिस पर हर भाषा का अपना नाम हो ("Deutsch", "Français", "العربية"), झंडों की जगह नहीं, क्योंकि झंडे देशों को दर्शाते हैं, भाषाओं को नहीं। पहली बार आने पर browser की पसंदीदा भाषा पहचानें ताकि एक संस्करण सुझाया जा सके, पर visitor का साफ़ चुनाव सबसे ऊपर रहे और याद रखा जाए।

URLs और SEO

जो पेज search results में आने चाहिए, उनके लिए हर भाषा का अपना URL होना चाहिए। सितंबर 2026 तक, बहुभाषी साइटों पर Google का मार्गदर्शन यह है:

• हर भाषा के लिए अलग URL — subdirectories (example.com/fr/) सबसे सरल हैं; subdomains और country domains भी चलते हैं। URL parameters (?lang=fr) की सिफ़ारिश नहीं है।
• केवल cookie या browser सेटिंग से भाषा न बदलें; Google का crawler शायद कभी दूसरे संस्करण न देखे।
• भाषा के आधार पर अपने आप redirect न करें; इसके बजाय संस्करणों के बीच लिंक दें।
• hreflang इस्तेमाल करें ताकि Google को पता चले कि कौन से पेज एक-दूसरे के अनुवाद हैं। हर संस्करण को खुद को और बाकी सबको सूचीबद्ध करना होगा, वरना annotations अनदेखे हो सकते हैं। Fallback पेज के लिए x-default जोड़ें।
• Google पेज की भाषा उसके दिखने वाले content से पहचानता है, lang या hreflang से नहीं — इसलिए केवल menu नहीं, पूरा पेज अनुवाद करें।

फिर भी हर संस्करण पर <html lang="fr"> सेट करें: screen readers इससे सही उच्चारण चुनते हैं, जो एक accessibility आवश्यकता है।

लॉग-इन वाली ऐप स्क्रीन को index करने की ज़रूरत नहीं होती, इसलिए उनके लिए भाषा user की profile में सहेजना ठीक है। सार्वजनिक पेजों को पहले crawl कराने के लिए AI से बनी वेबसाइटों के लिए SEO देखें।

आपके database में content

Interface का टेक्स्ट फ़ाइलों में रहता है; product names, blog posts और categories जैसा content database में रहता है। दो आम पैटर्न:

• एक translations table: product_translations (product_id, locale, name, description)। साफ़-सुथरा और कई भाषाओं तक बढ़ने लायक।
• हर field के लिए एक JSON column: name: {"en": "...", "fr": "..."}। कुछ भाषाओं के लिए सरल।

तय करें कि अनुवाद न मिलने पर क्या होगा, आमतौर पर खाली जगह दिखाने की बजाय डिफ़ॉल्ट भाषा पर लौट जाएँ।

ईमेल और notifications

हर user की भाषा सहेजें और उसे ईमेल, notifications और PDFs के लिए भी इस्तेमाल करें। ऐप का अनुवाद करना और यह भूल जाना आसान है कि welcome email अब भी अंग्रेज़ी में आती है।

काम करने वाले prompts

react-i18next के साथ internationalisation जोड़ो। हर user को दिखने वाली string को namespaced keys के साथ locales/en.json में ले जाओ, string concatenation की जगह interpolation और plural rules इस्तेमाल करो, और तारीख, संख्याएँ व कीमतें मौजूदा locale के अनुसार Intl से format करो। अभी कोई शब्द मत बदलो।

फ़्रेंच और जर्मन जोड़ो। सार्वजनिक marketing पेजों को /fr/ और /de/ URL prefix मिलें, root पर अंग्रेज़ी रहे, हर पेज पर hreflang links हों (खुद का संदर्भ और x-default सहित), और हर पेज पर html lang सेट हो। एक भाषा switcher जोड़ो जो हर भाषा का अपना नाम दिखाए। Logged-in पेजों के लिए भाषा user की profile में सहेजो।

दाएँ-से-बाएँ समर्थन के साथ अरबी जोड़ो: अरबी के लिए dir="rtl" सेट करो, बाएँ/दाएँ margins और paddings की जगह logical properties लगाओ, दिशा बताने वाले icons पलटो, और जाँचो कि forms और tables अब भी सही पढ़े जाते हैं।

चरण दर चरण

1. पहली अतिरिक्त भाषा चुनें असली माँग के आधार पर — जहाँ आपके visitors या ग्राहक हैं।
2. कोड को internationalise करें: strings को फ़ाइलों में ले जाएँ, plurals और Intl formatting जोड़ें। इसे केवल अंग्रेज़ी के साथ ship करें और जाँचें कि कुछ बदला नहीं।
3. सार्वजनिक पेजों के लिए URL ढाँचा तय करें और hreflang जोड़ें।
4. अनुवाद करें: machine या AI से मसौदा बनाएँ, फिर किसी धाराप्रवाह बोलने वाले से समीक्षा कराएँ। अनुवादकों को संदर्भ दें — "Book" एक स्क्रीन पर संज्ञा है और दूसरी पर क्रिया।
5. Database content का अनुवाद करें और fallbacks तय करें।
6. बाकी को भी localise करें: ईमेल, error messages, कानूनी पेज, टेक्स्ट वाली तस्वीरें।
7. हर भाषा को फ़ोन की चौड़ाई पर टेस्ट करें, और ज़रूरत हो तो दाएँ-से-बाएँ के साथ भी।
8. एक प्रक्रिया बनाएँ ताकि नए फ़ीचर महीनों बाद नहीं, अनुवाद के साथ ship हों।

आम गलतियाँ

• वाक्यों को जोड़ना ("You have " + n + " messages"), जो दूसरी भाषाओं में टूट जाता है।
• Components में hard-coded टेक्स्ट छूट जाना, जैसे error messages और validation strings।
• तारीख और कीमतों को हाथ से format करना।
• भाषाओं के लिए झंडे, और ऐसे auto-redirects जो लोगों को गलत संस्करण में फँसा दें।
• सभी भाषाओं के लिए एक ही URL उन पेजों पर जो index होने चाहिए।
• hreflang की वापसी वाली links गायब होना, जिससे Google annotations को अनदेखा कर देता है।
• Interface का अनुवाद करना पर content का नहीं, या इसका उल्टा।
• मूल्य निर्धारण, कानूनी और checkout पेजों पर बिना समीक्षा का machine अनुवाद।

बहुभाषी चेकलिस्ट

• कोई hard-coded user-visible string नहीं; plural rules और placeholders इस्तेमाल हुए
• तारीख, संख्याएँ और मुद्रा Intl से format हुए
• हर पेज पर मूल नामों वाला भाषा switcher; चुनाव याद रखा जाता है
• सार्वजनिक पेजों के लिए हर भाषा का अलग URL; कोई ज़बरदस्ती redirect नहीं
• हर संस्करण पर hreflang, खुद और x-default सहित
• html lang (और जहाँ ज़रूरी हो dir="rtl") हर पेज पर सेट
• Database content का अनुवाद, उचित fallbacks के साथ
• ईमेल और notifications उपयोगकर्ता की भाषा में भेजे जाते हैं
• ग्राहकों को दिखने वाले टेक्स्ट की किसी धाराप्रवाह बोलने वाले ने समीक्षा की

Mythex पर कई भाषाएँ

Mythex पर आप चैट में पूछकर भाषाएँ जोड़ते हैं — अलग से कोई अनुवाद panel नहीं है — इसलिए ऊपर के prompts जैसे लिखे हैं वैसे ही काम करते हैं। पहले internationalisation वाला कदम करें और भाषाएँ जोड़ने से पहले Preview में जाँचें; यह एक बड़ा refactor है, और चैट checkpoint आपको वापस लौटने का बिंदु देता है अगर कुछ टूटे (chat और checkpoints)। अगर आप चाहते हैं कि ऐप AI या translation API से content अपने आप अनुवाद करे, तो वह आपकी अपनी API key इस्तेमाल करेगा, जो प्रोजेक्ट settings में सहेजी जाती है (environment variables और secrets); LLM APIs कैसे इस्तेमाल करें में खर्च समझाया गया है। नई भाषाएँ तैयार हो जाएँ तो फिर से publish करें।

सवाल