المشكلة ليست في HTML نفسه، بل في أن كل شيء يبدو كتلة واحدة
يمكنك بناء صفحة كاملة باستخدام <div> فقط، وستعمل الصفحة من ناحية العرض. المتصفح سيعرضها بشكل طبيعي، وكثير من الزوار لن يلاحظوا الفرق. لكن محرك البحث يرى شيئًا مختلفًا: مجموعة حاويات عامة من دون إشارات واضحة تشرح أين يبدأ المحتوى الرئيسي وأين تنتهي القوائم والروابط الجانبية والإعلانات والتذييل.
هنا تظهر قيمة وسوم HTML5 الدلالية. الوسوم مثل <header> و<main> و<article> و<aside> و<section> لا تنظّم الكود فقط، بل تشرح وظيفة كل جزء داخل الصفحة.
عندما تكون البنية واضحة، يصبح من الأسهل على محركات البحث أن تميّز بين النص الأساسي وبين الضجيج الناتج عن القوالب الجاهزة والعناصر المتكررة. وهذا مهم جدًا في الصفحات التي تحتوي على سايدبار وروابط مقترحة ووحدات كثيرة حول المحتوى.
لماذا يفيد هذا فعلاً في SEO
ليست الفكرة أن Google لا يفهم HTML من دون هذه الوسوم. الفكرة أنه كلما كانت الإشارات أوضح، قلّ احتمال تفسير الصفحة بشكل غير دقيق.
في صفحة واحدة قد تجتمع عناصر كثيرة:
- قائمة تنقل رئيسية،
- روابط لمقالات ذات صلة،
- بانرات ترويجية،
- وحدات جانبية،
- روابط متكررة في التذييل.
إذا وُضعت هذه العناصر كلها داخل حاويات عامة من دون فصل دلالي، فسيحتاج محرك البحث إلى تخمين ما هو الموضوع الرئيسي وما هو محتوى مساعد فقط. أحيانًا ينجح في ذلك، وأحيانًا يتشتت الوزن الموضوعي للصفحة.
تخيل صفحة مراجعة لسيارة BMW X5. النص الأساسي يتحدث عن السيارة نفسها، لكن في العمود الجانبي قد تظهر روابط إلى Mercedes GLE وAudi Q7 ومقالات عن الصيانة. هذه الروابط مفيدة، لكنها لا ينبغي أن تنافس المقال الأساسي على تعريف موضوع الصفحة.
ابدأ بالمناطق الكبيرة: <header> و<main> و<footer>
أبسط مستوى من الهيكلة يبدأ من هنا:
<header>لرأس الصفحة والتنقل الرئيسي،<main>للمحتوى الفريد الخاص بهذه الصفحة،<footer>للتذييل والروابط الختامية.
1<body> 2 <header> 3 <!-- الشعار، التنقل الرئيسي، البحث --> 4 </header> 5 6 <main> 7 <!-- المحتوى الرئيسي الفريد لهذه الصفحة --> 8 </main> 9 10 <footer> 11 <!-- حقوق النشر، الروابط القانونية، التواصل --> 12 </footer> 13</body>
هناك نقطتان عمليتان مهمتان:
- من الأفضل أن تحتوي الصفحة على
<main>واحد فقط. - هذه الوسوم مخصّصة للمعنى والبنية، لا للتنسيق البصري. التصميم يجب أن يبقى في CSS.
استخدم <article> لتحديد الجزء الذي يجيب فعلًا عن نية البحث
داخل <main> يمكنك أن تكون أوضح. إذا كانت الصفحة تحتوي على وحدة محتوى مستقلة يمكن قراءتها بذاتها، فوسم <article> غالبًا هو الاختيار الصحيح.
يُستخدم عادة في:
- مقالات المدونة،
- الأخبار،
- الأدلة الطويلة،
- المراجعات،
- الصفحات التي تحمل محتوى رئيسيًا مستقلًا.
وفي الغالب يكون عنوان الصفحة الأساسي <h1> داخل هذا الوسم.
1<main> 2 <article> 3 <h1>BMW X5: مراجعة كاملة وتجربة قيادة</h1> 4 <p>النص الأساسي للمقال...</p> 5 </article> 6</main>
هذا يرسل إشارة مباشرة إلى محرك البحث بأن هذه الكتلة هي قلب الصفحة.
المحتوى المساند من الأفضل عزله داخل <aside>
ليس كل ما هو خارج النص الرئيسي بلا قيمة. كثير من العناصر مفيد، لكنه ليس محور الصفحة. هنا يأتي دور <aside>.
من الاستخدامات المناسبة له:
- نبذة عن الكاتب،
- ملاحظات أو تعريفات سريعة،
- روابط لمحتوى مرتبط،
- إعلانات أو عروض،
- أدوات جانبية.
1<main> 2 <article> 3 <h1>BMW X5: مراجعة كاملة وتجربة قيادة</h1> 4 <p>المحتوى الأساسي...</p> 5 6 <aside> 7 <p>معلومات سريعة عن الطراز والمواصفات الأساسية.</p> 8 </aside> 9 </article> 10 11 <aside> 12 <h2>محتوى مرتبط</h2> 13 <ul> 14 <li><a href="/mercedes-gle-review">مراجعة Mercedes GLE</a></li> 15 <li><a href="/audi-q7-review">مراجعة Audi Q7</a></li> 16 </ul> 17 </aside> 18</main>
هذا الفصل يساعد محرك البحث على فهم أن مراجعة BMW X5 هي الموضوع الأساسي، بينما العمود الجانبي مجرد محتوى داعم.
لا تستخدم <section> كبديل أنيق لـ <div>
هذا من أكثر الأخطاء شيوعًا.
وسم <section> مناسب عندما تريد تقسيم المقال إلى أجزاء موضوعية واضحة، ولكل جزء عنوان فرعي خاص به. في الأدلة الطويلة هذا استخدام ممتاز. أما لفّ أي صندوق في الصفحة بـ<section> فقط لأنه يبدو "أكثر دلالية"، فغالبًا لا يضيف شيئًا.
1<article> 2 <h1>كيفية استخدام وسوم HTML5 الدلالية</h1> 3 4 <section> 5 <h2>مهمة وسم main</h2> 6 <p>...</p> 7 </section> 8 9 <section> 10 <h2>متى نستخدم article</h2> 11 <p>...</p> 12 </section> 13</article>
القاعدة السريعة هنا بسيطة: إذا لم يكن للجزء عنوان فرعي واضح، فغالبًا لا يحتاج إلى <section>.
قائمة مراجعة سريعة قبل تعديل القوالب
إذا كنت تراجع البنية الدلالية من زاوية SEO، فابدأ بهذه النقاط:
- هل تحتوي الصفحة على
<main>واحد فقط؟ - هل المحتوى الذي يجيب عن نية البحث موجود داخل
<article>؟ - هل تم فصل السايدبار والعروض والروابط المساندة عن النص الأساسي؟
- هل يُستخدم
<section>لتقسيم موضوعات حقيقية وليس لأغراض layout فقط؟ - هل ترتيب العناصر دلاليًا ينسجم مع ترتيب القراءة؟
- هل المبدأ نفسه مطبق في المدونة وصفحات الهبوط والفئات وصفحات الموارد؟
في المواقع الكبيرة، هذه الأخطاء لا تظهر عادة في صفحة واحدة فقط. غالبًا تكون مكررة على مستوى القالب كله.
الخلاصة
الـ HTML5 الدلالي لا يغني عن محتوى قوي أو فهم صحيح لنية البحث أو بنية داخلية جيدة. لكنه يساعد محركات البحث على فهم أين توجد الإجابة الرئيسية، وأين تبدأ عناصر التنقل والسياق والضجيج الناتج عن القالب.
إذا كانت الصفحة تحصل بالفعل على ظهور، لكن الأداء ما زال أقل من المتوقع، فهذه نقطة تستحق الفحص. في SeoSpeedup Site Audit تظهر مثل هذه المشكلات البنيوية بسرعة كبيرة عادة.
