وسم head في HTML: العنوان و meta والأيقونة

الدرس 15 من 17 · HTML

كل ما تعلمته حتى الآن يُكتب داخل <body> ويراه الزائر. لكن في الصفحة جزء آخر لا يظهر فيها، وأثره كبير: <head>. منه يعرف المتصفح عنوان التبويب وأيقونته، ومنه تأخذ Google النص الذي تعرضه في نتائج البحث، ومنه تُبنى البطاقة التي تظهر عندما يشارك أحدهم رابط صفحتك. في هذا الدرس ستتعلم كيف تملأ هذا الجزء بطريقة صحيحة.

ما هو head؟

تخيّل كتاباً في مكتبة: قبل أن تفتحه ترى على غلافه العنوان واسم المؤلف، وعلى ظهره نبذة قصيرة. هذه المعلومات ليست من محتوى الكتاب، لكنها ما يجعلك تختاره من بين مئات الكتب. <head> هو غلاف صفحتك: معلومات عن الصفحة، وليست جزءاً من محتواها.

عرفت في درس هيكل الصفحة ثلاثة أسطر أساسية توضع فيه:

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>عنوان الصفحة</title>
</head>

والآن نبني عليها.

العنوان: title

<title> أهم سطر في <head>. وهو يظهر في ثلاثة أماكن:

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

<title>طريقة عمل الكشري في البيت | مطبخ سلمى</title>

قواعد العنوان الجيد:

فريد لكل صفحة في موقعك.
يصف محتوى الصفحة بوضوح، وبعده اسم الموقع.
قصير: حوالي 50 إلى 60 حرفاً، لأن محركات البحث تقطع الباقي.

وصف الصفحة

<meta name="description" content="طريقة الكشري المصري خطوة بخطوة: المقادير، وسر الصلصة والتقلية، ونصائح ليخرج الأرز مفلفلاً.">

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

لوسم <meta> شكل ثابت: name تقول ما نوع المعلومة، و content تحمل قيمتها.

وسوم meta أخرى

السطر	وظيفته
`<meta name="author" content="سلمى أحمد">`	اسم كاتب الصفحة
`<meta name="robots" content="noindex">`	يطلب من محركات البحث ألا تعرض هذه الصفحة
`<meta name="theme-color" content="#5b5bf0">`	لون شريط المتصفح على الموبايل

أيقونة الموقع: favicon

الأيقونة الصغيرة التي تظهر بجانب العنوان في التبويب تسمى favicon. تضيفها بالوسم <link>:

<link rel="icon" href="/favicon.svg" type="image/svg+xml">

rel="icon": تقول للمتصفح إن هذا الملف هو الأيقونة.
href: مسار ملف الأيقونة.
type: نوع الملف. للصور من نوع PNG تكون القيمة image/png.

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

بطاقة المشاركة: Open Graph

عندما ترسل رابطاً في واتساب أو فيسبوك تظهر له بطاقة فيها صورة وعنوان ووصف. من أين تأتي؟ من وسوم تسمى Open Graph تكتبها أنت في <head>:

<meta property="og:title" content="طريقة عمل الكشري في البيت">
<meta property="og:description" content="المقادير وسر الصلصة والتقلية خطوة بخطوة.">
<meta property="og:image" content="https://example.com/images/koshari.jpg">
<meta property="og:url" content="https://example.com/koshari.html">
<meta property="og:type" content="article">

لاحظ فرقين عن وسوم meta العادية:

هنا نكتب property وليس name.
رابط الصورة يجب أن يكون مطلقاً ويبدأ بـ https://، لأن التطبيق الذي يبني البطاقة ليس داخل موقعك.

والمقاس المناسب لصورة المشاركة 1200 في 630 بكسل.

ربط ملفات CSS و JavaScript

الوسم <link> نفسه يربط ملف التنسيق بالصفحة، والوسم <script> يربط ملف JavaScript:

<link rel="stylesheet" href="style.css">
<script src="app.js" defer></script>

ستتعلم تفاصيلهما في كورس CSS وكورس JavaScript. المهم الآن أن تعرف أن مكانهما هنا.

الرابط الأصلي: canonical

أحياناً تفتح الصفحة نفسها بأكثر من عنوان. السطر التالي يخبر محركات البحث أي عنوان هو الأصلي، فلا تعتبر الباقي صفحات مكررة:

<link rel="canonical" href="https://example.com/koshari.html">

head كامل لصفحة حقيقية

<!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="طريقة الكشري المصري خطوة بخطوة: المقادير، وسر الصلصة والتقلية.">
  <link rel="canonical" href="https://example.com/koshari.html">

  <link rel="icon" href="/favicon.svg" type="image/svg+xml">

  <meta property="og:title" content="طريقة عمل الكشري في البيت">
  <meta property="og:description" content="المقادير وسر الصلصة والتقلية خطوة بخطوة.">
  <meta property="og:image" content="https://example.com/images/koshari.jpg">

  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>طريقة عمل الكشري في البيت</h1>
</body>
</html>

احتفظ بهذا القالب، وابدأ منه كل صفحة جديدة.

جرّب بنفسك

محتوى <head> لا يظهر داخل الصفحة، ولذلك تجربه في ملف على جهازك:

أنشئ ملفاً باسم recipe.html وانسخ فيه القالب السابق.
غيّر العنوان والوصف ليناسبا أكلتك المفضلة.
افتح الملف في المتصفح وانظر إلى التبويب: يجب أن يظهر عنوانك الجديد.
اضغط Ctrl + U لعرض مصدر الصفحة، وتأكد أن وسوم meta موجودة كما كتبتها.
افتح أي موقع تحبه واعرض مصدره بالطريقة نفسها، وابحث فيه عن og:image. سترى أن المواقع الكبيرة تستخدم ما تعلمته الآن.

أخطاء شائعة

العنوان نفسه لكل الصفحات: محرك البحث لا يميّز بين صفحاتك، والزائر لا يميّز بين تبويباته. لكل صفحة عنوان ووصف خاصان بها.
مسار نسبي في og:image: البطاقة تظهر بلا صورة. اكتب الرابط كاملاً.
وضع محتوى مرئي داخل head: العناوين والفقرات مكانها <body> فقط.
نسيان charset: الحروف العربية قد تظهر رموزاً غريبة. اجعله أول سطر في <head>.

اختبر نفسك

سؤال

أين يظهر النص المكتوب في <meta name='description'>؟

سؤال

أي سطر يضيف أيقونة للموقع في تبويب المتصفح؟

الخلاصة

<head> يحمل معلومات عن الصفحة لا تظهر في محتواها.
<title> فريد وواضح لكل صفحة، ويظهر في التبويب ونتائج البحث.
<meta name="description"> هو النص الذي يُعرض تحت العنوان في نتائج البحث.
<link rel="icon"> يضيف أيقونة الموقع.
وسوم Open Graph تبني بطاقة المشاركة، ورابط صورتها مطلق.

عن مدرسة البرمجة

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