علامات الرأس: ما هي وكيفية استخدامها

عندما بدأت التدوين لأول مرة، لم تكن لدي أي فكرة عن كيفية تنظيم منشوراتي لتصنيفها في محركات البحث، أو حتى سبب أهميتها.

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

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

فيما يلي دليل سريع حول علامات الرأس والغرض الذي يتم استخدامها من أجله:

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

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

كما يمكنك التخمين من الدليل أعلاه، يشير الرقم إلى العلاقة الهرمية بين كل منها (حيث يكون H1 هو الأكثر أهمية، وH2 أقل أهمية، وهكذا).

فيما يلي مثال لكيفية ظهور هذه البنية الهرمية في مخطط المدونة:

الآن بعد أن فهمت أن علامات الرأس توفر بنية للصفحة، فلنتحدث عنها بمزيد من التحديد، بدءًا من علامة H1. 

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

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

للتوضيح، علامة الرأس في المثال أدناه هي العنوان، "الدليل النهائي لتسويق المنتجات في عام 2021".

يتم تعيين العنوان كـ H1 للصفحة باستخدام كود HTML. قد يظهر هذا الرمز في الكود المصدري لصفحة الويب كما يلي:

انظر القلم H1 مثال 1 بقلم كريستينا بيريكوني (hubspot) على CodePen.

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

كم عدد علامات الرأس التي يدعمها HTML؟

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

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

فيما يلي لقطة شاشة لمنشور مدونة HubSpot مع أمثلة لعلامات الرؤوس المشار إليها بالأسهم:

كما ترون، تبدو كل علامة رأس مختلفة بشكل مرئي، ويتم استخدام كل علامة رأس لفكرة جديدة.

الآن بعد أن عرفت المزيد عن ماهية علامات الرأس، دعنا نتعرف على كيفية استخدامها لتحسين محركات البحث.

علامات الرأس وتحسين محركات البحث

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

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

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

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

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

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

ليس عليك أن تفكر في الكلمات الرئيسية بنفسك أيضًا - في الواقع، يمكنك القيام ببعض الأمور بسهولة الكلمات الرئيسية للبحث لمساعدتك أو البحث في أدوات البحث عن الكلمات الرئيسية مثل SEMRush or Ahrefs. فقط تأكد من أن علامات الرأس الخاصة بك صديقة لكل من البشر وروبوتات محرك البحث.

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

إذا لم تكن أقسامك منطقية، فقد لا يتم تصنيف صفحتك. فكر في الأقسام الموجودة في هذا المنشور، هل تعتقد أنه تم تقسيمها بطريقة سهلة القراءة؟

كيفية إضافة علامات الرأس في HTML

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

على سبيل المثال، إذا كان h1 الخاص بك هو "الدليل لبدء التجارة الإلكترونية," انها تبدو مثل هذا:

انظر القلم H1 مثال 2 بقلم كريستينا بيريكوني (hubspot) على CodePen.

سيعمل هذا مع HTML4 أو أقدم. إذا كنت تعمل باستخدام HTML5، فقد تضطر إلى استخدام سطر مختلف قليلاً للحصول على نفس النتيجة. التغيير هو إعطاء تنبيه لـ Google حول ماهية H1:

انظر القلم H1 مثال 3 بقلم كريستينا بيريكوني (hubspot) على CodePen.

يمكنك أيضًا تضمين علامات الترقيم بين العلامتين. على سبيل المثال، قد يكون لديك:

انظر القلم H3 مثال 1 بقلم كريستينا بيريكوني (hubspot) على CodePen.

تذكر أن Google سيقوم بمسح HTML لعلامات الرؤوس لإعلام متصفحات الويب بموضوع صفحتك، لذلك من المهم الاطلاع عليها ومعرفة ما إذا كانت رؤوسك في HTML منسقة بشكل صحيح.

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

في المرة التالية التي تقوم فيها بإنشاء منشور لموقعك على الويب، تحقق مما إذا كانت إضافة علامات الرأس ذات الصلة تؤثر على تحسين محركات البحث، وكيفية فهم القراء للمعلومات.

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

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

ملاحظة المحرر: تم نشر هذا المنشور في الأصل في يناير 2020 وتم تحديثه للشمول.

المصدر: https://blog.hubspot.com/marketing/header-tags