بناء المواقع العربية: تصميم يمين-يسار وتحسين محركات بحث ثنائي اللغة

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

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

حدد بنية الروابط أولاً

هذا القرار الذي يعتمد عليه كل ما عداه، وهو الأكثر اتخاذاً بالصدفة.

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

استخدم روابط منفصلة وقابلة للزحف لكل لغة. وهناك بنيتان تعملان جيداً:

• المجلدات الفرعية — example.com/ar/page وexample.com/en/page. موصى بها لأغلب المنشآت. كل الثقل يتجمّع على نطاق واحد، والاستضافة بسيطة.
• النطاقات الفرعية — ar.example.com. قابلة للتطبيق، ومعقولة إذا كان الموقعان يديرهما فعلاً فريقان مختلفان بمحتوى مختلف.

أما نطاقات الدول فالتزام أثقل، ويكون منطقياً غالباً حين تستهدف أسواقاً محددة بكيانات نظامية منفصلة وعروض متمايزة.

ضبط وسم hreflang

يجب أن تعلن كل صفحة بدائلها بما فيها نفسها، ويجب أن تكون الإعلانات متبادلة — إذا أشارت الصفحة الإنجليزية إلى العربية فيجب أن تشير العربية إليها بالمقابل. والإعلانات أحادية الاتجاه تُتجاهَل.

وتفصيلان يخطئ فيهما الناس. أولاً، استخدم ar للعربية العامة وأضف رمز منطقة فقط حيث يختلف المحتوى فعلاً بحسب السوق — فالفصل بين ar-SA وar-AE لا يستحق إلا إذا اختلفت الصفحتان في الجوهر لا في عنوان في التذييل فقط. ثانياً، أعلن x-default للمستخدمين الذين لا تخدم لغتهم.

الاتجاه خاصية تخطيط لا خاصية نص

وضع dir="rtl" على عنصر html هو البداية لا الحل. وما يليه مجموعة قرارات عمّا ينبغي عكسه وما لا ينبغي.

اعكس: ترتيب القراءة، وترتيب التنقّل، ومحاذاة النص، وعلامات القوائم، وترتيب أعمدة الجداول، ومؤشرات التقدّم والخطوات، والأيقونات الاتجاهية كأسهم الرجوع والتقدّم.

لا تعكس: الأرقام، وواجهات الساعات، وأزرار تشغيل الوسائط، وأي أيقونة تمثل جسماً مادياً اتجاهه ثابت. زر التشغيل يشير للاتجاه نفسه في كل لغة.

و CSS الحديث يجعل معظم ذلك شبه مجاني، ويستحق اعتماده افتراضياً بدل صيانة ملف أنماط منفصل للاتجاه. استخدم الخصائص المنطقية — margin-inline-start بدل margin-left، وpadding-inline-end بدل padding-right، وinset-inline-start بدل left، وtext-align: start بدل left. وبهذه الكتابة يخدم ملف الأنماط نفسه كلا الاتجاهين بشكل صحيح، وترث المكوّنات الجديدة السلوك دون أن يتذكّر أحد التفكير فيه.

النص ثنائي الاتجاه

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

اعزل المقاطع بالأبجدية الأجنبية بدل تركها للخوارزمية. غلّفها بعنصر يحمل dir="ltr"، أو استخدم unicode-bidi: isolate. وهذا أهم ما يكون في المواضع التي تكون فيها الأخطاء مكلفة تحديداً: مراجع الطلبات، وأرقام الفواتير، والآيبان، وأرقام الهواتف.

الطباعة العربية تستحق قراراتها الخاصة

العربية ليست نصاً لاتينياً برموز مختلفة. هي متصلة، وتتغير أشكال حروفها بحسب موضعها، ولا تملك حروفاً كبيرة — ما يزيل أداة إشارية تعتمد عليها الطباعة اللاتينية بشدة.

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

ترجم المقصد لا الجمل

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

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

وتبعات ذلك عملياً:

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

نقاط تقنية يسهل إغفالها

• سمات اللغة على العنصر، لكل صفحة. lang وdir مضبوطتان بشكل صحيح وثابت في HTML المُقدَّم، لا مطبَّقتان بجافاسكربت بعد التحميل.
• خريطة موقع تعلن البدائل. ضمّن تعليقات hreflang في خريطة موقع XML إلى جانب الوسوم داخل الصفحة.
• البيانات المهيكلة بلغة الصفحة نفسها، مع ضبط inLanguage. لا تُخرِج بيانات مهيكلة إنجليزية على صفحة عربية.
• وسوم المشاركة المحلّية، بما فيها og:locale وبدائلها، ليظهر معاينة الروابط المشاركة بشكل صحيح.
• تحميل الخطوط. خطوط الويب العربية أكبر حجماً من اللاتينية غالباً. جزّئها، واستخدم font-display: swap ليكون النص مقروءاً أثناء تحميلها.
• النماذج وحقول الإدخال. أرقام الهواتف والآيبان وعناوين البريد ينبغي أن تكون حقولاً من اليسار لليمين حتى في صفحة عربية. ورسائل التلميح والتحقق تحتاج ترجمة أيضاً — وهذه هي النصوص المنسية دائماً.
• لا تحوّل تلقائياً بحسب لغة المتصفح. اكتشف واعرض، ودع المستخدم يختار واحفظ اختياره. فالتحويل القسري يمنع الزواحف من رؤية النسختين ويضايق المستخدمين ثنائيي اللغة، وهم أغلب جمهورك في الخليج.

الاختبار المهم

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