તમારી એપ કે વેબસાઇટમાં એકથી વધુ ભાષાઓ કેવી રીતે ઉમેરશો

એપમાં ઘણી ભાષાઓ ઉમેરવા માટે, ઇન્ટરફેસનું દરેક લખાણ અનુવાદ ફાઇલોમાં (દરેક ભાષા માટે એક) મૂકો, i18n લાઇબ્રેરીથી તેને લોડ કરો, અને એક ભાષા-સ્વિચર ઉમેરો જે પસંદગી યાદ રાખે. જે જાહેર પેજ સર્ચમાં મળવા જોઈએ, તેના માટે દરેક ભાષાને /fr/ જેવું અલગ URL આપો અને hreflang ટૅગથી વર્ઝનો જોડો. પછી એ બાબતો સંભાળો જે લોકો ઘણીવાર ભૂલી જાય છે: તારીખ, આંકડા અને ચલણ, અમુક ભાષાઓમાં લાંબું લખાણ, જમણેથી ડાબે લખાતી લિપિઓ, અને તમારા ડેટાબેઝમાં સંગ્રહાયેલી સામગ્રી.

તમે જે શબ્દો સાંભળશો

• ઇન્ટરનેશનલાઇઝેશન (i18n): કોડને કોઈપણ ભાષા સપોર્ટ કરી શકે તેવો તૈયાર કરવો — કોડમાં સીધા લખાયેલા શબ્દો નહીં, સ્થાનિક રીતે ફોર્મેટ થતી માહિતી, લવચીક લેઆઉટ. "18" એટલે i અને n વચ્ચેના 18 અક્ષરો.
• સ્થાનિકીકરણ (l10n): એપને ચોક્કસ ભાષા કે બજાર માટે અનુકૂળ બનાવવી, મુખ્યત્વે અનુવાદ, ક્યારેક ચલણ, ચિત્રો અને કાયદાકીય લખાણ પણ.
• લોકેલ (Locale): ભાષા અને વૈકલ્પિક રીતે પ્રદેશ, જેમ કે en-GB અથવા pt-BR.

i18n એકવાર કરો, પછી દરેક નવી ભાષા ઉમેરવી મોટે ભાગે ફક્ત અનુવાદનું કામ બની જાય છે.

વિકલ્પો અને ટ્રેડ-ઑફ

મોટાભાગની એપ્સ માટે, અનુવાદ ફાઇલો સાથે માનક i18n લાઇબ્રેરી યોગ્ય આધાર છે. જો ઇચ્છો તો મશીન કે AI અનુવાદથી ડ્રાફ્ટ બનાવો, પછી ગ્રાહકો સૌથી વધુ જે જુએ છે તેની અસ્ખલિત બોલનારા પાસે સમીક્ષા કરાવો.

બહુભાષી એપના ભાગો

અનુવાદ ફાઇલો

<h1>Welcome back</h1> ને બદલે કોડમાં t('dashboard.welcome') લખાય છે, અને દરેક લોકેલની ફાઇલમાં તેનું લખાણ હોય છે:

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

ચલ (variable) માટે પ્લેસહોલ્ડર વાપરો, વાક્યના ટુકડા જોડશો નહીં — શબ્દક્રમ ભાષાઓ પ્રમાણે બદલાય છે. અને લાઇબ્રેરીના બહુવચન નિયમો (plural rules) વાપરો: અંગ્રેજીમાં બે રૂપ છે (1 item, 2 items), પરંતુ કેટલીક ભાષાઓમાં ત્રણ, ચાર કે વધુ રૂપ હોય છે.

તારીખ, આંકડા અને નાણાં ફોર્મેટ કરવા

આ હાથે ફોર્મેટ ન કરો. બ્રાઉઝરનું બિલ્ટ-ઇન Intl API કોઈપણ લોકેલ માટે ફોર્મેટ કરે છે: અંગ્રેજીમાં 1,234.5 એ જર્મનમાં 1.234,5 છે; તારીખ દિવસ-પહેલાં કે મહિનો-પહેલાં તરીકે બદલાય છે; ચલણનું ચિહ્ન ખસે છે. તારીખ UTC માં સંગ્રહો અને નાણાં ચલણ કોડ સાથે આંકડા તરીકે સંગ્રહો, અને ફક્ત દેખાડવા માટે ફોર્મેટ કરો.

