موقع ثنائي اللغة عربي وإنجليزي: أخطاء الاتجاه الشائعة
روابط منفصلة لكل لغة، وتصميم معكوس، وخطوط عربية، وأرقام، وحقول هاتف، ونصوص عربية حقيقية: التفاصيل التي تحدد نجاح الموقع ثنائي اللغة.
ينجح الموقع الإلكتروني ثنائي اللغة بالعربية والإنجليزية عندما يكون لكل لغة رابط مستقل، وتُضبط الصفحات العربية من اليمين إلى اليسار في الشيفرة نفسها لا بقواعد CSS معدودة، وتُكتب النصوص العربية بالعربية بدلًا من ترجمتها سطرًا بسطر. وتُنجز معظم المواقع المتعثرة الترجمة ثم تُغفل ما حولها: أسهم تشير في الاتجاه الخاطئ، وأرقام هواتف مبعثرة، وخط عربي لا يُحمَّل، ومسافات أسطر ضيقة.
وبعض هذه الدروس مستفاد من موقعنا الذي يعمل بأربع لغات.
خصّص رابطًا مستقلًا لكل لغة
توصي جوجل باستخدام رابط مختلف لكل نسخة لغوية من الصفحة، بدلًا من ملفات تعريف الارتباط أو إعدادات المتصفح التي تبدّل اللغة على الرابط نفسه.
ومن الأنماط البسيطة إضافة بادئة للغة، مثل /ar/services للعربية و/services للإنجليزية. ثم:
- اربط كل نسخة لغوية بجميع النسخ الأخرى عبر hreflang، واجعل كل صفحة تذكر نفسها أيضًا. فإذا أشارت الصفحة أ إلى الصفحة ب ولم تُشر ب إليها، فقد تتجاهل جوجل هذه الوسوم.
- رموز اللغة وحدها مثل "ar" و"en" صحيحة، أما رمز الدولة وحده فغير صحيح.
- أضف x-default للزوار الذين لا تطابق لغتهم أيًّا من نسخك.
- لا تحوّل الزوار تلقائيًا إلى لغة أخرى؛ فجوجل تنصح بتجنب ذلك. اعرض أداة واضحة لتبديل اللغة بدلًا منه.
ومن المفاهيم الخاطئة الشائعة أن جوجل تستخدم hreflang أو سمة lang لاكتشاف لغة الصفحة، والصحيح أنها تقرأ المحتوى نفسه. فوسم hreflang يخبرها فقط بأن هذه الصفحات نسخ من بعضها، لذا يجب أن تكون الصفحة العربية بالعربية كاملة، وتحذّر جوجل من أن ترجمة القائمة والتذييل وحدهما تُنتج تجربة سيئة. وللصورة الأشمل، اقرأ كيف يظهر موقعك في جوجل وChatGPT وGemini وClaude.
اضبط الاتجاه في الشيفرة لا في CSS وحده
يجب أن تحمل كل صفحة عربية السمتين lang="ar" وdir="rtl" على عنصر html. وتنصح W3C بتحديد الاتجاه الأساسي في الشيفرة لا في CSS، ليبقى صحيحًا حتى إذا لم يُحمَّل ملف التنسيق.
ثم ابنِ التخطيط بالخصائص المنطقية، مثل margin-inline-start وtext-align: start، بدلًا من اليسار واليمين. عندئذٍ يخدم ملف تنسيق واحد الاتجاهين، وينعكس التخطيط تلقائيًا. أما قيم اليسار واليمين فتحتاج إلى قاعدة بديلة لكل اتجاه، وهذه القواعد تفقد تزامنها مع الوقت.
اعكس التخطيط، ولكن ليس كل شيء
يقلب العكس ترتيب القراءة، لكن ليس كل عنصر ينبغي أن ينقلب.
| العنصر | في الصفحة العربية |
|---|---|
| القائمة والأعمدة وترتيب البطاقات | تُعكس |
| أسهم «التالي» و«السابق» | تُعكس |
| شرائح العرض والمعارض ومؤشرات الخطوات | تُعكس |
| الشعارات والصور وصور المنتجات | تبقى كما هي |
| أرقام الهواتف وعناوين البريد الإلكتروني والشيفرة | تبقى من اليسار إلى اليمين |
الأسهم هي أكثر ما يُنسى. فالسهم المكتوب كحرف أو المحفوظ كصورة يشير في الاتجاه الخاطئ بالعربية ما لم يصلحه أحد في كل صفحة. وفي موقعنا، السهم عنصر واحد منسّق يعكسه ملف التنسيق في الاتجاه من اليمين إلى اليسار، فلا تحتاج أي صفحة إلى تذكّره. وفي أداة تبديل اللغة، اكتب اسم كل لغة بلغتها، مثل «العربية» و"English".
حمّل الخط العربي بالطريقة الصحيحة
كثير من خطوط الويب لا يتضمن حروفًا عربية، فيلجأ المتصفح إلى خط النظام، وهو يختلف بين ويندوز وماك وأندرويد وآيفون.
- اختر عائلة خطوط صُممت مع العربية، أو اقرن خطك اللاتيني بخط عربي قريب منه في الوزن والطابع.
- حمّل الخط العربي في الصفحات العربية فقط، حتى لا ينزّله زوار النسخة الإنجليزية.
- إذا استخدمت التحميل المسبق، فاجعل رابطه مطابقًا تمامًا لرابط قاعدة font-face، وإلا نزّل المتصفح الملف مرتين.
- امنح العربية ارتفاع سطر أكبر من الإنجليزية؛ فالحروف العربية تحمل نقاطًا وعلامات فوقها وتحتها، والمسافات المناسبة للإنجليزية تجعل الفقرات العربية مزدحمة.
- في الصفحات العربية، ضع خط النص العربي مكان الأنماط الزخرفية أو أحادية المسافة التي لا تدعم إلا الحروف اللاتينية.
وفي موقعنا، عنى ذلك خطًا عربيًا يُحمَّل في الصفحات العربية فقط، ومسافات أسطر أرحب للعربية، وخط النص بدلًا من الخط أحادي المسافة. كما تؤثر الخطوط في نتائج السرعة، لأن تبديل الخط متأخرًا يحرّك النص على الشاشة؛ اقرأ ماذا تعني نتيجة PageSpeed Insights فعلًا.
الأرقام والتواريخ وحقول الهاتف
- الأرقام. يمكن أن يستخدم النص العربي الأرقام الغربية (1، 2، 3) أو الأرقام العربية الهندية (١، ٢، ٣). اختر نوعًا واحدًا واستخدمه في كل مكان، من الصفحات إلى الفواتير ورسائل البريد الإلكتروني.
- التواريخ. اكتب الشهر باسمه بدلًا من صيغة ملتبسة مثل 05/06، ونسّق التواريخ بأدوات المتصفح المدمجة (Intl.DateTimeFormat) وفق اللغة والمنطقة الصحيحتين.
- النص المختلط. قد يدفع اسم منتج إنجليزي داخل جملة عربية علامات الترقيم إلى غير مكانها. ضع الأسماء والنصوص التي يُدخلها المستخدمون داخل عنصر bdi أو امنحها dir="auto"، كما تقترح W3C.
- حقول الهاتف والبريد الإلكتروني. اضبطها على dir="ltr"، حتى لا تظهر علامة + في الطرف الخاطئ من رقم مثل +20 100 000 0000.
- حقول النص الحر. استخدم dir="auto" ليُحاذى كل إدخال حسب أول حرف فيه، مع ملاحظة W3C أن ذلك مفيد لكنه ليس مضمونًا تمامًا.
- لوحات المفاتيح العربية. اقبل الأرقام العربية الهندية وحوّلها قبل التحقق، وإلا رُفض رقم هاتف صحيح.
- الرسائل. ترجم العناوين والنصوص التوضيحية ورسائل الخطأ ورسائل التأكيد. فرسالة خطأ إنجليزية تحت نموذج عربي خلل شائع.
اكتب بالعربية، ولا تترجم الإنجليزية
النص المترجم يُقرأ كنص مترجم. وللمواقع التجارية، تبقى العربية الفصحى المعاصرة الخيار الآمن، على أن يكتبها أو يراجعها على الأقل شخص يعرف السوق.
- اكتب العناوين الرئيسية ودعوات الإجراء بالعربية أولًا، ثم تأكد من أن النسختين تقولان الشيء نفسه.
- لا تبدأ عنوانًا عربيًا أو عنوان صفحة بكلمة لاتينية؛ فذلك يغيّر طريقة عرض السطر وقد يبدو مبعثرًا في نتائج البحث.
- قرّر مرة واحدة هل يُكتب اسم كل علامة تجارية بالحروف اللاتينية أم بالعربية، والتزم بذلك.
- اترك الأزرار والقوائم تتسع، لأن النص العربي لا يساوي الإنجليزي في الطول.
- ترجم عناوين الصفحات والأوصاف التعريفية والنص البديل للصور، فهي ما يراه الناس في نتائج البحث.
وقبل الإطلاق، اختبر كل صفحة عربية على هاتف حقيقي، لا في متصفح الكمبيوتر وحده.
ما الذي تقدمه KF Tech Solutions هنا
نصمم ونبرمج مواقع إلكترونية بالعربية والإنجليزية، مع تخطيط من اليمين إلى اليسار نخطط له منذ التصميم الأول، وصفحات منفصلة لكل لغة لتظهر النسختان في البحث، ولوحة تحكم تعدّل منها المحتوى بنفسك. ويعمل موقعنا بالإنجليزية والعربية والألمانية والفرنسية. تعرّف على خدمة تصميم وبرمجة المواقع، ولتقدير الميزانية اقرأ ما التكلفة الفعلية لموقع شركة في مصر.
أسئلة شائعة
هل يجب أن تكون النسختان العربية والإنجليزية على روابط منفصلة؟
نعم. توصي جوجل برابط مختلف لكل نسخة لغوية، مع ربط النسخ عبر hreflang، بدلًا من تبديل اللغة بملفات تعريف الارتباط أو إعدادات المتصفح.
هل يخبر hreflang جوجل بأن صفحتي باللغة العربية؟
لا. تكتشف جوجل اللغة من المحتوى. أما hreflang فيخبرها بأن هذه الصفحات نسخ من بعضها، لتعرض لكل باحث النسخة المناسبة.
هل يتحول الموقع تلقائيًا إلى العربية لزوار الدول العربية؟
لا ينبغي ذلك. تنصح جوجل بتجنب التحويل التلقائي بين النسخ اللغوية. اعرض أداة واضحة لتبديل اللغة، واترك كل زائر على النسخة التي يختارها.
هل يكفي عكس التصميم الإنجليزي باستخدام CSS؟
العكس مجرد بداية. ما زلت تحتاج إلى الاتجاه في الشيفرة، وأسهم معكوسة، وصور غير معكوسة، وخط عربي، ومسافات أسطر مناسبة للعربية، ونماذج تتعامل مع أرقام الهواتف بشكل صحيح.
الأرقام الغربية أم العربية الهندية؟
كلاهما يصلح. المهم أن تستخدم نوعًا واحدًا باتساق في الموقع والأسعار والفواتير والرسائل.
هل تخطط لموقع ثنائي اللغة؟ احجز مكالمة مجانية أو تواصل معنا، وسنوضح لك ما تحتاجه النسخة العربية.
المصادر
اقرأ المزيد
النشرة البريدية
ملاحظات من حين لآخر عن البرمجيات والأتمتة وإدارة أعمال أفضل. دون رسائل مزعجة.