قاعدة كود واحدة واتجاهان: العربية والإنجليزية بالشكل الصحيح
ابدأ من الرابط
امنح كل لغة مساراً خاصاً بها (/ و/ar). يحدد المسار اللغة وسمتي lang وdir والبيانات الوصفية. أما حفظ اللغة في كوكي أو التخزين المحلي فقط فيجعل الصفحات غير قابلة للربط وغير مرئية لمحركات البحث.
اكتب التخطيط مرة واحدة بمصطلحات منطقية
استخدم خصائص CSS المنطقية (margin-inline-start وtext-align: start وpadding-inline) بدل اليمين واليسار. فيعمل المكوّن نفسه في الاتجاهين. وقرر بوعي أي الأيقونات تنعكس: الأسهم وأزرار الرجوع تنعكس، أما الشعارات وعلامات الصح فلا.
تعامل بحذر مع النص المختلط
تحتوي الجمل العربية كثيراً على مصطلحات لاتينية مثل أسماء المنتجات أو الكود. والجملة التي تبدأ أو تنتهي بكلمة لاتينية، أو تحيط بها أقواس ونقطتان، قد يتغير ترتيبها بصرياً. أبقِ المصطلحات التقنية داخل الجملة، ولفّها بـ dir="ltr" عند الحاجة، واقرأ النتيجة على شاشة حقيقية بدل الاعتماد على الكود.
امنح محركات البحث صفحتين حقيقيتين
- رابط canonical لكل لغة، وبدائل
hreflangتشير كل منها إلى الأخرى. - عنوان ووصف وبيانات منظمة منفصلة لكل لغة، مكتوبة لتلك اللغة وليست مترجمة من قالب.
- اللغتان في خريطة الموقع، ومعروضتان مسبقاً كـ HTML ثابت ليرى المحتوى الزواحف التي لا تشغّل JavaScript.
أخطاء شائعة
- ترجمة النص مع إبقاء التخطيط من اليسار لليمين.
- عنوان صفحة واحد مشترك للغتين.
- الاختبار فقط في متصفح سطح المكتب بلوحة مفاتيح إنجليزية.
كيف نفعل ذلك
هذا الموقع مبني بهذه الطريقة: مسارات واعية باللغة، ومجموعة مكونات واحدة تُعرض في الاتجاهين، وبيانات وصفية وJSON-LD لكل لغة، وخطوة بناء تعرض كل مسار مسبقاً باللغتين. كان دعم اليمين لليسار شرطاً من أول شاشة وليس ترقيعاً لاحقاً.
هل أعجبك المقال؟ شاركه مع شبكتك.