The Code Fix
...ابدأ مجانًا

🟧 شرح HTML

رأس المستند: head و meta و title و favicon

❯ السابقالتالي ❮

ما هو <head>؟

<head> هو الجزء غير المرئي من الصفحة. لا يظهر للمستخدم، لكنه يحتوي على معلومات عن المستند (Metadata) يستخدمها المتصفح ومحركات البحث ومنصّات التواصل.

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

العنوان <title>

النص الذي يظهر في تبويب المتصفح وفي نتائج بحث جوجل. أهم عنصر في الـ head للـ SEO.

<title>The Code Fix — تعلّم البرمجة بالعربي</title>

🔑 اجعل كل صفحة بعنوان فريد ووصفي (50–60 حرفًا) يحتوي كلمتك المفتاحية.

ترميز المحارف <meta charset>

يخبر المتصفح كيف يقرأ الأحرف. استخدم UTF-8 دائمًا (يدعم العربية وكل اللغات):

<meta charset="UTF-8" />

التجاوب <meta viewport>

ضروري لظهور الموقع جيدًا على الجوال:

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

الوصف <meta description>

النص الذي يظهر تحت العنوان في نتائج البحث. اكتبه ليُغري بالنقر (150–160 حرفًا):

<meta name="description" content="تعلّم HTML من الصفر بالعربي مع أمثلة تفاعلية." />

الربط <link> — CSS و Favicon

<link rel="stylesheet" href="style.css" />   <!-- ملف تنسيق -->
<link rel="icon" href="favicon.ico" />        <!-- أيقونة التبويب -->

الـ favicon هي الأيقونة الصغيرة بجانب عنوان التبويب — تعزّز هوية موقعك.

وسوم التواصل الاجتماعي (Open Graph)

تتحكّم بشكل الرابط عند مشاركته على فيسبوك/تويتر:

<meta property="og:title" content="The Code Fix" />
<meta property="og:image" content="/preview.png" />

الأخطاء الشائعة

  • ❌ نسيان <meta charset> → حروف عربية مشوّهة.
  • ❌ نسيان viewport → موقع مصغّر وغير صالح على الجوال.
  • ❌ عنوان واحد لكل الصفحات → سيئ جدًا للـ SEO.

خلاصة

<head> يحمل معلومات الصفحة: <title> وcharset وviewport ضرورية دائمًا، وdescription والـ Open Graph تحسّن ظهورك في البحث والمشاركة.

❯ السابقالتالي ❮