كيفية استخدام علامات عناوين HTML بشكل صحيح

كل موقع هو وحش فريد خاص به ، حيث يضع المطورون والمصممين أصواتهم الخاصة في الكود. لكن أحد العناصر المشتركة بين كل موقع ويب هو علامات عناوين HTML. لا تقوم هذه العناوين فقط بتقسيم المحتوى الخاص بك إلى أقسام أكثر قابلية للقراءة ، بل تقوم أيضًا بإنشاء مخطط تفصيلي لموقعك بحيث يمكن لمحركات البحث وبرامج إمكانية الوصول تحديد المحتوى الذي يتكون منه الموقع بالضبط. يوجد أحيانًا بعض الالتباس فيما يتعلق بالاستخدام والوظيفة المناسبين لعلامات عناوين HTML ، لذلك نريد استعراض جميع المستويات الستة ومناقشة كيفية ووقت استخدامها بشكل صحيح.

اشترك في قناتنا على اليوتيوب

لماذا تستخدم علامات عناوين HTML؟

كما قلنا أعلاه ، فإن هذه العلامات تنشئ الهيكل العظمي لموقعك. بدونها ، ليس فقط عنوان موقعك والغرض منه أقل وضوحًا ، ولكن المحتوى يتطلع إلى المستخدمين والروبوتات كما لو كان جدارًا نصيًا عملاقًا - حتى لو قسمته باستخدام فقرات.

بالإضافة إلى ذلك ، تستخدمهم برامج قراءة الشاشة وإمكانية الوصول للتنقل في المحتوى الخاص بك (حرفيًا في بعض الأحيان). لذلك إذا لم تقم بتضمين علامات عناوين HTML ، فلن يتمكن الكثير من الأشخاص من الوصول إلى موقعك لأنهم ببساطة لا يستطيعون التنقل في الصفحة والمحتوى.

بالإضافة إلى ذلك ، فإن محركات البحث وبرامج زحف الويب الأخرى التي تصل إلى موقعك تتنقل عبر العناوين أيضًا. في الآونة الأخيرة ، كانت Google تدرس دلالات الشفرات في تصنيفاتها ، مما يعني أن هدف البحث يلقى وزنًا كبيرًا. تعد علامات عناوين HTML جزءًا رئيسيًا من هذا ، حيث تخبر Google والزائرين بمكان العثور على معلومات محددة على الصفحة ، مرتبة حسب الأهمية الهرمية.

وكل علامة داخل صفحتك تساعد كل هذا بطريقتها الخاصة.

التسلسل الهرمي للعلامات مهم

ترتيب ورثة علامة عنوان HTML أمر مهم. يمكن أن يؤدي الترتيب الذي تستخدم به هذه العلامات إلى إنشاء مُحسّنات محرّكات البحث لموقعك أو كسرها. بينما يمكنك تصميمها باستخدام CSS وجعل علامة H6 أكبر وأكثر جرأة وإشراقًا من H2 ، لا يزال يتعين عليك محاولة الاحتفاظ بها بالترتيب حتى لا تربك برامج الزحف (والقراء).

فكر في العلامات بترتيب تصاعدي كما لو كانت عناوين لمخطط منشورك. يجب عليك فقط (بشكل عام) وضع رقم أعلى تحت سابقه المباشر. يمكنك تداخلها بالعمق الذي تريده ، ولكن تأكد من وضع التالي فقط في التسلسل في كل مرة.

هذا مثال:

<h1>Title</h1>
    <h2>Main Point Number 1</h2>
        <h3>Subtopic</h3>
            <h4>Very specific point</h4>
        <h3>Main Point Number 2</h3>
            <h4>Subtopic</h4>
                <h5>Example or important chart</h5>
            <h4>Specific point</h4>
                <h5>Example or important chart</h5>
                    <h6>Highly specific example explaining this point</h6>

قد تكون هناك حالات محددة حيث يكون لديك H6 واحد فوق H4 ، ولكن بالنسبة للجزء الأكبر ، تحدد Google ومحركات البحث الأخرى أولوية الموضوع وقياس فعالية المحتوى للبحث عن نية باستخدام العناوين للتنقل في المحتوى الخاص بك.

علامات H1

قد تكون علامة H1 أبسط علامات عناوين HTML ، بينما تكون أيضًا واحدة من أكثر العلامات التي يساء فهمها. في معظم الحالات ، سترى عنوان H1 كعنوان لصفحة أو منشور معين. هذا ما ستعرضه محركات البحث (على الأرجح) في النتائج. من المحتمل أيضًا أن يعرض متصفحك هذا في شريط العنوان الخاص به ، على الرغم من أن العديد من مكونات تحسين محركات البحث (SEO) والتطبيقات المماثلة تتيح لك تغييره لتلك المكونات. لهذا السبب ، في حين أنه من المهم أن يكون لديك عبارة المفتاح المستهدفة في علامة H1 ، فهي ليست ضرورية بنسبة 100٪. اكتب العناوين والعناوين الخاصة بك بشكل دلالي لتغطية هدف بحث الزوار بدلاً من الكلمات الرئيسية التي تحشو علامات عناوين HTML.

