ما هو <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" />
Canonical URL و Robots Meta
صفحتان بمحتوى متشابه (مثلًا نسخة ?ref= تتبّعية من نفس المقال) تربكان محركات البحث: أيّهما "الأصلية"؟ وسم rel="canonical" يحسم الأمر:
<link rel="canonical" href="https://thecodefix.net/blog/original-post" />
هذا يخبر جوجل: "مهما كان الرابط الذي وصلتَ به، هذه هي النسخة الرسمية التي يجب فهرستها." استخدمه على كل صفحة، ولو كانت تشير لنفسها هي (self-referencing canonical) — عادة أفضل الممارسات.
robots meta يتحكّم بسلوك محركات البحث تجاه صفحة معيّنة:
<meta name="robots" content="noindex, follow" />
noindex— لا تُدرج هذه الصفحة في نتائج البحث (مفيد لصفحة تسجيل الدخول مثلًا).follow/nofollow— هل يتبع الزاحف الروابط داخل الصفحة أم لا.
🔑
robotsعلى مستوى الصفحة يختلف عن ملفrobots.txtعلى مستوى الموقع:robots.txtيمنع الزحف لمسار كامل، بينما<meta name="robots">يسمح بالزحف لكن يمنع الفهرسة — الفرق مهم لأن جوجل لا يرى وسمnoindexأصلًا إن كانت الصفحة ممنوعة من الزحف أساسًا.
مقدمة إلى Structured Data (JSON-LD)
البيانات المهيكلة (Structured Data) هي طريقة لوصف محتوى صفحتك بصيغة تفهمها محركات البحث آليًا — لا كنص عادي، بل ككائن بمعاني واضحة (هذا مقال، وكاتبه فلان، وتاريخ نشره كذا). الصيغة الشائعة اليوم هي JSON-LD: كتلة JSON توضع داخل <script type="application/ld+json"> في الـ <head>:
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "عنوان المقال",
"datePublished": "2026-01-15",
"author": { "@type": "Organization", "name": "The Code Fix" }
}
</script>
@contextثابت دائمًا:"https://schema.org"— قاموس الأنواع المتفق عليه بين محركات البحث.@typeيحدد نوع المحتوى (Article،Product،FAQPage،Course...).- لا يظهر أي من هذا للزائر — فقط لمحركات البحث، وقد يظهر كنتيجة بحث غنية (Rich Result) بنجوم تقييم أو تاريخ نشر أو سؤال وجواب مباشرة في صفحة النتائج.
⚠️ البيانات المهيكلة يجب أن تُبنى من كود موقعك، لا من مدخلات مستخدم خارجية مباشرة — نص يكتبه مستخدم ويُدرج كما هو داخل
@type/headlineبلا تحقّق يفتح باب تلاعب بظهور صفحتك في نتائج البحث.
الأخطاء الشائعة
- ❌ نسيان
<meta charset>→ حروف عربية مشوّهة. - ❌ نسيان
viewport→ موقع مصغّر وغير صالح على الجوال. - ❌ عنوان واحد لكل الصفحات → سيئ جدًا للـ SEO.
- ❌ نسيان
canonicalعلى صفحات لها عدة روابط تصل لنفس المحتوى → محتوى مكرر في نظر جوجل. - ❌ منع صفحة من
robots.txtبدل استخدامnoindexلصفحة خاصة تريدها متاحة لكن غير مفهرسة — النتيجة معاكسة تمامًا لو ظهر رابط خارجي لها.
خلاصة
<head> يحمل معلومات الصفحة: <title> وcharset وviewport ضرورية دائمًا، وdescription والـ Open Graph تحسّن ظهورك في البحث والمشاركة. canonical يمنع مشاكل المحتوى المكرر، وrobots يتحكّم بالفهرسة، وJSON-LD يمنح محركات البحث فهمًا آليًا لمحتوى صفحتك قد يظهر كنتيجة بحث غنية.