چطور چند زبانه کردن اپ یا وب‌سایت را اضافه کنیم

برای افزودن چند زبان به یک اپ، تمام متن‌های رابط کاربری را در فایل‌های ترجمه (یک فایل برای هر زبان) بگذارید، آن‌ها را با یک کتابخانه i18n بارگذاری کنید و یک سوییچر زبان اضافه کنید که انتخاب کاربر را به خاطر بسپارد. برای صفحات عمومی که باید در جست‌وجو پیدا شوند، به هر زبان یک آدرس جدا مثل /fr/ بدهید و نسخه‌ها را با برچسب‌های hreflang به هم وصل کنید. بعد سراغ بخش‌هایی بروید که معمولاً فراموش می‌شوند: تاریخ، عدد و ارز، متن‌های بلندتر در بعضی زبان‌ها، خط راست‌به‌چپ، و محتوایی که در پایگاه داده ذخیره شده است.

اصطلاحاتی که خواهید شنید

• بین‌المللی‌سازی (i18n): آماده کردن کد برای پشتیبانی از هر زبان، بدون متن ثابت در کد، قالب‌بندی وابسته به زبان و چیدمان انعطاف‌پذیر. عدد «۱۸» تعداد حروف بین i و n است.
• بومی‌سازی (l10n): تطبیق اپ با یک زبان یا بازار مشخص، که بیشتر ترجمه است و گاهی ارز، تصاویر و متن حقوقی را هم شامل می‌شود.
• Locale: ترکیب یک زبان و در صورت نیاز یک منطقه، مثل en-GB یا pt-BR.

زیرساخت i18n را یک بار انجام دهید؛ آن‌وقت افزودن هر زبان جدید بیشتر کار ترجمه است.

گزینه‌ها و مبادلات

برای بیشتر اپ‌ها، یک کتابخانه استاندارد i18n با فایل‌های ترجمه پایه‌ی درستی است. اگر خواستید، پیش‌نویس ترجمه را با ماشین یا هوش مصنوعی بسازید، سپس بخش‌هایی را که مشتری بیشتر می‌بیند توسط یک فرد مسلط بازبینی کنید.

اجزای یک اپ چندزبانه

فایل‌های ترجمه

به‌جای <h1>Welcome back</h1>، کد می‌نویسد t('dashboard.welcome') و هر زبان فایلی دارد که متن را در آن نگه می‌دارد:

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

برای متغیرها از جایگاه‌نما (placeholder) استفاده کنید و قطعه‌جملات را کنار هم نچسبانید، چون ترتیب کلمات در زبان‌ها متفاوت است. همچنین از قواعد جمع کتابخانه استفاده کنید: انگلیسی دو شکل دارد (۱ آیتم، ۲ آیتم)، اما بعضی زبان‌ها سه یا چند شکل دارند.

قالب‌بندی تاریخ، عدد و پول

این‌ها را دستی قالب‌بندی نکنید. API داخلی مرورگر به نام Intl برای هر locale قالب‌بندی می‌کند: 1,234.5 در انگلیسی می‌شود 1.234,5 در آلمانی؛ تاریخ‌ها بین روز-اول و ماه-اول جابه‌جا می‌شوند؛ نماد ارز جای خود را عوض می‌کند. تاریخ‌ها را به‌صورت UTC و پول را به‌صورت عدد همراه کد ارز ذخیره کنید و فقط برای نمایش قالب‌بندی کنید.

چیدمانی که کش می‌آید

متن ترجمه‌شده اغلب از انگلیسی بلندتر است، به‌خصوص کلمات آلمانی و فنلاندی. از دکمه‌های با عرض ثابت و برچسب‌های بریده‌شده پرهیز کنید و با بلندترین زبانی که پشتیبانی می‌کنید تست بگیرید.

زبان‌های راست‌به‌چپ

عربی، عبری، فارسی و اردو از راست به چپ نوشته می‌شوند. برای این locale‌ها dir="rtl" را روی صفحه بگذارید و از ویژگی‌های منطقی CSS استفاده کنید (margin-inline-start به‌جای margin-left؛ در Tailwind، ms-4 به‌جای ml-4) تا چیدمان خودش آینه شود. آیکون‌هایی که جهت را نشان می‌دهند، مثل فلش‌ها، هم باید برگردانده شوند.

سوییچر زبان و تشخیص خودکار