تُظهر الصورة أعلاه علامة H1 تُستخدم كعنوان إدخال لمقال على مدونة Elegant Themes. إنها علامة H1 الوحيدة على الصفحة أيضًا. يشير هذا إلى أنه موضوع المحتوى على الصفحة.

لسنوات ، كانت الممارسة المعتادة هي أن يكون لديك علامة H1 واحدة (وواحدة فقط) في كل صفحة. بالنسبة للجزء الأكبر ، لا تزال هذه نصيحة جيدة. تقوم Google ومحركات البحث الأخرى بالزحف إلى صفحتك والبحث عن علامة H1. ثم يستخدمونها لتحديد الموضوع والعنوان والهيكل.

ومع ذلك ، قالت Google صراحةً أن وجود العديد من علامات عناوين H1 HTML على موقعك لا يؤدي إلى أي عقوبة لتحسين محركات البحث على الإطلاق. هذا لا يعني استخدامهم في كل مكان على موقعك ، ولكن ما يعنيه هو أنه يمكنك استخدام أكثر من واحدة في كل صفحة عند الحاجة.

متى يجب استخدام عناوين H1 متعددة

الغرض الوحيد من H1 هو الإشارة إلى قسم كامل حول موضوع واحد. هذا يعني أنه إذا كانت لديك صفحة واحدة تحتوي على أكثر من موضوع واحد ، فقد ترغب في استخدام H1 لكل موضوع جديد في تلك الصفحة. سيؤدي القيام بذلك إلى إخبار Google بأن صفحتك لا تتعلق فقط بالموضوع الموجود في العنوان. ولكن قد يكون هناك أيضًا قسم حول موضوع مختلف تمامًا (لكنه مرتبط) في الأسفل.

في مواقع الويب ذات الصفحة الواحدة ، يعد هذا مهمًا أيضًا لأنه قد يكون لديك قسم حول والتسعير والاتصال والمحفظة في تلك الصفحة الواحدة. إذن ، كيف تسمح لـ Google بمعرفة أن المحتوى الموجود داخل كل قسم هو وحدة مستقلة خاصة به؟

علامات H1 ، هذه هي الطريقة. أنت تتعامل مع كل قسم كما لو كان صفحة ويب مصغرة خاصة به ، باستخدام التسلسل الهرمي الذي ناقشناه أعلاه في كل قسم. بهذه الطريقة ، يرى Google العناوين أثناء تنقله عبر الصفحة ، ويمكنه بعد ذلك تحديد أي من هذه الأقسام يتم سحب المقتطفات المميزة منه (وما إلى ذلك) للإجابة على أسئلة الباحثين.

يمكنك أيضًا اختيار استخدام علامة H1 في كل مرة تستخدم فيها علامة قسم على موقعك ، ولكننا نقترح القيام بذلك فقط عندما يكون قسمًا ذا أهمية موازية لعنوان الصفحة ، بدلاً من قسم ثانوي.

علامات H2

من المرجح أن تكون علامات H2 ، الآن ، هي علامة عنوان HTML الأكثر استخدامًا في صفحاتك. ولسبب وجيه. تتكون معظم المنشورات والصفحات على الإنترنت من موضوع واحد مع عدد قليل من العناوين الفرعية. نوصي بأن يحتوي كل جزء من المحتوى الذي تقوم بإنشائه على علامة H2 واحدة على الأقل. يقترح Yoast ومكونات SEO الأخرى عنوانًا تقريبًا كل 300 كلمة. اعتمادًا على المحتوى الخاص بك ، هذا هو الغرض من علامات H2.

يفصلون الموضوعات الفرعية (أو الخطوات) لسهولة القراءة. على سبيل المثال ، تتكون معظم مشاركاتنا بشكل أساسي من عناوين H2 (مع H3 عند الاقتضاء). ذلك لأن مقالاتنا تتناول موضوعًا واحدًا ، حيث نحاول حل مشكلة واحدة. سيكون لدينا عنوان مثل How to Use OBS Studio to Livestream as H1 ، لكن العناوين الفرعية مثل "How to Get Start with OBS Studio" ستكون في H2.

تمثل علامة H2 الخطوات الفردية التي تتعلق مباشرة بموضوع H1. في هذا المنشور المحدد استخدمنا الهيكل التالي:

