قيمة الوسوم الدلالية في HTML5 لا تأتي من كثرتها، بل من وضوحها. فهي تساعد SEO عندما تجعل Google يفهم ترتيب الصفحة بسرعة: ما هو المحتوى الرئيسي، وما الذي يعد دعما له، وأين تبدأ الحدود المنطقية لكل جزء.
المشكلة أن كثيرا من الصفحات تستخدم <section> كأنه <div> باسم أحدث، وتتعامل مع <article> كأي حاوية كبيرة، بينما يختفي <aside> تماما. النتيجة أن الشيفرة تبدو مرتبة، لكن الإشارة الدلالية نفسها تصبح ضبابية.
الهيكل الجيد يقول المهم فقط
معظم الصفحات لا تحتاج إلى شبكة معقدة من الوسوم. غالبا يكفي أن توضّح أربع نقاط:
- أين يبدأ الهيدر
- أين ينتهي الفوتر
- ما هو المحتوى الرئيسي
- ما هي الأجزاء المرتبطة بالموضوع لكنها ليست مركز الصفحة
في هذا السياق، تكفي غالبا وسوم <header> و <footer> و <main> و <article> و <aside>.
قد تبدو هذه البنية مختصرة أكثر من اللازم، لكنها في الحقيقة تؤدي الغرض بأفضل شكل. فهي تبرز المهم وتترك الضجيج خارج الصورة.
الخطأ الأشهر: استخدام الوسوم الدلالية لأغراض التخطيط فقط
الخطأ المتكرر يبدأ عادة من فكرة بسيطة: "بما أن section موجودة، فلنستخدمها في كل صندوق داخل الصفحة". لكن هذا ليس دورها.
في المثال أعلاه، وجود <article> مع <h1> منطقي. المشكلة في العدد الكبير من <section> حول العنوان، من دون تقسيم موضوعي واضح.
وسم <section> لا يفترض أن يرسم صندوقا بصريا فقط. وظيفته أن يقسم محتوى مستقلا إلى أجزاء فرعية لها موضوع محدد. إذا أصبحت كل كتلة section، تختفي الأولويات بدل أن تتضح.
متى يكون <section> منطقيا فعلا؟
هناك صفحات يناسبها <section> تماما. مراجعة هاتف ذكي مثال واضح: التصميم، الشاشة، الكاميرا، البطارية، الأداء. هذه محاور فرعية حقيقية داخل مقال واحد.
في هذه الحالة، كل جزء يجيب عن سؤال مختلف، وله عنوانه الخاص، ويمكن فهمه حتى لو قرأته منفصلا. هنا يصبح <section> مفيدا بالفعل.
قبل أن تستخدمه، اسأل نفسك:
- هل هذا الجزء يعالج موضوعا فرعيا مستقلا؟
- هل له عنوان واضح مثل
<h2>أو<h3>؟ - هل يظل مفهوما إذا عُزل عن بقية المقال؟
- هل التقسيم مبني على المنطق التحريري لا على الشكل فقط؟
إذا لم تكن الإجابة واضحة، فغالبا يكفي <div>.
<article> و <aside> يحددان الوزن الدلالي
وسم <article> يناسب المحتوى الذي يمكن أن يعيش وحده: مقال، خبر، مراجعة، مشاركة، أو أي وحدة محتوى مستقلة.
لكن الصفحات غالبا تحتوي أيضا على وحدات مساندة مثل المنتجات المرتبطة، المقالات المقترحة، صندوق الكاتب، أو نموذج الاشتراك. هذه العناصر مفيدة، لكنها ليست محور الصفحة.
وهنا يأتي دور <aside>. هذا الوسم يقول لمحرك البحث: "هذا المحتوى مرتبط بالسياق، لكنه ليس الرسالة الأساسية".
بشكل عملي:
<article>يحمل القيمة الرئيسية للصفحة<aside>يدعم، يشرح أو يدفع إلى اتخاذ إجراء، لكنه لا يقود المعنى الأساسي
وسم <h1> واحد لكل صفحة ما زال الخيار الأكثر أمانا
قد تجد في HTML5 تفسيرات تسمح بأكثر من <h1> في بعض الحالات. لكن في SEO تبقى القاعدة العملية الأبسط والأكثر أمانا: صفحة واحدة، <h1> واحد.
ومن الأفضل أن يكون هذا العنوان داخل <article> الرئيسي، حتى تظل إشارة الموضوع المركزي واضحة.
طريقة سريعة لاتخاذ قرار الهيكل
إذا أردت قاعدة عملية بسيطة، فكر بهذا الترتيب:
- استخدم
<header>للهيدر، الشعار، التنقل والبحث. - استخدم
<footer>للفوتر والروابط الثانوية والمعلومات القانونية. - استخدم
<main>مرة واحدة فقط لقلب الصفحة. - داخل
<main>استخدم<article>للمحتوى الفريد والأهم في هذه الصفحة. - استخدم
<aside>لكل ما هو مرتبط لكنه أقل أولوية. - استخدم
<section>فقط عندما ينقسم الموضوع فعلا إلى أجزاء فرعية مستقلة.
إذا كانت لديك صفحات كبيرة ومتراكمة منذ مدة، فمن المفيد مراجعة بنيتها تقنيا. ويمكنك استخدام SEO Analyzer للحصول على صورة أسرع عن الإشارات المتداخلة قبل أن تتحول إلى مشكلة فهرسة أو فهم.
وسوم دلالية أخرى تستحق الاستخدام
الموضوع لا يقتصر على هيكل الصفحة. داخل النص نفسه توجد وسوم مفيدة أيضا:
<strong>لإبراز الأهمية الحقيقية<em>للتأكيد داخل الجملة<mark>لتسليط الضوء على جزء محدد<abbr>للاختصارات مع توضيحها<figure>و<figcaption>للصور والرسوم والأمثلة التي تحتاج إلى شرح<ul>و<ol>عند عرض عناصر على شكل قائمة<table>و<caption>عند تقديم بيانات جدوليّة
الجدول الموصوف جيدا يسهّل على Google فهم البيانات بسرعة، خصوصا عندما يوضح <caption> ما الذي يعرضه الجدول بالضبط.
الخلاصة
الاستخدام الذكي للوسوم الدلالية لا يعني أن تملأ الصفحة بها. المعنى الحقيقي هو أن تقلل مساحة الالتباس.
كلما صار من السهل على محرك البحث أن يميز بين المحتوى الرئيسي والمحتوى المساند وطريقة تقسيم الصفحة، زادت فرص فهم الصفحة كما تقصدها أنت فعلا.
لهذا تبقى القاعدة الأفضل بسيطة: استخدم عددا أقل من الوسوم، لكن استخدم كل وسم في مكانه الصحيح.
مصادر
- نظرة عامة على العناصر الدلالية في W3Schools
- أداة لعرض بنية HTML5 بصريا: Semantic HTML5 Viewer
- ولمراجعة الإشارات التقنية في موقعك بسرعة يمكنك استخدام SeoSpeedup
