لطالما كان استخدام علامة H ، وخاصة استخدام H1 ، مشكلة مثيرة للجدل ، كما أنه سؤال يستحق دراستنا. بناءً على تجربة أسلافي ، كتبت هذا المقال بناءً على فهمي لعلامات H ، على أمل أن يكون مفيدًا للجميع. ما هي علامة H ؟
يشير W3C إلى أن علامات H1-H6 يمكن أن تحدد العناوين. H1 يحدد أكبر لقب. H6 يحدد أصغر لقب.
H1 ، H2 ، H3 ، H4 ، H5 ، H6 ، كعلامات العنوان وتناقص وفقًا للأهمية. أعتقد أنه من الضروري اتباع مثل هذه المبادئ ، والتي يمكن أن تجعل العلاقات الهرمية للصفحة أكثر وضوحًا ، والسماح لمحركات البحث بالزحف بشكل أفضل وتحليل محتوى الموضوع في الصفحة ، وما إلى ذلك لفهم أفضل ، يرجى الاطلاع على الرمز التالي:
<Body> <h1> العنوان من المستوى الأول </h1> <p> الفقرة </p> <viv> <h2> عنوان المستوى الثاني </h2> <p> ...
يتناقص النمط الافتراضي للمتصفح أيضًا على أساس الأهمية ، ويتغير حجم الخط من كبير إلى صغير من H1 إلى H6. هناك بعض الاختلافات في الأنماط في متصفحات مختلفة. بسبب هذا الاختلاف ، عادة ما نستخدم CSS لتوحيدها في التصميم.
كيف تستخدمه؟في الوقت الحاضر ، تحب العديد من مواقع الويب (بما في ذلك مواقع الويب المعروفة مثل Taobao و Sina و Sohu) استخدام H1 على الشعار ، كما هو موضح في الصورة:
لا يخلو السبب في أن الجميع يستخدمون هذا ، ولكن في الواقع هناك الكثير من المزايا: إنه يلخص محتوى الصفحة بأكملها ، والشعار قريب جدًا من الجسم ، مما يجعل من المريح لمحركات البحث الحصول على الموضوع أسرع ، ومن حيث الدلالات ، يكون أيضًا أكثر دقة.
بالطبع ، لا تستخدم جميع مواقع الويب H1 على الشعار. استخدام Netease مثال أكثر خاصة:
يقوم Netease بتعيين الشاشة: لا يوجد نمط لإخفائه ، والذي لا يحل فقط تناقض عدم معرفة مكان وضع H1 ، ولكن أيضًا يلعب دور تحسين تحسين محركات البحث (SEO) ، والذي يمكن القول أنه يقتل عصفورين بحجر واحد.
والصفحة الرئيسية لـ Tencent هي الأخبار الرئيسية ، كما هو موضح في الصورة:
من المثال أعلاه ، يمكننا أن نرى أن استخدام H1 يختلف عن مواقع الويب الرئيسية. أين تضعه على H1؟ لقد كانت دائمًا مشكلة مثيرة للجدل ، لكنني لا أعتقد أن هناك إجابة مطلقة على مكان وضعها. أعتقد أنه ينبغي النظر فيه بناءً على عوامل مثل عوامل تحديد المواقع والنوع والبحث عن المستخدم في صفحة الويب. على سبيل المثال ، بالنسبة لمواقع الأخبار ، يمكنك وضع H1 على الأخبار الرئيسية ؛ لمواقع البوابة الشاملة ، يمكنك وضع H1 على الشعار ؛ إذا تمكن موقع الشركة من وضع H1 على الشعار ، لأن المستخدمين يرغبون عمومًا في البحث عن اسم الشركة ؛ إذا كان هناك شعارات موقع ويب ، فيمكنك أيضًا وضع H1 على الشعار ، وهو أيضًا خيار جيد. باختصار ، اختيار واحد يناسب الأفضل هو الأفضل.
فيما يتعلق H2 ، أحب عادة استخدامه على العمود الكبير من الصفحة الرئيسية ، كما هو موضح في الصورة:
بالنسبة لصفحة المحتوى ، اعتدت على إعطاء H2 لعنوان المقالة ، ويتم تمثيل عنوان العمود بواسطة H3 ، كما هو موضح في الشكل:
يستخدم H3 في الغالب لعناوين الأعمدة ، كما هو موضح في الشكل:
لا تحتوي العلامة H المستخدمة على الصفحة الرئيسية لمنتجات R&F على علاقات هرمية واضحة فحسب ، بل تبرز أيضًا أهمية محتوى المنتج ، وهو أيضًا مفيد جدًا لمحركات البحث.
المثال التالي مثير للغاية أيضًا ، كما هو موضح في الشكل:
يستخدم عنوان العمود H2 ، ويستخدم عنوان الأخبار H1. إذا تم عكس طلبهم وفقًا للعلاقات الهرمية ، فهذا ليس خطأ. عند استخدام علامات H فعليًا ، يمكننا أيضًا تحديدها بناءً على أهمية المحتوى. لذلك ، فقط عن طريق تطبيق النظريات الأساسية يمكن زيادة تأثيرها.
من الأمثلة المذكورة أعلاه ، ليس من الصعب أن نرى أن استخدام علامة H مرنة للغاية ولا يقتصر على هذه الاستخدامات. في تطبيقنا ، نحتاج فقط إلى اتباع مبدأ تقليل الأهمية والتعلم من مثال واحد وتطبيقه على جوانب أخرى. وينطبق الشيء نفسه على H4-H6.
لخص بعضاستنادًا إلى فهم وتطبيق علامات H حسب المواد المرجعية ، وخبراء الإنتاج الأمامي ، ومواقع الويب المعروفة ، وما إلى ذلك ، قمت بتلخيص المواصفات التالية ، على أمل تقديم بعض القيمة المرجعية.
H1 عنوان المستوى الأول
إنه يمثل الأولوية القصوى ، وموقفه مهم مثل موضع الكلمات الرئيسية في الصفحة. يتم استخدامه عمومًا في عناوين موقع الويب أو العناوين الرئيسية ، ويتم استخدام بعض مواقع الويب الكبيرة أيضًا في الشعارات. على الرغم من أن رموز H1 يمكن أن تكون مكتوبة على خلاف ، إلا أنها في الواقع فريدة من نوعها. من الأفضل الظهور مرة واحدة فقط أو لا في صفحة.
عنوان H2 المستوى 2
يظهر بشكل أساسي في عنوان المقالة وعنوان عمود المحتوى الرئيسي للصفحة. هيكل العمود الثلاثة عمومًا في الوسط ، ويكون هيكل العمودتين بشكل عام على الجانب المهم. يمكن استخدامها مع H3.
H3 المستوى الثالث العنوان
الشريط الجانبي للصفحة الرئيسية العامة. H4 هو مساعده ويبدو في كثير من الأحيان.
لا يمكن أن تكون علاقة مستوى الصفحة عميقة جدًا ، لذا يبدو أن H4 و H5 و H6 أقل عمومًا.