در هر صفحه یک سوییچر نشان دهید که هر زبان با نام خودش برچسب بخورد («Deutsch»، «Français»، «العربية»، «فارسی») نه با پرچم؛ پرچم نشان‌دهنده کشور است، نه زبان. در اولین بازدید، زبان ترجیحی مرورگر را تشخیص دهید تا یک نسخه پیشنهاد شود، اما انتخاب صریح بازدیدکننده برتر است و باید به خاطر سپرده شود.

آدرس‌ها و سئو

برای صفحاتی که می‌خواهید در جست‌وجو دیده شوند، هر زبان به آدرس جدا نیاز دارد. از سپتامبر ۲۰۲۶، راهنمای گوگل برای سایت‌های چندزبانه این است:

• آدرس جدا برای هر زبان: زیرپوشه‌ها (example.com/fr/) ساده‌ترین روش‌اند؛ زیردامنه و دامنه‌های کشوری هم کار می‌کنند. پارامترهای آدرس (?lang=fr) توصیه نمی‌شوند.
• زبان را فقط با کوکی یا تنظیمات مرورگر عوض نکنید؛ ممکن است خزنده گوگل هرگز نسخه‌های دیگر را نبیند.
• بر اساس زبان هدایت خودکار نکنید؛ به‌جایش بین نسخه‌ها پیوند بدهید.
• از hreflang استفاده کنید تا به گوگل بگویید کدام صفحات ترجمه یکدیگرند. هر نسخه باید خودش و همه نسخه‌های دیگر را فهرست کند، وگرنه ممکن است برچسب‌ها نادیده گرفته شوند. برای صفحه پیش‌فرض، x-default را اضافه کنید.
• گوگل زبان صفحه را از محتوای قابل‌مشاهده تشخیص می‌دهد، نه از lang یا hreflang؛ پس کل صفحه را ترجمه کنید، نه فقط منو را.

با این حال، روی هر نسخه <html lang="fr"> را بگذارید: صفحه‌خوان‌ها از آن برای تلفظ درست استفاده می‌کنند و این بخشی از الزامات دسترس‌پذیری است.

صفحه‌های اپ پس از ورود کاربر لازم نیست ایندکس شوند؛ برای آن‌ها ذخیره زبان در پروفایل کاربر کافی است. برای اینکه صفحات عمومی اصلاً خزیده شوند، سئو برای وب‌سایت‌های ساخته‌شده با هوش مصنوعی را ببینید.

محتوا در پایگاه داده

متن رابط کاربری در فایل‌ها زندگی می‌کند؛ محتوایی مثل نام محصول، پست‌های وبلاگ و دسته‌بندی‌ها در پایگاه داده قرار دارند. دو الگوی رایج:

• جدول ترجمه: product_translations (product_id, locale, name, description). تمیز است و برای زبان‌های زیاد مقیاس‌پذیر است.
• ستون JSON برای هر فیلد: name: {"en": "...", "fr": "..."}. برای چند زبان ساده‌تر است.

تصمیم بگیرید وقتی ترجمه‌ای وجود ندارد چه شود؛ معمولاً به زبان پیش‌فرض برگردید، نه اینکه فضای خالی نشان دهید.

ایمیل‌ها و اعلان‌ها

زبان هر کاربر را ذخیره کنید و از آن برای ایمیل‌ها، اعلان‌ها و PDF‌ها هم استفاده کنید. اپ را ترجمه کردن و فراموش کردن اینکه ایمیل خوش‌آمدگویی هنوز به انگلیسی می‌رسد، خیلی آسان است.

درخواست‌هایی که خوب جواب می‌دهند

i18n را با react-i18next اضافه کن. هر متنی که کاربر می‌بیند را به locales/en.json با کلیدهای نام‌دار ببر، از interpolation و قواعد جمع به‌جای چسباندن رشته‌ها استفاده کن، و تاریخ، عدد و قیمت را با Intl و locale فعلی قالب‌بندی کن. هنوز هیچ متنی را تغییر نده.

فرانسوی و آلمانی اضافه کن. صفحات بازاریابی عمومی پیشوند آدرس /fr/ و /de/ بگیرند و انگلیسی در ریشه بماند، روی هر صفحه پیوندهای hreflang (شامل خودارجاع و x-default) و html lang مخصوص همان صفحه باشد. یک سوییچر زبان با نام بومی هر زبان اضافه کن. برای صفحات بعد از ورود، زبان را در پروفایل کاربر ذخیره کن.

