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

محركات البحث و الصفحات المترجمة
كيف يعرف جوجل لغتك؟
كيف تُعلم جوجل بأن موقعك متعدد اللغات؟
مثال حول تصميم صفحة متعددة اللغات

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

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

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

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

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

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

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

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

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

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

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

<head>
    <!-- "canonical" رابط الصفحة المفتوحة حالياً نحدد أن نوعها -->
    <link rel="canonical" hreflang="language-iso-code" /> 
    
    <!-- للإشارة إلى أنها صفحات بديلة "alternate" روابط الصفحات المترجمة عن الصفحة الأساسية نحدد أن نوعها -->
    <link rel="alternate" hreflang="language-code" href="url" /> 
    <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 Harmash" أو "à propos de Harmash" فيجب أن تكون الصفحات الثلاثة تتضمن روابط الصفحات المترجمة كالتالي.

مثال

الصفحة العربية يجب أن تشير للصفحات الأخرى المترجمة كالتالي.

<!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>

الصفحة الإنجليزية يجب أن تشير للصفحات الأخرى المترجمة كالتالي.

<!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 Harmash</h2>
    </head>
    <body>
        <!-- هنا نكتب محتوى الصفحة الإنجليزية بشكل عادي جداً -->
    </body>
</html>

الصفحة الفرنسية يجب أن تشير للصفحات الأخرى المترجمة كالتالي.

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

الدرس التالي❯

❮الدرس السابق

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

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

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

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

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

مثال

هدف الموقع

روابط مهمة

حقوق النشر

الدورات

أدوات مساعدة

أقسام الموقع

إبحث