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

روابط مستقلة وhreflang: أساس الموقع ثنائي اللغة

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

البنية مثال التقييم
مجلدات فرعية example.com/ للعربية وexample.com/en/ للإنجليزية الخيار الأفضل غالبًا: نطاق واحد وقوة مشتركة واستضافة بسيطة
نطاقات فرعية ar.example.com وen.example.com ممكن، لكنه يحتاج إعدادًا ومتابعة أكثر
نطاقات منفصلة example.sa وexample.com فقط لأعمال أو أسواق منفصلة فعلًا
رابط واحد مع زر تبديل example.com?lang=en أو ملف ارتباط تجنّبه: قد لا يرى محرك البحث إلا لغة واحدة

وموقعنا pixelsaa.com نفسه يستخدم نموذج المجلدات: الصفحات العربية في الجذر والإنجليزية تحت /en. وأيًّا كان اختيارك، طبّق القواعد نفسها في كل الصفحات:

  • كل صفحة تعلن لغتها واتجاهها في HTML، مثل lang="ar" dir="rtl" أو lang="en" dir="ltr".
  • كل صفحة تذكر نسختها البديلة عبر hreflang، وتذكر نفسها أيضًا، والنسخة البديلة تشير إليها بالمقابل، مع x-default للنسخة الافتراضية.
  • زر تبديل اللغة يفتح الصفحة المقابلة نفسها، لا الصفحة الرئيسية للغة الأخرى.
  • لكل نسخة عنوانها ووصفها ورابطها الأساسي canonical الذي يشير إليها هي.

تصميم موقع باللغتين: قلب الاتجاه من اليمين إلى اليسار

الاتجاه من اليمين لليسار ليس مجرد محاذاة النص لليمين، بل انقلاب ترتيب القراءة كله: القائمة تبدأ من اليمين، والشعار ينتقل غالبًا إلى اليمين، ومسار التنقل يسير من اليمين، وسهم "التالي" يشير إلى اليسار.

ما الذي يُقلب وما الذي يبقى؟

يُقلب: ترتيب القوائم، والأعمدة الجانبية، ومواضع عناوين الحقول، ومسار التنقل، وأرقام الصفحات، والشرائح المتحركة ومؤشرات التقدم، والأيقونات ذات الاتجاه مثل الأسهم.

ولا يُقلب: الشعارات، والصور، وزر تشغيل الفيديو، وأرقام الهواتف، ورموز المنتجات، والنصوص الإنجليزية أو البرمجية المضمنة. وأيقونة الساعة أو علامة الصح لا اتجاه لهما فتبقيان كما هما.

البناء بخصائص CSS المنطقية

على المطوّر استخدام الخصائص المنطقية، مثل margin-inline-start بدل margin-left، وtext-align: start بدل left، حتى يخدم ملف تنسيق واحد الاتجاهين. فالقيم الثابتة لليمين واليسار هي السبب الأول في تعطل النسخة العربية بعد كل تحديث للتصميم.

النص المختلط

الجملة العربية تحتوي كثيرًا على أسماء علامات إنجليزية وأرقام طرازات وأسعار. اختبر جملًا مثل "iPhone 16 Pro متوفر الآن بسعر 4,999 ريال" لتتأكد أن علامات الترقيم والأرقام لا تقفز إلى الطرف الخطأ من السطر.

موقع عربي احترافي يبدأ من الخط

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

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

الأرقام والتواريخ والعملات والنماذج

الأرقام والتواريخ

قرر هل تعرض النسخة العربية الأرقام الغربية (123) أم الأرقام العربية المشرقية (١٢٣)، ثم التزم بقرارك في كل الصفحات. ويجب أن تقبل النماذج النوعين وتوحدهما، لأن المستخدم يكتب بما تعطيه لوحة المفاتيح. وفي التواريخ، فكّر هل يحتاج جمهورك إلى التاريخ الهجري بجانب الميلادي، كما في العقود أو تأكيد المواعيد للعملاء في السعودية.

العملات

اكتب العملة كما يتوقعها كل جمهور: "1,250 ريال" في العربية و"SAR 1,250" في الإنجليزية. وإن كنت تبيع في دول الخليج كلها، فتذكّر أن الدينار الكويتي والدينار البحريني والريال العماني تستخدم ثلاث خانات عشرية، فيجب أن تدعمها حقول الأسعار وقواعد التقريب.

النماذج والتحقق

  • حقل الجوال يقبل رموز +966 و+971 و+965 وغيرها، مع الصفر في البداية أو بدونه.
  • رسائل الخطأ موجودة باللغتين وتظهر في الجهة الصحيحة من الحقل.
  • حقول الاسم تقبل الحروف العربية والأسماء الطويلة المركبة.
  • حقلا البريد والرابط يبقيان من اليسار لليمين حتى داخل النموذج العربي.

ترجمة أم كتابة أصلية؟ كلمات البحث تختلف بين اللغتين

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

ابحث عن الكلمات المفتاحية لكل لغة على حدة؛ فقد يكتب المشتري العربي "تصميم موقع شركة"، بينما يكتب المشتري الناطق بالإنجليزية في الإمارات "web design company Dubai"، ولكل عبارة عنوانها وعناوينها الفرعية. ويغطي دليلنا عن تحسين محركات البحث في السعودية ومقال كيف تجهّز موقع شركتك للبحث بالذكاء الاصطناعي وSEO؟ جانب البحث بالتفصيل.

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

إدارة المحتوى بلغتين في لوحة التحكم

الموقع ثنائي اللغة يبقى كذلك فقط إذا صُمم النشر له من البداية:

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

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

مثال يبدأ بالعربية: ورقة

صممنا محرر PDF ورقة بالعربية أولًا، بواجهتين عربية وإنجليزية تعملان على الويب وWindows وAndroid من قاعدة برمجية واحدة. وتصميم التجربة العربية من اليمين لليسار أولًا ثم تكييفها للإنجليزية أسهل بكثير من حشر العربية في واجهة افترضت اتجاه اليسار في كل مكان.

قائمة اختبار الموقع ثنائي اللغة

الفحص طريقة الاختبار الخلل الشائع
hreflang وcanonical افحص الشيفرة في 5 صفحات من كل لغة روابط مقابلة ناقصة أو canonical يشير للغة الأخرى
زر تبديل اللغة جرّبه في صفحات داخلية لا الرئيسية فقط ينقلك دائمًا إلى الصفحة الرئيسية
اتجاه التخطيط راجع كل قالب بالعربية على الجوال أسهم وشرائح وأيقونات باتجاه خاطئ
النص المختلط صفحات فيها أسماء علامات وأسعار وأرقام طرازات علامات ترقيم وأرقام في الطرف الخطأ
الخطوط اتصال جوال بطيء نص مختفٍ أو تخطيط يتحرك أثناء التحميل
النماذج أرسل بأرقام مشرقية ورموز جوال خليجية رفض إدخال صحيح أو أخطاء بلغة واحدة فقط
البيانات الوصفية معاينة نتيجة البحث لكل لغة عناوين إنجليزية في صفحات عربية
الرسائل وملفات PDF شغّل كل رسالة آلية باللغتين نص عربي معكوس أو مقطّع في البريد والملفات

الأسئلة الشائعة

هل أستخدم مجلدات فرعية أم نطاقات منفصلة للموقع ثنائي اللغة؟

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

هل تكفي الترجمة الآلية لإنشاء النسخة العربية من الموقع؟

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

هل يجب أن يكون المحتوى متطابقًا في اللغتين؟

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

هل تزيد تكلفة الموقع ثنائي اللغة كثيرًا؟

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

الخطوة التالية

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