HTML / الصفحات المترجمة

الناشر :كودا فوكس -

HTML / الصفحات المترجمة

محركات البحث والصفحات المترجمة

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

هذا الأمر ليس سحرًا ولا يعني أن الموقع يتجسس عليك حتى يعرف لغتك كما يعتقد البعض، بل هو تقني بحت!

HTML / الصفحات المترجمة


كمثال عملي، في حال كنت تعيش في بلد عربي وبحثت في جوجل عن كلمة "فيسبوك" أو "Facebook"، فإنه سيظهر لك روابط فيسبوك المترجمة للعربية أولاً.

كيف يعرف جوجل لغتك؟

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

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

كيف تُعلم جوجل بأن موقعك متعدد اللغات؟

في حال كان لديك صفحة وهذه الصفحة مترجمة لعدة لغات، يمكنك إعلام جوجل بذلك من خلال ذكر روابط كل الصفحات المترجمة في كل صفحة. روابط الصفحات المترجمة يجب وضعها بداخل القسم <head> بواسطة الوسم <link> كما يلي:

<head>
    <!-- "canonical" رابط الصفحة المفتوحة حالياً نحدد أن نوعها -->
    <link rel="canonical" hreflang="language-iso-code" /> 
    
    <!-- للإشارة إلى أنها صفحات بديلة "alternate" روابط الصفحات المترجمة عن الصفحة الأساسية نحدد أن نوعها -->
    <link rel="alternate" hreflang="language-code" href="url" /> 
    ...
<head>

القيمة canonical نضعها لإعلام محرك البحث بلغة الصفحة المفتوحة حاليًا.

القيمة alternate نضعها لإعلام محرك البحث أن هذه الصفحة يجب عرضها في حال كانت متوفرة وتناسب لغة المستخدم.

مكان الكلمة language-code يجب تمرير إحدى الرموز المخصصة لتحديد لغة الصفحة سواء للصفحة الحالية أو البديلة.

مكان الكلمة url يجب تمرير رابط الصفحة التي تحتوي على نفس المحتوى الأصلي المترجم للغة تناسب لغة المستخدم.

هذا الأسلوب في توجيه المستخدم يعتمده محرك بحث جوجل، لكن ليس بالضرورة أن تعتمده محركات البحث الأخرى. كمثال بسيط، محرك بحث Bing لا يعطي أهمية للوسوم التي تستخدم لتوجيه المستخدم.

مثال حول تصميم صفحة متعددة اللغات

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

  • ar-about.html هي الصفحة العربية.
  • en-about.html هي الصفحة الإنجليزية.
  • fr-about.html هي الصفحة الفرنسية.

الآن لجعل جوجل يعرض للمستخدم الصفحة التي تتوافق مع لغته حين يبحث فيها على سبيل المثال عن "حول  كودا فوكس" أو "About CodaFox" أو "À propos de CodaFox"، فيجب أن تكون الصفحات الثلاثة تتضمن روابط الصفحات المترجمة كالتالي:

المثال الأول: الصفحة العربية

خد الكواد نسخ واضغط هنا جرب الكود
📋 

<!DOCTYPE html>
<html dir="rtl" lang="ar">
    <head>
        <!-- هنا قمنا بإعلام جوجل بأن الصفحة الحالية لغتها العربية -->
        <link rel="canonical" hreflang="ar" /> 
        <!-- و يوجد منها نسخة مترجمة للإنجليزية مع تحديد مسار وجودها -->
        <link rel="alternate" hreflang="en" href="./en-about.html" /> 
        <!-- و يوجد منها نسخة مترجمة للفرنسية مع تحديد مسار وجودها -->
        <link rel="alternate" hreflang="fr" href="./fr-about.html" /> 
        
        <!-- عنوان الصفحة العربية -->
        <title>حول كودا فوكس</h2>
    </head>
    <body>
        <!-- هنا نكتب محتوى الصفحة العربية بشكل عادي جداً -->
    </body>
</html>

شرح المثال الأول:

في هذا المثال، نستخدم الوسم <html> مع الخصائص التالية:

  • dir="rtl": تحدد اتجاه النص من اليمين إلى اليسار، وهو الاتجاه المناسب للغات مثل العربية.
  • lang="ar": تشير إلى أن اللغة المستخدمة هي العربية.

في قسم <head>، يتم استخدام الوسوم التالية:

  • <link rel="canonical" href="./ar-about.html" />: تحدد أن الصفحة الحالية هي النسخة العربية.
  • <link rel="alternate" hreflang="en" href="./en-about.html" />: تشير إلى النسخة الإنجليزية من الصفحة.
  • <link rel="alternate" hreflang="fr" href="./fr-about.html" />: تشير إلى النسخة الفرنسية من الصفحة.

وفي قسم <body>، يتم كتابة المحتوى باللغة العربية. هذا المحتوى يُظهر الترحيب بالمستخدمين.

المثال الثاني: الصفحة الإنجليزية

📋 

<!DOCTYPE html>
<html dir="ltr" lang="en">
    <head>
        <!-- هنا قمنا بإعلام جوجل بأن الصفحة الحالية لغتها الإنجليزية -->
        <link rel="canonical" hreflang="en" /> 
        <!-- و يوجد منها نسخة مترجمة للعربية مع تحديد مسار وجودها -->
        <link rel="alternate" hreflang="ar" href="./ar-about.html" /> 
        <!-- و يوجد منها نسخة مترجمة للفرنسية مع تحديد مسار وجودها -->
        <link rel="alternate" hreflang="fr" href="./fr-about.html" /> 

        <!-- عنوان الصفحة الإنجليزية -->
        <title>About CodaFox</h2>
    </head>
    <body>
        <!-- هنا نكتب محتوى الصفحة الإنجليزية بشكل عادي جداً -->
    </body>
</html>

شرح المثال الثاني:

في هذا المثال، نستخدم الوسم <html> مع الخصائص التالية:

  • dir="ltr": تحدد اتجاه النص من اليسار إلى اليمين، وهو الاتجاه المناسب للغات مثل الإنجليزية.
  • lang="en": تشير إلى أن اللغة المستخدمة هي الإنجليزية.

في قسم <head>، يتم استخدام الوسوم التالية:

  • <link rel="canonical" href="./en-about.html" />: تحدد أن الصفحة الحالية هي النسخة الإنجليزية.
  • <link rel="alternate" hreflang="ar" href="./ar-about.html" />: تشير إلى النسخة العربية من الصفحة.
  • <link rel="alternate" hreflang="fr" href="./fr-about.html" />: تشير إلى النسخة الفرنسية من الصفحة.

وفي قسم <body>، يتم كتابة المحتوى باللغة الإنجليزية. هذا المحتوى يُظهر الترحيب بالمستخدمين.

التسميات

إرسال تعليق

أحدث أقدم

نموذج الاتصال