ખેંચાતો લેઆઉટ

અનુવાદિત લખાણ ઘણીવાર અંગ્રેજી કરતાં લાંબું હોય છે — ખાસ કરીને જર્મન અને ફિનિશ શબ્દો. નિશ્ચિત પહોળાઈના બટન અને કાપેલા લેબલ ટાળો, અને તમારી સૌથી લાંબી ભાષા સાથે ચકાસો.

જમણેથી ડાબે લખાતી ભાષાઓ

અરબી, હિબ્રૂ, ફારસી અને ઉર્દૂ જમણેથી ડાબે વંચાય છે. આ લોકેલ માટે પેજ પર dir="rtl" સેટ કરો અને CSS લોજિકલ પ્રોપર્ટી વાપરો (margin-left ને બદલે margin-inline-start; Tailwind માં ml-4 ને બદલે ms-4), જેથી લેઆઉટ આપમેળે ઊલટાય. દિશા સૂચવતા ચિહ્નો, જેમ કે તીર, તેમને પણ ફ્લિપ કરવા પડે.

ભાષા સ્વિચર અને શોધ

દરેક પેજ પર સ્વિચર બતાવો, જેમાં દરેક ભાષાનું પોતાનું નામ હોય ("Deutsch", "Français", "العربية"), ફ્લેગ નહીં — ફ્લેગ દેશોને દર્શાવે છે, ભાષાઓને નહીં. પહેલી મુલાકાતે બ્રાઉઝરની પસંદીદા ભાષા શોધો અને વર્ઝન સૂચવો, પરંતુ મુલાકાતીની સ્પષ્ટ પસંદગી સર્વોપરી રાખો અને તેને યાદ રાખો.

URL અને SEO

જે પેજ સર્ચ પરિણામોમાં જોઈએ, તેના માટે દરેક ભાષાને પોતાનું URL જોઈએ. સપ્ટેમ્બર 2026 સુધી, બહુભાષી સાઇટ્સ માટે Google નું માર્ગદર્શન આ છે:

• દરેક ભાષા માટે અલગ URL — સબડિરેક્ટરી (example.com/fr/) સૌથી સરળ છે; સબડોમેન અને દેશ ડોમેન પણ ચાલે છે. URL પેરામીટર (?lang=fr) ભલામણ કરેલ નથી.
• ફક્ત કૂકી કે બ્રાઉઝર સેટિંગથી ભાષા બદલશો નહીં; Google નો ક્રોલર બીજા વર્ઝન ક્યારેય ન જોઈ શકે.
• ભાષા પ્રમાણે આપમેળે રીડાયરેક્ટ ન કરો; તેના બદલે વર્ઝનો વચ્ચે લિંક આપો.
• hreflang વાપરો જેથી Google જાણી શકે કે કયા પેજ એકબીજાના અનુવાદ છે. દરેક વર્ઝને પોતાને અને બીજા બધાને યાદીમાં મૂકવા જોઈએ, નહીંતર સૂચનાઓ અવગણાઈ શકે. ફોલબેક પેજ માટે x-default ઉમેરો.
• Google પેજની ભાષા તેના દેખાતા સામગ્રી પરથી શોધે છે, lang કે hreflang પરથી નહીં — તેથી ફક્ત મેનુ નહીં, આખું પેજ અનુવાદ કરો.

તેમ છતાં દરેક વર્ઝન પર <html lang="fr"> સેટ કરો: સ્ક્રીન રીડર તેનો ઉપયોગ સાચો ઉચ્ચાર પસંદ કરવા માટે કરે છે, જે એક સુલભતા (accessibility) જરૂરિયાત છે.

લૉગ-ઇન થયેલી એપ સ્ક્રીનને ઇન્ડેક્સ કરવાની જરૂર નથી, તેથી તેમના માટે ભાષા વપરાશકર્તાની પ્રોફાઇલમાં સંગ્રહવી પૂરતી છે. જાહેર પેજ પહેલા ક્રોલ થાય તે માટે AI થી બનેલી વેબસાઇટ્સ માટે SEO જુઓ.

તમારા ડેટાબેઝમાં સામગ્રી