<h1>How to Use OBS Studio to Livestream</h1>
    <h2>What is OBS Studio?</h2>
        <h3>What about SLOBS?</h3>
    <h2>How to Get Started with OBS Studio</h2>
    <h2>OBS Studio Setup</h2>
        <h3>Setting Up a Scene in OBS Studio</h3>
        <h3>Adding Sources in OBS Studio</h3>
    <h2>Adjusting Sources Onscreen</h2>
        <h3>RMTP Keys and OBS Studio</h3>
    <h2>Wrapping Up</h2>

تتطرق علامات عنوان H2 في هذا المنشور إلى الأفكار الرئيسية ، مثل البدء وتنزيله ، وإعداد البرنامج الفعلي ، ثم تعديل كيفية ظهور شاشتك للمشاهدين. بينما توجد خطوات متضمنة أسفل تلك الموجودة في H3 أيضًا ، تشير عناوين H2 إلى الصورة واسعة النطاق للمقال. إنها طريقة عرض عالية المستوى يمكن للزواحف والقراء فحصها لمعرفة ما إذا كانت المقالة تحتوي على المعلومات التي يبحثون عنها.

بشكل عام ، سيكون لديك علامات H2 متعددة لكل مقالة ، بينما قد لا يكون لديك عناوين فرعية متداخلة تحتها. إذا كانت صفحتك أو منشورك حول موضوع واحد غير مقسم إلى أقسام بها أقسام فرعية مثل المثال أعلاه ، فسيكون من الأفضل أن يكون لديك علامات H2 متعددة بدلاً من H2 المتداخلة -> H3 -> H4 لأن هذه تشير إلى برامج الزحف "أنت" إعادة الغوص بشكل أعمق في موضوع suptopic بدلاً من التوسع في موضوع المنشور الأساسي.

علامات H3

من ناحية أخرى ، فإن علامات H3 هي المكان الذي يمكن لمقالاتك أن تتعمق فيه حقًا في تفاصيل موضوعك. يجب ألا تستخدم علامات H3 هذه مباشرةً ضمن H1. يرى Googlebots ومحركات البحث أنها عناوين فرعية تمامًا. في حين يتم قبول H2 كعنوان أساسي للأقسام داخل مقال واحد (مع إعلان H1 عن الموضوع الرئيسي كعنوان ، تذكر).

إذا نظرت عن كثب إلى الصورة أعلاه ، فسترى أن التصميم والحجم الفعليين بين علامتي H2 و H3 لا يختلفان بشكل كبير. السبب هو أننا لا نريدك أن تفترض من خلال المسح أن أي نقطة نصنعها في H3 أقل أهمية من H2. لأنه ليس كذلك.

إنه أصغر حجمًا للإشارة إلى أنها نقطة تابعة لـ H2 ، بدلاً من ارتباط مباشر بالموضوع العام ، وهو الأكثر أهمية من وجهة نظر هيكلية فيما يتعلق بـ SEO لمقالك. بالنسبة للقراء من البشر ، بدلاً من الروبوتات ، فإن التمييز المرئي يساعد ببساطة في نقلهم إلى أسفل الصفحة وتقسيم المعلومات لتحليلها بسهولة أكبر.

علامات H4، H5، H6

لقد جمعناها معًا لسبب ما. بشكل عام ، ستتعرض لضغوط شديدة للعثور على أي مواقع تستفيد بشكل كامل من مجموعة H1 إلى H6 من علامات عناوين HTML. إلى حد بعيد ، الهيكل الأكثر شيوعًا هو H1 إلى H3. تمامًا كما لو كنت نادرًا ما ترى مخطط محتوى يتجاوز المستوى الثاني المتداخل.

I. Idea 
    A. Subpoint
        1. Detail
II. Idea
	A. Subpoint
		1. Detail
III. Idea

H4

بالنسبة للجزء الأكبر ، تخدم علامة H4 نفس الغرض مثل H3. ستستخدمها للخوض في التفاصيل للخطوات والأمثلة ، ولكن دائمًا ما تكون متداخلة أسفل عناوينك الرئيسية. يقوم المصممون عمومًا بتصميمها باستخدام CSS أصغر من H3. إنهم يميلون إلى رؤية استخدام محدود في إنشاء المحتوى العادي. يميل الموضوع إلى أن يكون متعمقًا للغاية إذا كانت الأفكار بحاجة إلى تقسيم بحيث تكون هناك حاجة إلى علامة عنوان H4.

H5 و H6

يمكنك استخدام عناوين H5 و H6 بطريقتين مختلفتين.

الطريق الأول

(على سبيل المثال فقط ، قمنا بتقسيم هذا القسم المعين إلى أجزاء مختلفة من خلال العنوان ، ونحن الآن تحت H4 لأنه موضوع فرعي للمقالة الرئيسية.)

