تصميم موقع ثنائي اللغة: العربية والإنجليزية بشكل صحيح

المقدمة

• المشكلة: كثير من المواقع الثنائية في الخليج تُصمَّم بإتقان بلغة واحدة ثم تُلحَق الثانية لاحقاً. فتخرج الصفحات العربية بمحاذاة مكسورة وخطوط غير متناسقة وأزرار غير مترجمة أو محتوى ناقص.
• لماذا يهمّ: في عُمان والخليج ينتقل العميل بين العربية والإنجليزية بحسب الموقف. إن بدت إحدى النسختين أقل جودة خسرت ثقة ذلك الجمهور، وقد ترتبك محركات البحث في معرفة أي صفحة لمن.
• ماذا يغطي المقال: اتجاه التخطيط، والخطوط، ومبدّل اللغة، وحجم المحتوى لكل لغة، وبنية الروابط، وقائمة لمراجعة موقعك. وجانب البحث (hreflang) له دليل مستقل: السيو ثنائي اللغة وhreflang.

حدّد النموذج قبل التصميم

قبل أي تصميم، اتفقوا على علاقة اللغتين ببعضهما. هناك ثلاثة نماذج شائعة.

أيّاً اخترت، أعلنه لفريقك بوضوح. معظم المشكلات تأتي من مواقع انزلقت دون قرار إلى ترجمة نصفية.

التخطيط: RTL وLTR ليسا مجرد قلب

العربية تُقرأ من اليمين إلى اليسار (RTL) والإنجليزية من اليسار إلى اليمين (LTR). يجب بناء الصفحة لتدعم الاتجاهين، لا قلبها يدوياً بعد الانتهاء.

ما يجب أن ينعكس

• محاذاة النص واتجاه القراءة وموضع الشعار والقائمة الرئيسية.
• أسهم التنقل وأيقونات "التالي" و"السابق" ومسار التنقل (breadcrumbs) ومؤشرات التقدّم.
• ترتيب الأعمدة والشريط الجانبي والبطاقات التي تحمل صورة على جانب، وتسميات النماذج.
• السلايدر والخطوط الزمنية، لتتحرك بحسب اتجاه القراءة.

ما لا ينعكس

• أرقام الهاتف والبريد والروابط والأكواد وأسماء الموديلات، فتبقى من اليسار لليمين حتى داخل النص العربي.
• الشعارات والعلامات، إلا إن صُمّمت نسخة معكوسة رسمية.
• الأيقونات ذات المعنى الواقعي كالساعة وزر التشغيل وعلامة الصح والعدسة.
• المخططات التي يمثل محورها الأفقي الزمن محل نقاش؛ اعتمد قاعدة واحدة ثابتة وسمِّ المحاور بوضوح.
• الأرقام: اختر نمطاً واحداً لكل لغة (أرقام غربية أو هندية) والتزم به، خصوصاً في الأسعار والتواريخ.

كيف تبنيه

• اضبط dir="rtl" وlang="ar" للصفحة العربية، وdir="ltr" وlang="en" للإنجليزية.
• استخدم الخصائص المنطقية في CSS (margin-inline-start وpadding-inline-end وtext-align: start) بدل left وright، فيخدم ملف تنسيق واحد الاتجاهين.
• اختبر المحتوى المختلط: جملة عربية فيها اسم علامة إنجليزي أو رقم كثيراً ما تظهر علامات الترقيم في مكان خاطئ. غلّف الجزء المدمج بعنصر معزول كي لا يربك الجملة.

الخطوط: حيث تقصّر أكثر المواقع الثنائية

العربية ليست "إنجليزية بحروف مختلفة"؛ لها أبعادها الخاصة وتحتاج مساحة أكبر.

• اختر خطاً عربياً حقيقياً مصمماً للشاشات، لا البديل الافتراضي للنظام. وزاوجه مع خط لاتيني متقارب الوزن والارتفاع ليبدوا عائلة واحدة.
• زد ارتفاع السطر للعربية. النص العربي بحركاته وأشكال حروفه العالية يحتاج غالباً تباعداً أكبر من اللاتيني بالحجم نفسه.
• قارب بين الأحجام. بالحجم نفسه قد تبدو العربية أصغر من الإنجليزية. اختبر واضبط الحجم العربي بدل افتراض التطابق.
• تجنّب المائل والأحرف الكبيرة القسرية. العربية لا أحرف كبيرة فيها، والمائل صعب القراءة. استخدم الوزن واللون للتأكيد.
• لا تضف تباعداً بين الحروف في العربية فهو يقطع اتصالها.
• قلّل أوزان الخطوط للحفاظ على خفة الصفحة؛ راجع سرعة الموقع عملياً.

مبدّل اللغة: واضح ومتوقَّع

إن لم تكن الصفحة موجودة باللغة الأخرى فاذكر ذلك بلطف واعرض أقرب بديل. الطريق المسدود أو التحويل الصامت للرئيسية يزعج الزائر ويعطي محركات البحث انطباع ضعف الجودة.

تكافؤ المحتوى والنبرة

