Sole Digital Media
ناقش مشروعك
ناقش مشروعك

تونس وكندا. نعمل مع عملاء حول العالم.

  1. الرئيسية
  2. مقالات
  3. تطوير المواقع

تطوير المواقع

بناء موقع واحد بالعربية والفرنسية والإنجليزية دون الإضرار بترتيبك في البحث

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

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

القرار الأول: بنية الروابط

هناك ثلاثة أنماط صالحة، ونمط شائع غير صالح.

  • المجلّدات الفرعية — example.com/ar/, example.com/fr/. كل السلطة تعود إلى نطاق واحد. الأبسط إدارةً. وهو الجواب الصحيح للغالبية العظمى من الشركات.
  • النطاقات الفرعية — ar.example.com. فصل أوضح إن كان المحتوى يختلف فعلاً بحسب السوق، مقابل التعامل مع كلٍّ منها كملكية شبه مستقلّة.
  • النطاقات الوطنية — example.tn, example.ca. أقوى إشارة محلّية، وأعلى كلفة، وتصبح مسؤولاً عن عدّة مواقع. يستحقّ ذلك حين يختلف العرض والتسعير والكيان القانوني فعلاً بحسب البلد.
  • معاملات الرابط — example.com?lang=ar. تجنّبها. تتعامل معها الزواحف بشكل سيّئ ولا يستطيع المستخدمون مشاركة رابط بثقة.

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

القرار الثاني: hreflang، بالطريقة الصحيحة

وسم hreflang يخبر محرك البحث بأي نسخة من الصفحة يعرضها لأي مستخدم. يفشل أكثر ممّا ينجح، لأسباب آلية بحتة.

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

واضبط الرموز أيضاً. العربية للخليج هي ar-AE؛ والعربية لتونس هي ar-TN؛ و ar وحدها تغطّي الجميع. الفرنسية في كندا هي fr-CA وتختلف عن fr-FR في مفردات يلاحظها العملاء. لا تقسّم بحسب المنطقة إلا إذا اختلف المحتوى فعلاً؛ وإلا فرمز لغة واحد أنظف وأصعب كسراً.

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

القرار الثالث: الكتابة من اليمين إلى اليسار ليست مجرّد قلب لملف التنسيق

العربية تعكس اتجاه القراءة، ومعه المنطق البصري للصفحة. تتولّى CSS الحديثة معظم ذلك إن بُني الموقع بخصائص منطقية من البداية: margin-inline-start بدلاً من margin-left, padding-inline بدلاً من اليسار واليمين. اضبط dir="rtl" على عنصر html فينعكس التخطيط المبنيّ جيداً من تلقاء نفسه في معظمه.

ما لا ينعكس من تلقاء نفسه:

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

الخطوط قرار أداء لا قرار تصميم

خطوط الويب العربية كبيرة الحجم. تحميل عائلة عربية كاملة مع عائلة لاتينية في كل صفحة طريقة مباشرة لخسارة عمل الأداء في بقية المواضع. قدّم لكل لغة الخط الذي تحتاجه فقط، وقلّص مجموعات المحارف بقوّة، واستخدم font-display: swap ليكون النص مقروءاً قبل وصول الملف.

ترجم البيانات الوصفية، لا المتن وحده

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

وترجم الكلمات المفتاحية لا الكلمات. العبارة التي يكتبها المشتري التونسي ليست غالباً الترجمة الحرفية للعبارة الإنجليزية: أحياناً هي الكلمة الفرنسية، وأحياناً الإنجليزية مكتوبة بحروف عربية. هذا بحث كلمات مفتاحية في كل لغة، لا عمل لذاكرة ترجمة.

ما الذي نبنيه فعلاً

لمعظم الشركات في هذا الوضع: نطاق واحد، مجلّدات فرعية للغات، hreflang متبادل يتضمّن x-default، خصائص CSS منطقية من السطر الأول، خطوط مقلَّصة لكل لغة، وبيانات وصفية مترجمة كاملة. لا شيء غريب. مجموعة قرارات قليلة الكلفة إن اتُّخذت صحيحة من البداية ومكلفة إن أُصلحت لاحقاً.

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

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

تخطّط لموقع إلكتروني؟

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