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

كثير من المواقع التي توصف بأنها "ثنائية اللغة" هي في الحقيقة مواقع إنجليزية صُبّ فيها نص عربي: تنقلب القائمة، وتنكسر بعض الهوامش، ويظهر خط احتياطي لا علاقة له بالهوية، ولا تفهم محركات البحث أي النسختين تعرض. بناء الموقع بشكل صحيح ليس أصعب من بنائه بشكل خاطئ، لكنه قرار يُتخذ في البداية لا في النهاية.

التفاصيل التقنية موسومة بعبارة «لمطوّرك»، وقائمة التحقق هي ما تسلّمه لمن يبني موقعك.

موقع مترجَم أم موقع ثنائي اللغة من الأساس

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

• التخطيط مصمم للاتجاهين، لا معكوس بعد الانتهاء.
• المحتوى مكتوب لكل جمهور، لا منقول كلمة بكلمة.
• النسختان تخضعان للمعايير نفسها في الأداء وإمكانية الوصول.

وهكذا نبني مواقعنا. فهذا الموقع يعمل بالعربية والإنجليزية على Next.js بتخطيط أصيل من اليمين إلى اليسار، وتصف الأسئلة الشائعة هذا النهج بأنه ثنائي اللغة بالتصميم لا بالعكس.

بنية الروابط

لكل نسخة لغوية رابط خاص بها. وتوصي Google في دليل النسخ المحلية باستخدام روابط مستقلة لكل لغة، بدلاً من تبديل المحتوى على الرابط نفسه بحسب ملفات تعريف الارتباط أو إعدادات المتصفح. والخيارات الشائعة:

ويشرح دليل Google للمواقع متعددة المناطق مزايا كل خيار وعيوبه. ولشركة تخدم الناطقين بالعربية والإنجليزية تحت علامة واحدة، يكون المجلد الفرعي لكل لغة هو الأسهل إدارة في الغالب.

وسم hreflang بالطريقة الصحيحة

يخبر وسم hreflang محركات البحث بالرابط المقابل للصفحة في اللغة الأخرى. وقواعد Google في دليلها صارمة:

1. اذكر كل النسخ. كل نسخة تذكر كل النسخ بما فيها نفسها: الصفحة الإنجليزية تشير إلى العربية وإلى نفسها، والعربية كذلك. والروابط التي لا تُقابَل بالمثل تُهمل.
2. رموز صحيحة. اللغة بصيغة ISO 639-1 مثل en وar، ويمكن إضافة المنطقة بصيغة ISO 3166-1 مثل ar-SA وar-EG.
3. أضف x-default. وهو الصفحة التي تُعرض لمن لا تخدم لغته.
4. طريقة واحدة. وسوم link في HTML، أو ترويسات HTTP، أو خريطة الموقع XML؛ وخريطة الموقع أسهلها اتساقاً في المواقع الكبيرة.

وتوضح Google أيضاً أنها لا تعتمد على hreflang ولا على سمة lang لتحديد لغة الصفحة، بل تقرأ المحتوى نفسه. لذلك يجب أن تكون الصفحة العربية عربية فعلاً، بما في ذلك عنوانها ووصفها.

لا تحوّل الزائر تلقائياً بحسب لغة متصفحه

يبدو تحويل الزوار تلقائياً إلى لغتهم فكرة جيدة.

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

الاتجاه من اليمين إلى اليسار تخطيط لا قلب

لمطوّرك. حدّد الاتجاه في الشيفرة نفسها. يوصي اتحاد W3C في إرشاداته بوضع dir="rtl" على عنصر html بدلاً من تحديد الاتجاه عبر CSS، حتى تعمل الصفحة بشكل صحيح ولو تعذّر تحميل التنسيقات.

ثم ابنِ كل تخطيط بالخصائص المنطقية التي تتبع اتجاه القراءة لا حواف الشاشة:

/* Physical: breaks in Arabic */
.card { margin-left: 1rem; text-align: left; }

/* Logical: correct in both directions */
.card { margin-inline-start: 1rem; text-align: start; }

وفي Tailwind CSS تستخدم ms-4 وpe-6 وtext-start بدلاً من ml-4 وpr-6 وtext-left. والكود المكتوب بهذه الطريقة لا يحتاج تقريباً إلى أي استثناءات خاصة بالاتجاه.

ما يُعكس وما لا يُعكس

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

النصوص مختلطة الاتجاه

الصفحات العربية مليئة بالإنجليزية: أسماء منتجات، وأكواد، وعناوين بريد، وأرقام هواتف. وأي محتوى لا يُعرف اتجاهه مسبقاً، كأسماء المستخدمين أو عبارات البحث، ضعه داخل dir="auto" أو عنصر bdi كما توضح إرشادات W3C، حتى تقع علامات الترقيم والأرقام في مكانها الصحيح.