• اكتب بلغة أصيلة لا كلمة بكلمة. الترجمة الحرفية تبدو متصلبة. حافظ على الحقائق والبنية نفسها وكيّف الصياغة والأمثلة والنبرة لكل جمهور.
• ترجم كل ما يظهر: الأزرار وتسميات النماذج ورسائل الخطأ والنصوص الإرشادية وإشعار الكوكيز ورسائل البريد والنص البديل للصور وعنوان الصفحة ووصفها.
• افحص ما يُنسى: صفحة 404 وصفحة الشكر والفواتير والرسائل الآلية.
• أبقِ الحقائق متطابقة: الخدمات والدوام والعناوين والسياسات يجب أن تتطابق. حدّث اللغتين معاً.
• وحّد المصطلحات. اعتمد المقابل العربي لكل اسم خدمة واستخدمه في كل مكان.
• احذر الصور المحتوية على نص. لافتة نصها العربي مدمج في الصورة لن تصلح للصفحة الإنجليزية. استخدم صوراً منفصلة أو نصاً حياً.

الروابط والبنية

البنية النظيفة تخدم الزائر ومحركات البحث.

• استخدم رابطاً مستقلاً لكل لغة، مثل قسمي /ar/ و/en/ أو نطاقين فرعيين. تجنّب عرض لغات مختلفة على العنوان نفسه بالتخمين.
• اجعل مسارات الصفحات متوازية، فيقابل /ar/services/ المسار /en/services/.
• اختر روابط مقروءة. الروابط العربية ممكنة، لكن فرقاً كثيرة تفضّل روابط إنجليزية أو مكتوبة بحروف لاتينية واضحة لسهولة المشاركة والثبات؛ اعتمد قاعدة واحدة والتزم بها.
• اربط كل صفحة بنظيرتها بوسوم hreflang ليفهم محرك البحث الزوج. التفاصيل في السيو ثنائي اللغة وhreflang.
• اعطِ كل نسخة عنوانها ووصفها بلغتها.

قائمة مراجعة

1. افتح عشر صفحات أساسية باللغتين. هل المحاذاة صحيحة في كل مكان؟
2. افحص القوائم والأسهم والأيقونات ومسار التنقل من حيث الاتجاه.
3. اختبر الأرقام وأرقام الهاتف والأسماء الإنجليزية داخل جمل عربية.
4. قارن الخط العربي والإنجليزي جنباً إلى جنب بحجمي النص والعناوين.
5. اضغط مبدّل اللغة في خمس صفحات مختلفة. هل يحتفظ بالصفحة؟
6. أرسل كل نموذج باللغتين واقرأ رسائل التأكيد والخطأ.
7. قارن الحقائق (خدمات، دوام، عنوان) بين النسختين.
8. افحص عناوين الصفحات والأوصاف والنص البديل للصور باللغتين.
9. جرّب على جوال حقيقي لا متصفح الحاسوب فقط.

أخطاء شائعة

• ترجمة الموقع كله آلياً ونشره دون قارئ أصلي.
• قلب الصفحة بحيلة سريعة بدل البناء بالخصائص المنطقية، فتنكسر تفاصيل في كل مكان.
• خط واحد يعالج العربية بشكل سيئ، أو خطان لا ينسجمان.
• مبدّل لغة يعيد دائماً إلى الرئيسية.
• ترك إحدى اللغتين قديمة بعد تغيير سعر أو خدمة.
• خلط أنماط الأرقام عشوائياً في الصفحة الواحدة.
• استخدام الأعلام للغات، فيربك الزوار؛ فالعربية مثلاً لغة دول كثيرة.

ماذا يفعل Xposio في هذا المجال؟

1. نتفق على نموذج اللغات أولاً (كامل أو أساسي أو حسب الجمهور) لتعرف ما سيُكتب وما سيُصان.
2. نبني RTL وLTR من البداية بالخصائص المنطقية، بدل ترقيع اتجاه بعد الآخر.
3. نختار الخطين العربي واللاتيني ونختبرهما معاً على جوالات حقيقية مع عناية بالحجم والتباعد والوزن.
4. نصمم المبدّل وبنية الروابط ليبقى الزائر في الصفحة نفسها وتستطيع محركات البحث اقتران النسختين.
5. نكتب العربية والإنجليزية بلغة أصيلة حين يكون المحتوى ضمن المشروع، ونراجع الأرقام والأسماء داخل الجمل.

رابط داخلي: تعرّف على خدمة تصميم وتطوير المواقع عبر ‎/ar/services/website-design-development، وخدمة المحتوى وكتابة النصوص عبر ‎/ar/services/content-copywriting.

ويمكنك تصفح المزيد من الأدلة في ‎/ar/blog.

الخلاصة

• اختر نموذج المحتوى (كامل أو أساسي أو حسب الجمهور) قبل بدء التصميم.
• ابنِ التخطيط بالخصائص المنطقية ليشترك RTL وLTR في كود نظيف واحد.
• عامل الخط العربي كمهمة قائمة بذاتها: الخط والحجم والتباعد، دون مائل أو تباعد حروف.
• مبدّل اللغة يُبقي الزائر في الصفحة نفسها ويكتب كل لغة باسمها.
• أبقِ الحقائق متطابقة، واكتب كل لغة بأسلوب أصيل، وحدّث اللغتين معاً.
• استخدم روابط متوازية وhreflang ليقرن محرك البحث النسختين بشكل صحيح.

قراءات ذات صلة

• السيو ثنائي اللغة وhreflang
• تحديات السيو العربي
• التصميم للجوال أولاً