غالبًا ما تُستخدم هذه العناوين في جداول المحتويات والقوائم المماثلة ، على الرغم من أن وظيفتها الرئيسية هي من الناحية الفنية نفس الوظائف الأخرى ، فهي تحدد الموضوعات ذات الأهمية التنازلية في جميع أنحاء الصفحة. سيكون من النادر جدًا العثور على مستند يحتوي على مجموعة كاملة من العناوين وصولاً إلى H6.

الطريقة الثانية

يستخدم بعض الأشخاص علامات H5 و H6 كعناوين تنسيق "تخصص". سيطبقون CSS خاصًا على هاتين العلامتين لعناوين HTML التي تختلف تمامًا عن H1 إلى H4. يمكنك بعد ذلك استخدامها للفت الانتباه إلى الموضوعات والأفكار التي قد يتم تجاهلها بخلاف ذلك.

هذه ليست أفضل ممارسة تقنيًا ، لأن العناوين هرمية. ومع ذلك ، إذا كان موقعك منظمًا جيدًا بشكل عام وكنت تستخدم H5 و H6 بشكل مقتصد كأنماط خاصة في صفحات أو منشورات فردية معينة ، فمن المؤكد أنك لن تحصل على أي نتائج لتحسين محركات البحث.

فقط تذكر أنه حتى عند استخدامها لتنسيق خاص ، فإنك لا تخرج عن التسلسل الهرمي. احتفظ بها بالترتيب. لذلك إذا كنت تستخدم H6 لتصميم عنوان فرعي ، فتأكد من أن العنوان التالي الذي تستخدمه هو H1 أو H2 لإظهار أنك قد رجعت إلى الهيكل القياسي.

ما لا يجب فعله مع علامات عناوين HTML

لا تقم ببناء صفحة واحدة مع التسلسل الهرمي الكامل للعناوين حتى النهاية. أنت أفضل حالًا باستخدام H1 لعنوان وجميع H2s ، بدلاً من أن يتم تضمين كل عنوان متتالي.

نعم:

<h1>Title</h1>
    <h2>Main Point Number 1</h2>
    <h2>Main Point Number 2</h2>
    <h2>Main Point Number 3</h2>
    <h2>Main Point Number 4</h2>

لا:

<h1>Title</h1>
    <h2>Point Number 2</h2>
    <h3>Point Number 3</h3>
    <h4>Point Number 4</h4>
    <h5>Point Number 5</h5>
    <h6>Point Number 6</h6>

بالإضافة إلى ذلك ، لا تريد استخدام العناوين عشوائياً. استخدمهم بالترتيب فقط. وإلا فلن يكون لدى برامج الزحف أي فكرة عن كيفية التنقل في صفحتك ، ولن يكون لدى برامج إمكانية الوصول أي فكرة.

لا:

<h1>Title</h1>
    <h3>Point Number 2</h3>
    <h2>Point Number 3</h2>
    <h6>Point Number 4</h6>
    <h5>Point Number 5</h5>
    <h4>Point Number 6</h4>

بشكل عام ، يمكنك افتراض أن الزاحف سيعرف أنك خرجت من قسم فرعي عندما يعثر على H1 أو H2 التاليين. في مقتطف الشفرة أعلاه ، ستواجه برامج الزحف والروبوتات صعوبة في تحليل بنية المعلومات.

الختم بعلامات عناوين HTML

ونرى؟ لقد عدنا إلى H2 متجهًا لإنهاء الأمور. تعد علامات العناوين عنصرًا مهمًا في كل موقع ويب واحد. يمكن أن يؤدي استخدامها بشكل صحيح إلى زيادة تصنيفات محرك البحث ، بالإضافة إلى تجربة المستخدم لموقعك حيث سيتمكن الزوار من العثور بسهولة أكبر على المعلومات التي يبحثون عنها في المحتوى الخاص بك. تذكر أن تتأكد من عدم وضع الكثير من الكلمات الرئيسية في عناوينك. على الرغم من أنه من الجيد تضمين الكلمات الرئيسية أو العبارات التي تناقشها للتأكد من أن أفكارك واضحة ، إلا أن Googlebots وغيرها ذكية للغاية ويمكنها معرفة متى قمت بتبديل الموضوعات أو عندما تكون في نفس الموضوع. بشكل عام ، يعد استخدام علامات عناوين HTML أمرًا مهمًا للغاية ، ولكن إذا وضعت بعض الأشياء في الاعتبار ، فستتألق مواقعك في أي وقت من الأوقات.

هل كنت تستخدم علامات عناوين HTML بشكل صحيح؟

المادة مميزة صورة من VectorV / shutterstock.com