الخطوط لنظامي كتابة

• خط لكل نظام كتابة. اختر خطاً عربياً صُمم إلى جانب خطك اللاتيني، أو زوجاً متناسقاً في الوزن والحجم، ولا تترك الأمر لخط المتصفح الاحتياطي.
• ارتفاع سطر أكبر. للحروف العربية امتدادات أعلى وأسفل، والنص المضبوط على ارتفاع سطر لاتيني يبدو مضغوطاً.
• لا تباعد بين الحروف. العربية خط متصل، وتباعد الحروف يقطع الوصلات بينها.
• لا مائل للتأكيد. معظم الخطوط العربية لا تملك مائلاً حقيقياً؛ استخدم الوزن أو اللون.
• قرّر شكل الأرقام. يمكن أن يستخدم النص العربي الأرقام اللاتينية (0 1 2 3) أو الأرقام الهندية (٠ ١ ٢ ٣)، وكلاهما صحيح. اختر واحداً وطبّقه في كل مكان، بما في ذلك التواريخ والأسعار. ويستخدم هذا الموقع الأرقام اللاتينية في نسخته العربية.

النماذج والبيانات والبحث

لمطوّرك. هذه التفاصيل تحدد هل تعمل النماذج والبيانات والبحث بالعربية:

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

المحتوى: اكتبه ولا تحوّله

سلوك البحث يختلف من لغة إلى أخرى.

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

قائمة تحقق للموقع ثنائي اللغة

• لكل لغة رابط خاص، ومبدّل اللغة ينقل إلى الصفحة المقابلة.
• وسم hreflang متبادل، ويشير إلى الصفحة نفسها، ويتضمن x-default.
• سمتا lang وdir على عنصر html لكل لغة.
• التخطيط بالخصائص المنطقية، ولا يمين ويسار فيزيائيان داخل المكونات.
• الأيقونات الدالة على الاتجاه تنعكس، والشعارات والوسائط لا تنعكس.
• لكل نظام كتابة خطه وارتفاع سطره، ولا تباعد بين الحروف العربية.
• حقول البريد والروابط والهاتف من اليسار إلى اليمين، والرسائل باللغتين.
• التواريخ والأرقام والعملات منسقة بحسب اللغة.
• الكلمات المفتاحية والعناوين والأوصاف مبحوثة ومكتوبة لكل لغة.
• قارئ من أهل اللغة يختبر النسختين قبل الإطلاق.

تخطط لموقع ثنائي اللغة؟ صِف مشروعك ثنائي اللغة.

التطبيق في Next.js

لمطوّرك. في App Router الخاص بـ Next.js يُدار توجيه اللغات عادةً بمقطع مسار [locale] ومكتبة مثل next-intl توفر روابط تراعي اللغة وملفات رسائل لكل لغة.

وتبقى القواعد السابقة كما هي: lang وdir على عنصر html لكل لغة، وروابط hreflang البديلة في البيانات الوصفية أو خريطة الموقع، والخصائص المنطقية في كل مكوّن، وملفات رسائل مكتوبة لكل لغة على حدة.

الموقع ثنائي اللغة: أسئلة شائعة

مجلد فرعي أم نطاق فرعي للنسخة العربية؟

كلاهما يعمل. والمجلد الفرعي مثل /ar أبسط إدارةً عادةً لأنه يُبقي اسم نطاق واحداً ونشراً واحداً. ولا تختر نطاقاً فرعياً أو نطاق دولة إلا لسبب واضح، كفريق منفصل أو نشاط خاص بدولة بعينها.

هل أحتاج إلى hreflang إذا كان لدي لغتان فقط؟

نعم، فهو يساعد محركات البحث على عرض النسخة المناسبة للباحث المناسب. ومع لغتين يكون الإعداد بسيطاً: كل صفحة تذكر النسختين وx-default.

هل أستخدم الترجمة الآلية للموقع العربي؟

ربما كمسودة أولى. أما النص المنشور فينبغي أن يكتبه أو يحرره كاتب عربي، ببحث كلمات مفتاحية خاص به، وإلا بدا مترجماً وفاته ما يكتبه الباحثون العرب فعلاً.

هل يستخدم الموقع العربي الأرقام الهندية أم اللاتينية؟

كلاهما صحيح. اختر واحداً، وطبّقه باتساق في النصوص والتواريخ والأسعار والنماذج، واختبره مع جمهورك.

تخطيط موقع ثنائي اللغة أو إصلاحه

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