HTML الصفحات المترجمة
محركات البحث و الصفحات المترجمة
في بعض المواقع العالمية التي يكون محتواها مترجم لعدة لغات تجد في أغلب الأوقات أنه عند البحث في جوجل أنه يظهر لك الصفحات المترجمة باللغة التي تعرفها أنت!
هذا الأمر ليس سحراً و لا يعني أن الموقع يتجسس عليك حتى يعرف لغتك كما يعتقد البعض للأسف.
كمثال عملي, في حال كنت تعيش في بلد عربي و بحثت في جوجل عن كلمة "فيسبوك" أو "Facebook" فإنه سيظهر لك روابط فيسبوك المترجمة للعربية أولاً كالتالي.
كيف يعرف جوجل لغتك؟
حين تحاول الدخول لأي موقع إلكتروني يقوم حاسوبك بشكل تلقائي بتزويد الموقع ببعض المعلومات الضرورية التي يحتاجها لإرسال المعلومات التي طلبها منه, و من أهم هذه المعلومات هو عنوان الآيبي ( IP Address ) الخاص بك لأنه من خلاله يمكن معرفة موقعك الجغرافي و هذا يعني معرفة البلد الذي تعيش فيه و اللغة تتكلمها أيضاً.
بالنسبة لمحرك بحث جوجل فإنه يحاول إعطائك النتائج باللغة التي قمت مسبقاً بتحديد أنك تفضلها و إن لم تفعل ذلك مسبقاً فإنه يعرض لك النتائج التي تناسب اللغة التي يستخدمها الأشخاص الموجودين في نفس موقعك الجغرافي.
كيف تُعلم جوجل بأن موقعك متعدد اللغات؟
في حال كان لديك صفحة و هذه الصفحة مترجمة لعدة لغات يمكنك إعلام جوجل بذلك من خلال ذكر روابط كل الصفحات المترجمة في كل صفحة يوجد منها نسخ مترجمة.
روابط الصفحات المترجمة يجب وضعها بداخل القسم <head> </head> بواسطة الوسم <link> كالتالي.
<head> <!-- "canoncial" رابط الصفحة المفتوحة حالياً نحدد أن نوعها --> <link rel="canoncial" hreflang="language-iso-code" /> <!-- للإشارة إلى أنها صفحات بديلة "alternate" روابط الصفحات المترجمة عن الصفحة الأساسية نحدد أن نوعها --> <link rel="alternate" hreflang="language-code" href="url" /> <link rel="alternate" hreflang="language-code" href="url" /> ... <head>
- القيمة
"canoncial"نضعها لإعلام محرك البحث بلغة الصفحة المفتوحة حالياً. - القيمة
"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="canoncial" 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="canoncial" 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="canoncial" 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>
