استخدام الـ Semantic HTML في السيو
دليلك الشامل في تحسين محركات البحث
يعني إيه Semantic HTML؟#
استخدام العنصر الذي يصف معنى المحتوى بدل عنصر عام. <nav> بدل <div class="nav">، و<article> بدل <div class="post">.
الفرق ليس شكلياً: العنصر الدلالي يحمل معنى يفهمه المتصفح وقارئ الشاشة ومحرك البحث دون الحاجة لتخمين من أسماء الأصناف.
أهم العناصر#
| العنصر | يُستخدم لـ |
|---|---|
<header> | ترويسة الصفحة أو القسم |
<nav> | مجموعة روابط تنقل رئيسية |
<main> | المحتوى الأساسي. مرة واحدة فقط في الصفحة |
<article> | محتوى مستقل يمكن نشره وحده |
<section> | قسم موضوعي، ويُفضّل أن يبدأ بعنوان |
<aside> | محتوى جانبي مكمّل |
<footer> | تذييل الصفحة أو القسم |
<figure> و<figcaption> | صورة أو مخطط مع تعليق مرتبط بها |
<time> | تاريخ أو وقت بصيغة قابلة للقراءة الآلية |
<table> مع <th> | بيانات جدولية حقيقية |
ليه مهم في السيو؟#
- يفصل المحتوى عن القوالب: جوجل يميّز المحتوى الأساسي داخل
<main>و<article>عن التنقل والتذييل المكرر في كل صفحة - يسهّل استخلاص المقتطفات: الجداول والقوائم الحقيقية تُقتطف بدقة، بخلاف الجداول المرسومة بـ div
- يخدم الوصول: قارئ الشاشة يتنقل بين المعالم مباشرة، وهو مؤشر جودة حقيقي
- يقلل الاعتماد على JavaScript: بنية دلالية واضحة في HTML تصل للزاحف دون معالجة
مثال تطبيقي#
<body>
<header>
<nav aria-label="التنقل الرئيسي">...</nav>
</header>
<main>
<article>
<h1>تحسين سرعة الموقع</h1>
<p>نُشر في <time datetime="2025-07-31">31 يوليو 2025</time></p>
<section>
<h2>قياس السرعة</h2>
<p>...</p>
<figure>
<img src="report.webp" alt="تقرير الأداء">
<figcaption>نتيجة القياس قبل التحسين</figcaption>
</figure>
</section>
</article>
</main>
<footer>...</footer>
</body>
أخطاء شائعة#
- div لكل شيء: صفحة كاملة بلا عنصر دلالي واحد
- أكثر من
<main>: يجب أن يكون واحداً فقط - استخدام العناوين للتنسيق:
<h3>لتصغير الخط بدل CSS - تخطي مستويات العناوين: من H2 إلى H4 مباشرة
- جداول مرسومة بـ div: تفقد كل معناها للزاحف ولقارئ الشاشة
<div onclick>بدل<a href>أو<button>: الزاحف لا يتبع onclick، فالرابط غير موجود بالنسبة له<section>بلا عنوان: استخدم div عادياً إن لم يكن قسماً موضوعياً حقيقياً