ઇન્ટરફેસનું લખાણ ફાઇલોમાં રહે છે; ઉત્પાદન નામો, બ્લોગ પોસ્ટ અને કેટેગરી જેવી સામગ્રી ડેટાબેઝ માં રહે છે. બે સામાન્ય પદ્ધતિઓ:

• અનુવાદ ટેબલ: product_translations (product_id, locale, name, description). સ્વચ્છ અને ઘણી ભાષાઓ માટે સ્કેલ થાય છે.
• દરેક ફીલ્ડ માટે JSON કૉલમ: name: {"en": "...", "fr": "..."}. થોડીક ભાષાઓ માટે સરળ.

અનુવાદ ખૂટે ત્યારે શું થશે તે નક્કી કરો — સામાન્ય રીતે ખાલી જગ્યા બતાવવાને બદલે મુખ્ય ભાષા પર પાછા જાઓ.

ઇમેઇલ અને સૂચનાઓ

દરેક વપરાશકર્તાની ભાષા સંગ્રહો અને તેનો ઉપયોગ ઇમેઇલ, સૂચનાઓ અને PDF માટે પણ કરો. એપનો અનુવાદ કરવો સહેલું છે, પરંતુ ભૂલી જવાય છે કે સ્વાગત ઇમેઇલ હજી અંગ્રેજીમાં આવે છે.

કામ કરતા પ્રોમ્પ્ટ

react-i18next સાથે internationalisation ઉમેરો. દરેક વપરાશકર્તાને દેખાતું લખાણ નામસ્થાન (namespace) ધરાવતી કી સાથે locales/en.json માં ખસેડો, શબ્દો જોડવાને બદલે interpolation અને plural rules વાપરો, અને તારીખ, આંકડા તથા કિંમતો વર્તમાન લોકેલ પ્રમાણે Intl વડે ફોર્મેટ કરો. હજી કોઈ શબ્દ બદલશો નહીં.

ફ્રેન્ચ અને જર્મન ઉમેરો. જાહેર માર્કેટિંગ પેજને /fr/ અને /de/ URL પ્રિફિક્સ મળે, અંગ્રેજી રૂટ પર રહે, દરેક પેજ પર hreflang લિંક (પોતાની જાતની અને x-default સહિત) હોય, અને દરેક પેજ પર html lang સેટ હોય. દરેક ભાષાનું મૂળ નામ બતાવતો ભાષા સ્વિચર ઉમેરો. લૉગ-ઇન પેજ માટે ભાષા વપરાશકર્તાની પ્રોફાઇલમાં સંગ્રહો.

જમણેથી ડાબે સપોર્ટ સાથે અરબી ઉમેરો: અરબી માટે dir="rtl" સેટ કરો, ડાબા/જમણા માર્જિન અને પેડિંગને લોજિકલ પ્રોપર્ટી સાથે બદલો, દિશાસૂચક ચિહ્નો ફ્લિપ કરો, અને ચકાસો કે ફોર્મ અને ટેબલ હજી સાચા વંચાય છે.

પગલે પગલે

1. પહેલી વધારાની ભાષા પસંદ કરો વાસ્તવિક માંગ પ્રમાણે — તમારા મુલાકાતીઓ કે ગ્રાહકો ક્યાં છે.
2. કોડનું internationalisation કરો: લખાણ ફાઇલોમાં ખસેડો, બહુવચન અને Intl ફોર્મેટિંગ ઉમેરો. આ ફક્ત અંગ્રેજીમાં શિપ કરો અને ચકાસો કે કંઈ બદલાયું નથી.
3. જાહેર પેજ માટે URL માળખું નક્કી કરો અને hreflang ઉમેરો.
4. અનુવાદ કરો: મશીન કે AI થી ડ્રાફ્ટ બનાવો, પછી અસ્ખલિત બોલનાર સાથે સમીક્ષા કરાવો. અનુવાદકોને સંદર્ભ આપો — "Book" શબ્દ એક સ્ક્રીન પર સંજ્ઞા હોય અને બીજી પર ક્રિયાપદ હોઈ શકે.
5. ડેટાબેઝ સામગ્રીનો અનુવાદ કરો અને ફોલબેક સેટ કરો.
6. બાકીનું સ્થાનિકીકરણ કરો: ઇમેઇલ, ભૂલ સંદેશા, કાયદાકીય પેજ, લખાણવાળી છબીઓ.
7. દરેક ભાષાને ફોન પહોળાઈ પર ચકાસો, અને જરૂર હોય તો જમણેથી ડાબે સાથે.
8. એક પ્રક્રિયા સેટ કરો જેથી નવી સુવિધાઓ મહિનાઓ પછી નહીં, અનુવાદ સાથે શિપ થાય.

