العنصر head ووسوم meta في HTML: العنوان والوصف وviewport وOpen Graph واتجاه الصفحات العربية

الأساسيات

يجب أن يكون <meta charset="utf-8"> أول شيء في head، ضمن أول 1024 بايت من الملف، ليقرأ المتصفح كل حرف بشكل صحيح بما فيه العربي. ويطلب وسم viewport من الهواتف استخدام عرض الشاشة الحقيقي بدلاً من التظاهر بأنها حاسوب مكتبي بعرض 980 بكسل، وبدونه تظهر صفحتك صغيرة ومصغرة على الجوال.

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

و<meta name="description" content="..."> ملخص من جملة أو جملتين. وغالباً ما تعرضه Google تحت العنوان، مع أنها قد تختار نصاً آخر من الصفحة. وهو لا يرفع الترتيب بمفرده، لكن الوصف الواضح والصادق يجعل الأشخاص المناسبين ينقرون أكثر.

canonical واللغات ومعاينات المشاركة

عندما يمكن الوصول إلى الصفحة نفسها بعدة عناوين (مع معاملات التتبع مثلاً)، يخبر <link rel="canonical" href="..."> محركات البحث أيها العنوان الرئيسي. ولموقع بلغتين، تخبر روابط hreflang محرك Google أي صفحة هي النسخة العربية وأيها الإنجليزية، فيُعرض على كل قارئ ما يناسبه. ويجب أن تسرد كل صفحة لغة جميع النسخ بما فيها نفسها.

وتأتي وسوم Open Graph (og:title وog:description وog:image وog:url) من بروتوكول Facebook، ويقرؤها WhatsApp وLinkedIn وتطبيقات محادثة كثيرة لبناء بطاقة المعاينة. والصورة og:image الجيدة صورة حقيقية لما تقدمه الصفحة، وغالباً بمقاس 1200 في 630 بكسل.

الصفحات العربية ومن اليمين إلى اليسار

حدد اللغة والاتجاه على العنصر الجذر: <html lang="ar" dir="rtl">. ولا تقلّد الاتجاه من اليمين إلى اليسار باستخدام text-align: right، فالسمة dir تقلب أيضاً ترتيب الأعمدة وجهة نقاط القوائم وموضع شريط التمرير في بعض المتصفحات. واستخدم lang="ar" حتى لصفحات اللهجة الخليجية، أو رمزاً إقليمياً مثل ar-AE إذا كان المحتوى خاصاً بدولة واحدة.

وداخل الصفحة العربية قد تظهر الكلمات الإنجليزية وأرقام الهواتف والشيفرات بترتيب خاطئ حول علامات الترقيم. ضع القطعة القصيرة داخل <bdi> أو أعطِ العنصر dir="ltr" لعزلها. وللنص الذي لا تتحكم فيه، مثل اسم المستخدم أو التعليق، استخدم dir="auto"، فيختار المتصفح الاتجاه من أول حرف قوي.

والشيفرة تبقى دائماً من اليسار إلى اليمين حتى في الصفحة العربية، ولهذا ضُبط كل صندوق شيفرة في هذه الدورة على dir="ltr".

أخطاء شائعة

• العنوان نفسه في كل صفحة

  خمسون صفحة باسم "شركتي" لا يمكن التمييز بينها في نتائج البحث والتبويبات. اكتب عنواناً فريداً يسمّي موضوع كل صفحة.

• المحاذاة لليمين بدلاً من dir="rtl"

  text-align: right تنقل النص لكنها تترك علامات الترقيم والقوائم والتخطيط بترتيب من اليسار إلى اليمين. حدد dir="rtl" على عنصر html.

• غياب وسم viewport

  بدون وسم viewport تعرض الهواتف صفحة مكتبية مصغّرة. إنه سطر واحد، فأضفه إلى كل صفحة.

تمرين

حوّل هذه الصفحة إلى صفحة عربية صحيحة: lang="ar" وdir="rtl" على عنصر html، وترميز الأحرف، ووسم viewport، وعنوان غير فارغ، ووصف meta. وأبقِ رقم الهاتف من اليسار إلى اليمين باستخدام dir="ltr" أو <bdi>.

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>صالون الياسمين في دبي</title>
  <meta name="description" content="احجز موعدك في صالون الياسمين بدبي عبر الهاتف أو واتساب.">
</head>
<body>
  <h1>صالون الياسمين</h1>
  <p>للحجز: <bdi dir="ltr">+971 50 000 0000</bdi></p>
</body>
</html>

اختبار سريع

أسئلة يطرحها الناس

المصادر

روجعت المعلومات في هذا الدرس وفق هذه الصفحات الرسمية بتاريخ 20 أكتوبر 2026.

• MDN: The head, metadata in HTML
• Google Search Central: Title links
• Google Search Central: Localized versions (hreflang)
• W3C Internationalization: Structural markup and right-to-left text
• The Open Graph protocol

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