تقنية13 سبتمبر 20265 دقائق قراءة

موقع عربي وإنجليزي تقنياً: هيكلة الروابط و hreflang وتبديل الاتجاه بدون أخطاء

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

🌐

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

القرار الأول: شكل الروابط

  • مجلد فرعي: example.com/ar و example.com/en — الخيار الأشيع والأسهل في الإدارة، والنسختان تستفيدان من قوة نفس الدومين.
  • نطاق فرعي: ar.example.com — يعامله جوجل كموقع شبه منفصل، ويحتاج بناء قوة لكل واحد.
  • دومين مختلف لكل دولة: example.sa و example.com — منطقي لو كان لكل سوق نشاط ومحتوى مختلف فعلاً.
  • تجنّب: لغة تُحدَّد بالكوكيز أو بخيار مخفي والرابط نفسه ما يتغير. جوجل ما يقدر يفهرس النسختين بشكل مستقل.

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

hreflang: الوسم اللي يربط النسخ ببعض

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

  • لازم يكون متبادلاً: الصفحة العربية تشير للإنجليزية، والإنجليزية تشير للعربية، وكل صفحة تشير لنفسها أيضاً.
  • أكواد صحيحة: ar و en، أو مع الدولة مثل ar-SA. كتابة ar-KSA خطأ شائع.
  • أضف x-default للنسخة اللي تُعرض لو ما تطابقت لغة الزائر مع أي نسخة.
  • كل صفحة لها وسم canonical يشير لنفسها، مو للنسخة العربية الأم.
  • خريطة الموقع (sitemap) تشمل النسختين.

الاتجاه: RTL و LTR من جذر الصفحة

وسم html نفسه يحمل lang و dir: العربي lang=ar و dir=rtl، والإنجليزي lang=en و dir=ltr. وفي CSS استخدم الخصائص المنطقية مثل margin-inline-start و padding-inline-end بدل left و right، فينقلب التصميم تلقائياً بدون ملف CSS منفصل لكل لغة. وإطارات مثل Next.js تدعم التوجيه حسب اللغة، وتقدر تستخدم مكتبات مثل next-intl لإدارة النصوص.

تفاصيل تفرق بين موقع محترف وموقع مترجم

  • خطوط منفصلة ومتناسقة لكل لغة، مع ارتفاع سطر أكبر للعربي.
  • روابط مترجمة أو وصفية لكل لغة بدل روابط عربية طويلة مشفّرة داخل النسخة الإنجليزية.
  • عنوان ووصف وصور مشاركة (Open Graph) لكل لغة.
  • زر تبديل اللغة يوديك لنفس الصفحة في اللغة الثانية، مو للصفحة الرئيسية.
  • الأيقونات الاتجاهية تنعكس، والشعار والأرقام في الحقول ما تنعكس.
  • النماذج ورسائل الخطأ والبريد التلقائي مترجمة كلها، مو الواجهة فقط.

المحتوى: ترجمة أو كتابة مستقلة؟

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

قائمة فحص قبل إطلاق النسخة الثانية

  • افحص عينة من الصفحات بأداة فحص الروابط في Google Search Console، وتأكد إن جوجل يشوف hreflang و canonical صحيحة.
  • ارفع خريطة الموقع المحدثة للنسختين.
  • جرّب زر تبديل اللغة من كل قالب صفحة: رئيسية، خدمة، مقالة، نموذج.
  • تأكد إن الصفحات اللي ما لها ترجمة بعد ما تشير لنسخة غير موجودة.
  • راجع العناوين والأوصاف في نتائج البحث للنسختين، وليس فقط داخل الموقع.
  • افحص البريد التلقائي والفواتير ورسائل التأكيد بكل لغة.
  • راقب أخطاء 404 والزيارات لكل لغة في الأسابيع الأولى بعد الإطلاق.

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

جاهز تبدأ مشروعك مع أزهل؟

تواصل معنا الحين، وخلنا نطلّع فكرتك على أرض الواقع.