زبان عربی با پشتیبانی راست‌به‌چپ اضافه کن: برای عربی dir="rtl" بگذار، حاشیه‌ها و فاصله‌های چپ و راست را با ویژگی‌های منطقی جایگزین کن، آیکون‌های جهت‌دار را آینه کن و بررسی کن فرم‌ها و جدول‌ها هنوز درست خوانده می‌شوند.

مرحله به مرحله

1. اولین زبان اضافی را بر اساس تقاضای واقعی انتخاب کنید: بازدیدکنندگان یا مشتری‌هایتان کجا هستند.
2. کد را بین‌المللی کنید: متن‌ها را به فایل ببرید، جمع و قالب‌بندی Intl را اضافه کنید. این را فقط با انگلیسی منتشر کنید و بررسی کنید چیزی تغییر نکرده باشد.
3. ساختار آدرس صفحات عمومی را تعیین کنید و hreflang را اضافه کنید.
4. ترجمه کنید: با ماشین یا هوش مصنوعی پیش‌نویس بسازید، سپس با یک فرد مسلط بازبینی کنید. به مترجم‌ها زمینه بدهید؛ کلمه‌ای مثل «Book» در یک صفحه اسم است و در صفحه دیگر فعل.
5. محتوای پایگاه داده را ترجمه کنید و جایگزین‌های پیش‌فرض تعیین کنید.
6. بقیه چیزها را بومی کنید: ایمیل‌ها، پیام‌های خطا، صفحات حقوقی، تصاویری که متن دارند.
7. هر زبان را در عرض گوشی تست کنید، و اگر راست‌به‌چپ مرتبط است، آن را هم تست کنید.
8. فرآیندی بگذارید تا ویژگی‌های جدید همراه با ترجمه منتشر شوند، نه ماه‌ها بعد.

اشتباهات رایج

• چسباندن جمله‌ها به هم ("You have " + n + " messages") که در زبان‌های دیگر خراب می‌شود.
• متن ثابت باقی‌مانده در کامپوننت‌ها، پیام‌های خطا و رشته‌های اعتبارسنجی.
• قالب‌بندی دستی تاریخ و قیمت.
• استفاده از پرچم برای زبان، و هدایت خودکار که بازدیدکننده را در نسخه اشتباه گیر می‌اندازد.
• یک آدرس برای همه زبان‌ها روی صفحاتی که می‌خواهید ایندکس شوند.
• نبودن برچسب بازگشتی hreflang، که باعث می‌شود گوگل برچسب‌ها را نادیده بگیرد.
• ترجمه رابط کاربری ولی نه محتوا، یا برعکس.
• ترجمه ماشینی بدون بازبینی در صفحات قیمت، حقوقی و پرداخت.

چک‌لیست چندزبانه

• هیچ متن ثابت قابل‌مشاهده‌ای در کد نیست؛ قواعد جمع و جایگزین‌ها استفاده شده‌اند
• تاریخ، عدد و ارز با Intl قالب‌بندی شده‌اند
• سوییچر زبان با نام بومی روی هر صفحه است و انتخاب به خاطر سپرده می‌شود
• برای صفحات عمومی آدرس جدا برای هر زبان؛ بدون هدایت اجباری
• hreflang روی هر نسخه، شامل خودارجاع و x-default
• html lang (و dir="rtl" در صورت نیاز) برای هر صفحه تنظیم شده است
• محتوای پایگاه داده ترجمه شده و جایگزین‌های منطقی دارد
• ایمیل‌ها و اعلان‌ها به زبان کاربر ارسال می‌شوند
• متن‌هایی که مشتری می‌بیند توسط یک فرد مسلط بازبینی شده‌اند

چند زبان در Mythex

در Mythex برای افزودن زبان‌ها در چت درخواست می‌دهید؛ پنل ترجمه جداگانه‌ای وجود ندارد، پس درخواست‌های بالا همان‌طور که نوشته شده‌اند کار می‌کنند. قبل از افزودن زبان‌ها، مرحله بین‌المللی‌سازی را انجام دهید و در Preview بررسی کنید؛ این یک بازنویسی بزرگ است و یک checkpoint در چت به شما نقطه بازگشت می‌دهد (چت و checkpoint). اگر می‌خواهید اپ با هوش مصنوعی یا API ترجمه خودکار محتوا را ترجمه کند، این کار از کلید API خودتان استفاده می‌کند که در تنظیمات پروژه ذخیره می‌شود (متغیرهای محیطی و رازها); نحوه استفاده از API‌های LLM هزینه‌ها را توضیح می‌دهد. وقتی زبان‌های جدید آماده شدند، دوباره منتشر کنید.

پرسش‌ها