સામાન્ય ભૂલો

• વાક્યો જોડવા ("You have " + n + " messages"), જે બીજી ભાષાઓમાં તૂટે છે.
• કમ્પોનન્ટમાં હાર્ડ-કોડ કરેલું લખાણ બાકી રહેવું, ભૂલ સંદેશા અને માન્યતા (validation) સ્ટ્રિંગ્સ.
• તારીખ અને કિંમતો હાથે ફોર્મેટ કરવી.
• ભાષાઓ માટે ફ્લેગ, અને આપમેળે રીડાયરેક્ટ જે લોકોને ખોટા વર્ઝનમાં ફસાવે.
• બધી ભાષાઓ માટે એક જ URL એવા પેજ પર જે ઇન્ડેક્સ થવા જોઈએ.
• hreflang ના પાછા જતા લિંક ગુમ થવી, જેથી Google સૂચનાઓ અવગણે.
• ઇન્ટરફેસનો અનુવાદ કરવો પણ સામગ્રીનો નહીં, અથવા ઊલટું.
• સમીક્ષા વગરનું મશીન અનુવાદ કિંમત, કાયદાકીય અને ચેકઆઉટ પેજ પર.

બહુભાષી ચેકલિસ્ટ

• કોઈ હાર્ડ-કોડ કરેલું વપરાશકર્તા-દૃશ્ય લખાણ નથી; બહુવચન નિયમો અને પ્લેસહોલ્ડર વપરાયા છે
• તારીખ, આંકડા અને ચલણ Intl થી ફોર્મેટ થયેલા છે
• દરેક પેજ પર મૂળ નામો સાથે ભાષા સ્વિચર; પસંદગી યાદ રહે છે
• જાહેર પેજ માટે દરેક ભાષાનું અલગ URL; કોઈ ફરજિયાત રીડાયરેક્ટ નથી
• દરેક વર્ઝન પર hreflang, પોતાની જાત અને x-default સહિત
• દરેક પેજ પર html lang (અને જ્યાં જરૂર હોય ત્યાં dir="rtl") સેટ
• ડેટાબેઝ સામગ્રીનો અનુવાદ યોગ્ય ફોલબેક સાથે
• ઇમેઇલ અને સૂચનાઓ વપરાશકર્તાની ભાષામાં મોકલાય છે
• ગ્રાહકોને દેખાતું લખાણ અસ્ખલિત બોલનાર દ્વારા સમીક્ષિત

Mythex પર બહુવિધ ભાષાઓ

Mythex પર, તમે ચેટમાં પૂછીને ભાષાઓ ઉમેરો છો — કોઈ અલગ અનુવાદ પેનલ નથી — તેથી ઉપરના પ્રોમ્પ્ટ જેમ છે તેમ કામ કરે છે. પહેલા internationalisation પગલું કરો અને નવી ભાષાઓ ઉમેરતા પહેલા Preview માં ચકાસો; તે મોટું રિફેક્ટર છે, અને ચેટ ચેકપોઇન્ટ તમને કંઈ તૂટે તો પાછા જવાનો બિંદુ આપે છે (ચેટ અને ચેકપોઇન્ટ). જો તમે ઇચ્છો કે એપ AI અથવા અનુવાદ API થી સામગ્રી આપમેળે અનુવાદ કરે, તો તે તમારી પોતાની API કી વાપરે છે, જે પ્રોજેક્ટ સેટિંગ્સમાં સંગ્રહાય છે (પર્યાવરણ ચલો અને સિક્રેટ્સ); LLM APIs કેવી રીતે વાપરવી ખર્ચ સમજાવે છે. નવી ભાષાઓ તૈયાર થાય પછી ફરી પબ્લિશ કરો.

પ્રશ્નો