مدونة جوارا: الصفحات المترجمة في HTML

أهلاً يا شباب! اليوم بنتكلم عن موضوع مهم جداً لأي موقع بيستهدف جمهور عالمي: الصفحات المترجمة في HTML.

ليه أصلاً نحتاج صفحات مترجمة؟

ببساطة، عشان توصل لعدد أكبر من الناس. تخيل موقعك متاح بس بلغة وحدة، كم بتخسر من الزوار؟ لما تترجم موقعك، بتفتح أبواب جديدة لناس من ثقافات ولغات مختلفة.

أولاً: تحديد لغة الصفحة بالـ `lang` attribute

هذي أهم خطوة. لازم تقول للمتصفح ولأدوات البحث وش لغة صفحتك. تحطها في وسم :

<html lang="ar">
    <!-- محتوى الصفحة بالعربي -->
</html>

أو لو كانت إنجليزي:

<html lang="en">
    <!-- Page content in English -->
</html>

الملاحظة: ar للغة العربية، وen للإنجليزية. فيه أكواد كثيرة للغات تقدر تبحث عنها. هذا بيساعد محركات البحث تعرض صفحتك للناس اللي لغتهم الأصلية هي هذي اللغة.

ثانياً: اتجاه النص بالـ `dir` attribute

هذي مهمة جداً للغات اللي تكتب من اليمين لليسار (RTL) زي العربية والعبرية. لو ما حطيتها، المتصفح بيحاول يخمن وممكن الدنيا تتلخبط معاك.

<html lang="ar" dir="rtl">
    <!-- محتوى عربي من اليمين لليسار -->
</html>

وللغات من اليسار لليمين (LTR) زي الإنجليزية، تقدر تحطها dir="ltr" بس غالباً ما تحتاجها لأنها هي الافتراضية.

ثالثاً: ترميز الأحرف (Character Set)

تأكد دائماً إنك تستخدم UTF-8. هذي أهم خطوة عشان تتجنب مشاكل ظهور الأحرف الغريبة (مثل علامات الاستفهام أو المربعات) خصوصاً مع اللغات اللي فيها أحرف خاصة. حطها في وسم :

<head>
    <meta charset="UTF-8">
    <!-- ... باقي الهيد ... -->
</head>

رابعاً: ربط الصفحات المترجمة ببعضها (hreflang)

كيف تقول لمحركات البحث إن هذي الصفحة لها نسخ بلغات ثانية؟ تستخدم hreflang في وسم داخل .

لو عندك صفحة إنجليزية وصفحة عربية لنفس المحتوى:

في الصفحة الإنجليزية (مثلاً example.com/en/page.html):

<head>
    <link rel="alternate" hreflang="ar" href="http://example.com/ar/page.html" />
    <link rel="alternate" hreflang="en" href="http://example.com/en/page.html" />
    <link rel="alternate" hreflang="x-default" href="http://example.com/en/page.html" />
</head>

وفي الصفحة العربية (مثلاً example.com/ar/page.html):

<head>
    <link rel="alternate" hreflang="en" href="http://example.com/en/page.html" />
    <link rel="alternate" hreflang="ar" href="http://example.com/ar/page.html" />
    <link rel="alternate" hreflang="x-default" href="http://example.com/en/page.html" />
</head>

الملاحظة: x-default تستخدم لتحديد الصفحة الافتراضية إذا ما فيه لغة مطابقة للزائر.

خامساً: التعامل مع الـ CSS للغات الـ RTL

الـ CSS تحتاج اهتمام خاص مع لغات الـ RTL. أي شيء يعتمد على left أو right لازم ينعكس. مثلاً، لو عندك قائمة على اليسار في الـ LTR، لازم تكون على اليمين في الـ RTL.

أفضل طريقة هي استخدام خصائص CSS منطقية زي margin-inline-start و margin-inline-end بدلاً من margin-left و margin-right. المتصفح بيتعامل معاها تلقائياً بناءً على dir.

أو ممكن تستخدم ملفات CSS منفصلة لكل اتجاه، أو تستخدم [dir="rtl"] في الـ CSS عشان تطبق ستايلات خاصة:

/* LTR */
.sidebar {
    float: left;
    margin-right: 20px;
}

/* RTL override */
[dir="rtl"] .sidebar {
    float: right;
    margin-left: 20px;
    margin-right: 0; /* reset LTR margin */
}

سادساً: التحويل بين اللغات (Language Switcher)

لازم توفر طريقة للزوار يغيرون اللغة يدويًا. عادةً يكون زر أو قائمة منسدلة في الهيدر أو الفوتر. كل زر يوديك على النسخة المترجمة من نفس الصفحة.

<nav>
    <ul>
        <li><a href="/en/page.html">English</a></li>
        <li><a href="/ar/page.html">العربية</a></li>
    </ul>
</nav>

خلاصة

تجهيز موقعك للصفحات المترجمة مو صعب، بس يحتاج تخطيط واهتمام بالتفاصيل. ركز على lang، dir، charset، وhreflang، وبتكون في الطريق الصحيح. بالتوفيق!

← السابق الفهرس

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