الدرس 3: هندسة المحتوى.. العناوين والنصوص وقواعد الـ SEO
تعلم فن تنسيق النصوص في HTML: اكتشف التسلسل الصحيح للعناوين من h1 إلى h6، والفرق بين التنسيق الجمالي والدلالي (Strong و Em) لتحسين أداء موقعك في محركات البحث.
في عالم الويب، المحتوى هو الملك، ولكن الملك يحتاج إلى نظام. ستتعلم اليوم كيف تنظم نصوصك لتبدو احترافية، والأهم من ذلك، كيف تجعل جوجل يقع في حب موقعك من خلال استخدام الوسوم الصحيحة.
1. العناوين من <h1> إلى <h6>: هرم السلطة
تخيل أنك تقرأ جريدة؛ هناك عنوان رئيسي عريض، وعناوين فرعية أصغر. في HTML، نستخدم الوسوم من <h1> إلى <h6> لتحديد أهمية العناوين:
<h1>: هو العنوان الأهم والوحيد في الصفحة (مثل عنوان المقال).
<h2>: عناوين الأقسام الرئيسية داخل المقال.
<h3> إلى <h6>: عناوين فرعية تزداد تفصيلاً كلما زاد الرقم.
قاعدة "الشيفرة" الذهبية: المتصفح لا ينظر لهذه الأوسام كأحجام خطوط فقط، بل كأولوية للمعلومات.
2. تنظيم الفقرات والفواصل (<p>, <br>, <hr>)
<p> (Paragraph): نستخدمه لكتابة الفقرات النصية. يقوم المتصفح تلقائياً بترك مسافة بسيطة قبل وبعد كل فقرة.
<br> (Break): وسم ذاتي الإغلاق، نستخدمه إذا أردنا النزول لسطر جديد "إجبارياً" داخل نفس الفقرة.
<hr> (Horizontal Rule): وسم ذاتي الإغلاق، يرسم خطاً أفقياً للفصل بين المواضيع المختلفة في الصفحة.
3. التنسيق الدلالي: القوة مقابل المظهر
هنا يكمن الفرق بين المبرمج الهاوي والمحترف في "الشيفرة":
<strong> مقابل <b>:
<b>: تجعل الخط عريضاً للمظهر فقط.
<strong>: تجعل الخط عريضاً وتخبر المتصفح أن هذا النص "مهم جداً" (الأفضل للـ SEO).
<em> مقابل <i>:
<i>: تجعل الخط مائلاً للمظهر.
<em>: تجعل الخط مائلاً وتخبر المتصفح أن هناك "تشديداً" (Emphasis) في نبرة هذا النص.
4. أخطاء شائعة تدمر الـ SEO (احذر منها اثناء برمجتك للمواقع!)
بما أنك تبني موقعاً بالتأكيد من أهم المعايير والميزات المطلوبة هي أن يكون متوافقاً مع محركات البحث ويتصدر نتائج البحث ويظهر في بحث جوجل، لذلك تجنب هذه الأخطاء لكي تتصدر النتائج:
استخدام أكثر من <h1>:
يجب أن يحتوي كل مقال على عنوان <h1> واحد فقط. وجود أكثر من واحد يشتت محركات البحث.
تخطي المستويات:
لا تنتقل من <h1> مباشرة إلى <h3>. يجب أن يكون التسلسل منطقياً (1 ثم 2 ثم 3).
الاختيار بناءً على الحجم:
لا تستخدم <h3> لمجرد أن حجمه أعجبك؛ استخدمه لأنه عنوان فرعي لـ <h2>. (تحكم في الحجم دائماً عبر CSS، وليس عبر وسوم العناوين).
5. تطبيق عملي لدرس اليوم
لنجرب صياغة مقال تقني صغير داخل ملف index.html:
مثال برمجى الدرس الثالث
💡 تحدي "الشيفرة"
قم بكتابة نص قصير عن لغتك البرمجية المفضلة. استخدم فيها عنواناً من نوع <h2> وكلمة واحدة بداخلها وسم <strong> وكلمة أخرى بداخلها <em>.
هل لاحظت كيف تغير شكل النصوص؟ أخبرنا في التعليقات ما هي لغتك المفضلة!