علامات الرأس: دليل بسيط (لكن كامل) لعلامات عناوين HTML H1 و H2 و H3 لتحسين محركات البحث
نشرت: 2020-08-25
هذا دليل كامل لعلامات الرأس في عام 2021.
في هذا الدليل الجديد ، ستتعلم بالضبط كيفية استخدام علامات H1 إلى H6 للحصول على تصنيفات أعلى لمحركات البحث ، حتى إذا كنت جديدًا على علامات رأس تحسين محركات البحث (SEO) ، أو تم خداعك (بواسطة Google) في التفكير في أن علامات العنوان لا تفعل ذلك. الشغل.
أنت على وشك تعلم كل ما تحتاج لمعرفته حول عناصر عناوين HTML من ماهيتها (بصراحة) إلى استراتيجيات العنوان المتقدمة التي ثبت أنها تزيد من الوصول إلى المحتوى الخاص بك والمشاركة فيه.
فيما يلي نظرة عامة سريعة على ما يتم تغطيته:
- ما هي علامات العنوان وكيفية استخدامها بالضبط
- الفرق بين علامات H1 و H2 و H3 ومتى يكون من المناسب استخدام كل نوع
- خمسة أسباب تجعل علامات العنوان ضرورية في الوقت الحالي
- تشريح تسلسل هرمي لعلامة الرأس منظم تمامًا
- كيفية إنشاء علامات H1 إلى H6 التي تقدم تصنيفات أعلى (ومبيعات)
- غيرها الكثير
هيا بنا نبدأ.
تنزيل: قائمة تحقق مجانية ستوضح لك بالضبط كيفية تنفيذ نصائح تحسين علامة الرأس الموجودة في هذا المنشور.
ما هي علامات العنوان؟ تعريف مجاني للمصطلحات اللغوية
بعبارات بسيطة:
علامات العنوان هي عناصر HTML تُستخدم لتعريف عناوين الصفحة.
يميزون العنوان <h1> والعناوين الفرعية <h2> إلى <h6> عن باقي المحتوى.
يحدد الرقم من 1 إلى 6 الأهمية والموقع الذي يحتله العنوان في التسلسل الهرمي العام لهيكل العنوان.
كما هو الحال مع معظم مصطلحات تحسين محركات البحث ، هناك جميع أنواع المرادفات التي يتم استخدامها بالتبادل لوصف العناوين:
علامات الرأس وعناوين HTML وعلامات H هي بعض الطرق الأخرى لوصف الشيء نفسه.
لذلك إذا كنت قد سمعت مصطلحات تحسين محركات البحث هذه من قبل ، فأنت تعرف الآن ما تعنيه.
كلهم مجرد علامات عناوين بأسماء مختلفة.
من ناحية أخرى ، " رأس HTML " هو قسم الكود بين عنصر <header> على صفحة الويب.
إنها حاوية للمحتوى التمهيدي مثل التنقل والشعار ومعلومات المؤلف وتفاصيل العنوان.
بمعنى آخر ، إنها حاوية يمكن أن تتضمن علامات العنوان الخاصة بك (من بين أشياء أخرى).
يجب أيضًا عدم الخلط بين علامات العنوان والعنصر < head > في تعليمات HTML البرمجية.
يعد < head > حاوية للبيانات الوصفية (بيانات حول البيانات) ويتم وضعها بين علامة < html > وعلامة <body> في صفحة الويب الخاصة بك. لا يتم عرض محتوياتها على الصفحة ولكنها مهمة لتحسين محركات البحث.
إنه المكان الموجود في التعليمات البرمجية الخاصة بك حيث يوجد عنوان صفحتك ، ووصف Meta ، والنصوص البرمجية مثل Google Analytics.
مازلت معي؟
عظيم ، دعنا نكمل.
ما هي علامة H1؟
لنفترض أنك لا تعرف شيئًا عن H1s.
سوف أشارك تعريفًا بسيطًا حقًا معك:
H1 هي علامة HTML تشير إلى العنوان الأساسي في صفحة ويب.
دعونا نفك ذلك.
- إنه عنصر HTML ، مما يعني أن علامة H1 موجودة داخل كود موقع الويب الخاص بك.
- يتم استخدامه لترميز العنوان الرئيسي ، وعادةً ما يكون أول رأس مرئي على الصفحة.
لإبراز النص ، عادةً ما يتم عرض علامة H1 بشكل أكبر وأكثر بروزًا من بقية النص على صفحتك أو منشورك.
أسهل طريقة لفهم كيفية استخدام علامة العنوان 1 هي تخيل أنك تكتب مخططًا تفصيليًا لمستند.
يجب أن يكون العنوان الرئيسي للمستند الخاص بك هو <h1>.
يجب أن يمثل الموضوع العام للمستند وأن يتم عرضه في البداية كخط كبير.
مثال على علامة H1:
باستخدام المثال أعلاه من Smart Passive Income ، فإن علامة H1 لها قيمة "Learn Ethical Affiliate Marketing."
تظهر علامة H1 عند عرضها بتنسيق HTML على النحو التالي:
<h1>Learn Ethical Affiliate Marketing</h1>بالطبع ، قد تحتاج صفحات موقع الويب الخاص بك إلى أكثر من عنوان.
هذا هو المكان الذي تأتي فيه علامات العناوين الأخرى.
ما هي علامة H2؟
بينما يتم استخدام علامة H1 الخاصة بك للعنوان الرئيسي للمستند الخاص بك ؛
يتم تغليف نقاطك الرئيسية في عناوين فرعية تعرف باسم H2s.
بعبارات أخرى:
تحدد العلامة <h2> عناوين المستوى الثاني في صفحة الويب الخاصة بك.
لكن علامات العنوان لا تتوقف عند H2s.
تستخدم النقاط الفرعية الموجودة أسفل علامات <h2> علامات العنوان <h3>:
والنقاط الفرعية الموجودة أسفل علامات <h3> تستخدم علامات العنوان <h4>.
يمكن أن يستمر هذا التسلسل طوال الطريق حتى علامات <h6> ، والتي تعتبر الأقل أهمية في التسلسل الهرمي لعلامة الرأس.
ومع ذلك:
من النادر جدًا أن تكتب محتوى عميقًا بما يكفي لتحتاج إلى علامات H4 و H5 و H6.
(إلا إذا كان المحتوى الخاص بك طويلاً جدًا وتقنيًا).
مثل هذا المنشور على تحسين محركات البحث على الصور ، فإن معظم منشورات مدونتي يزيد طولها عن 5000 كلمة.
ومع ذلك ، فإن عناويني الفرعية تتكون من مجرد H2s و H3s:
لذلك دعونا نختتم بعلامات H2:
يتم استخدام علامات العناوين الفرعية H2 لتقسيم المحتوى وجعله قابلاً للفحص والقراءة.
يتم استخدام H2s لتسليط الضوء على أجزاء مهمة من المعلومات وتوجيه الأقسام الفرعية على صفحتك.
عند الضرورة ، يمكنك استخدام علامات H3 كعناوين للنقاط الفرعية أسفل H2s.
باستخدام المثال أعلاه ، هذا ما تبدو عليه علامة H2 في كود HTML:
<h2>How To Claim Your Business On Google</h2>فهمتك؟ جيد.
بعد ذلك ، سوف نتعمق أكثر في علامات العناوين وكيفية ترميزها في HTML.
علامات العناوين في HTML: وأهمية H1
علامات العنوان وعلى وجه الخصوص ، علامة H1 ، لها وظيفة أساسية داخل بنية HTML.
دعني أوضح:
يمكن تعريف ملف HTML على أنه مجموعة من العقد ، حيث تكون علامة العنوان هي نقطة البداية التي تتفرع منها العقد الأخرى.
لذلك ، يجب أن يحتوي ملف HTML (من الناحية النظرية) على عنوان H1 واحد فقط.
لماذا ا؟ لأن علامة H1 هي الجذر الذي تبدأ منه جميع العقد الأخرى.
في المقابل ، يمكن استخدام الرؤوس الأدنى بالترتيب (H2 إلى H6) كلما رغبت في ذلك.
ومع ذلك ، يجب عليهم الحفاظ على تسلسل هرمي منطقي - المزيد عن ذلك لاحقًا.
من وجهة نظر التعليمات البرمجية ، تُستخدم علامات العنوان لعرض النص فقط.
على هذا النحو ، يجب تحديد تنسيق العناوين في ملفات CSS لفصل التنسيق والمحتوى.
أمثلة على علامات العنوان وكيفية ترميزها بتنسيق HTML
ما يجعل علامة العنوان رأسًا داخل شفرة مواقع الويب الخاصة بك هو علامتا HTML بسيطتان:
علامة فتح <h> وعلامة إغلاق </ h>.
يوجد داخل هاتين العلامتين نص العنوان الذي تريد عرضه:
تبدو أسطر الكود الخاصة بالعنوان الذي يحتوي على عنوانين فرعيين كما يلي:
<h1>This is a heading</h2> <h2>This is a sub-heading</h2> <h3>This is a third sub-heading</h3>بالطبع ، لن يعرض رمز موقع الويب الخاص بك العناوين فقط.
سوف يحتوي على نسخة الجسم وعناصر أخرى أيضًا.
إليك ما يبدو عليه كود HTML مع سلسلة من العناوين ونسخة نصية مضمنة:
<h1>This is a heading</h1> <h2>Summary</h2> <p>Some text here...</p> <h2>Examples</h2> <h3>Example 1</h3> <p>Some text here...</p> <h3>Example 2</h3> <p>Some text here...</p> <h2>See also</h2> <p>Some text here...</p>ليس هناك الكثير لعناصر الكود أكثر من ذلك.
تذكر فقط:
تبدأ كل علامة عنوان بعلامة فتح <h> ويجب إغلاقها بعلامة نهاية </ h>.
يتم تحديد التسلسل الهرمي للعلامات (1-6) مباشرة بعد "h" ويجب تحديده في كل من علامات الفتح والختام.
تتم كتابة محتوى النص الخاص بك بين عنصري العلامة.
مع كل ما قيل:
ما لم تكن ترميزًا مخصصًا لصفحة ويب (ليس شيئًا أوصي به عمومًا) ، سيتم التعامل مع رمز HTML الخاص بعلامات العنوان بواسطة نظام إدارة المحتوى الخاص بك.
كيفية إضافة علامات H1 إلى H6 في ووردبريس
يعد WordPress أكثر أنظمة إدارة المحتوى شيوعًا على الويب.
وفقًا لـ WordCamp ، يوجد حاليًا أكثر من 75 مليون موقع يستخدم WordPress .
يمثل هذا حوالي 30٪ من جميع مواقع الويب على شبكة الويب العالمية.
ما يجعل WordPress شائعًا للغاية هو سهولة استخدام محرك البحث وسهولة استخدامه.
تعد إضافة وظائف تحسين محركات البحث مثل عناوين الصفحات المخصصة والروابط الثابتة والارتباطات التشعبية والصور المحسّنة أمرًا سهلاً في WordPress.
وكذلك يتم إضافة علامات العنوان إلى صفحة أو منشور.
هناك طريقتان أساسيتان لإضافة علامات العناوين في WordPress ؛ سأريكم كلاً من:
(أ). إضافة علامات H1 في ووردبريس عبر المحرر
أسهل طريقة لإضافة عناوين هي من خلال المحرر. إذا كنت تستخدم بالفعل محرر كتلة Gutenberg ، فانقر فوق الزر "+" وحدد "العنوان" ؛
من هناك ، يمكنك اختيار العنوان الذي تريد إضافته.
إذا كنت لا تزال تستخدم المحرر الكلاسيكي ، فهو بسيط أيضًا.
فقط تأكد من أنك في علامة التبويب المرئية للمحرر وانتقل إلى القائمة المنسدلة لنمط النص.
ثم حدد ببساطة "العنوان 1" أو "العنوان 2" ... أو أي عنوان آخر تريده من القائمة المنسدلة.
سهل ، هاه؟
الخيار التالي لإضافة علامات H1 إلى H6 في WordPress هو استخدام HTML.
(ب). إضافة علامات H1 في ووردبريس عبر المحرر
إذا كنت تميل إلى ذلك ، فمن الممكن أيضًا إضافة عناوين في WordPress باستخدام HTML.
أنا متأكد من أنك كنت تتابع ، لذا فأنت تعرف بالفعل كود HTML لـ <h1> و <h2> و <h3> وما إلى ذلك.
يبدأ بعلامة افتتاحية <h> وينتهي بعلامة إغلاق </ h> مع وضع نص العنوان في المنتصف:
لإضافة علامات <h1> إلى <h6> في WordPress باستخدام المحرر الكلاسيكي ، يجب أن تكون في علامة تبويب النص:
في محرر الكتلة ، يجب عليك التبديل للتحرير بتنسيق HTML.
للقيام بذلك ، انقر فوق النقاط الرأسية الثلاث في شريط أدوات الكتلة. ثم حدد خيار تحرير بتنسيق HTML.
مثل ذلك:
في أي من المحررين ، ما عليك سوى نسخ / لصق علامة العنوان التي تريد استخدامها من تلك الموجودة أدناه ، وتحديث نص العنوان الخاص بك ، وأنت على ما يرام.
<h1>This is an H1 heading</h1> <h2>This is an H2 sub-heading</h2> <h3>This is an H3 sub-heading</h3> <h4>This is an H4 sub-heading</h4> <h5>This is an H5 sub-heading</h5> <h6>This is an H6 sub-heading</h6>دعنا نحول انتباهنا بعد ذلك إلى Shopify.
كيفية إضافة (أو تغيير) H1 إلى علامات H6 في Shopify
منذ أن ظهرت على الساحة ، Shopify سرعان ما أصبحت منصة التجارة الإلكترونية المفضلة.
وفقًا لمحكمة الاستضافة ، يستخدم ما يقرب من نصف مليون موقع Shopify.
مثل WordPress ، ما يجعل Shopify أكثر جاذبية هو محوره المستخدم.
إن إدارة المنتجات وإضافة الصفحات والمشاركات وإزالتها كلها سهلة للغاية.
وكذلك يتم إضافة <H2> إلى علامات العنوان <H6>.
داخل Pages أو Posts Editor ، ما عليك سوى النقر فوق علامة تبويب التنسيق:
ثم حدد علامة العنوان التي تريدها:
كما هو الحال مع WordPress وأنظمة إدارة المحتوى الأخرى ، يوفر Shopify أيضًا محرر كود.
لإضافة عناوين إلى Shopify باستخدام محرر الكود ، انقر فوق الزر <> في نافذة المحرر وأضف رمز العنوان الخاص بك:
بسيط جدا!
من ناحية أخرى ، إذا كنت ترغب في إضافة وتحسين علامتي <H1> و <H2> على صفحات متجر Shopify الأخرى الخاصة بك ، مثل الصفحة الرئيسية أو صفحات المنتج ...
سيُطلب منك تعديل ملفات سمات Shopify الخاصة بك.
لحسن الحظ ، وضع دانيال سيم من Plugin Useful دليلاً مفيدًا حول ذلك هنا.
لماذا نستخدم العناوين؟
لذلك قمنا بتغطية "كيفية" إضافة علامات العناوين.
لكن ، مع ذلك ، ربما تتساءل "لماذا" تستخدم العناوين في المقام الأول؟
خاصةً عندما وصفت Google استخدام العناوين لتحسين محركات البحث على أنها مبالغ فيها:
على الرغم مما تقوله Google ، هناك (في الواقع) العديد من الأسباب المهمة التي تجعلك تستخدم علامات العناوين:
1. تعمل علامات العناوين على تحسين إمكانية الوصول - مما يمنح المحتوى الخاص بك وصولاً أوسع
إذا كنت تريد أن يكون المحتوى الخاص بك في متناول الجميع ، بما في ذلك القراء ضعاف البصر ، فإن علامات العناوين مفيدة بشكل لا يصدق.
تستخدم تقنية قراءة الشاشة H1s وعلامات العناوين الأخرى لمساعدة المستخدمين على التنقل في المحتوى والمسح الضوئي والبحث في الصفحة.
كما تعلمت بالفعل ، تم تضمين العناوين في HTML ، مما يعني:
يمكن لقارئ الشاشة استخدام HTML لتحديد بنية المحتوى وقراءة العناوين بصوت عالٍ.
وهذا بدوره يساعد ضعاف البصر والمكفوفين في الحصول على نظرة عامة حول موضوع المقالة (دون الحاجة إلى الاستماع من خلال كلمة بكلمة).
يمكنهم بعد ذلك أن يقرروا قراءة المقال بالكامل أم لا.
ما هو أكثر:
ستوفر برامج قراءة الشاشة اختصارات للانتقال من عنوان إلى آخر.
بمعنى آخر ، يتم استخدام علامات العناوين من قبل ضعاف البصر للتنقل أيضًا.
2. تستخدم Google H1s بدلاً من علامات العنوان (حيثما كان ذلك مناسبًا)
في بعض الحالات النادرة (ليست كذلك) ؛
على سبيل المثال عندما يتعذر على Google العثور على علامة العنوان الخاصة بك أو معالجتها.
قد تختار Google استخراج عنوان من الجزء التالي الأكثر صلة بصفحتك.
في كثير من الحالات ، ستكون هذه علامة العنوان 1 لأنها أبرز عنصر نص متاح.
في بعض النواحي ، تخدم علامة H1 للصفحة غرضًا مشابهًا لعلامة العنوان الخاصة بها.
يجب أن تفي بقصد البحث ، وتخبر القراء بما يمكنهم توقعه من الصفحة ، وتحمس المستخدمين لقراءة المزيد.
أنت تعلم الآن أن Google يمكنها اختيار عرض H1 الخاص بك في SERPs ؛ تأكد من صياغة عنوان مقنع يستحق النقر عليه.
سأشارك النصائح حول كيفية القيام بذلك لاحقًا.
3. يتم استخدام العناوين في المقتطفات المميزة
تحقق من هذا المقتطف المميز.
إنها قائمة مقتطفات تحتوي على أفضل مدونات الوسائط الاجتماعية لعام 2020.
ومن أين تعتقد أنه تم سحب هذا النص؟
انت حزرتها. عناوين صفحة الترتيب:
إذا كنت ترغب في الظهور في العدد المتزايد من المقتطفات المميزة ، فإن دمج العناوين في صفحتك أمر بالغ الأهمية.
وهو ما يقودني إلى السبب التالي:
4. تستخدم Google العناوين لتفسير المحتوى الخاص بك (وتعزيز الترتيب في الترتيب).
سأوضح هذه النقطة ببيانين من Google.
أولاً ، من جون مولر ، كبير محللي اتجاهات مشرفي المواقع في Google ، والذي قال:
"نحن نستخدم علامات H لفهم بنية النص على الصفحة بشكل أفضل."
وثانيًا ، من مات كاتس ، الذي كان سابقًا جزءًا من فريق جودة البحث في Google.
"تبحث Google في الكثير من الأشياء المختلفة. نحن ننظر إلى أكثر من 200 شيء ، نظام ترتيب الصفحات هو واحد منهم فقط. عندما نصنف الأشياء ، نستخدم أشياء في العنوان ، في عنوان URL ، حتى أنك تعرف الأشياء التي تم تمييزها مثل علامات h1 وأشياء من هذا القبيل. "
مات كاتس ، جوجل
للتوسع في هذا الأمر أكثر:
يستخدم Google عناوين الصفحة (بشكل أفضل) لتفسير محتوى المحتوى.
نظرًا لأن العنوان يجب أن يسبق عادةً كتلة المحتوى:
ستعرض Google عنوانًا للتعرف على المحتوى التالي: نص أو صورة أو فيديو.
إذا كان العنوان والنسخة الأساسية متوافقتين ، يمكن أن تكون Google أكثر ثقة في أن المحتوى الخاص بك سيقدم إجابات ذات صلة على الاستفسارات (المتعلقة بالمحتوى).
وفي المقابل ، ستحصل على تعزيز طفيف في الترتيب.
مع ذلك ، إلى السبب الخامس لاستخدام العناوين.
5. يرتبط استخدام العنوان بترتيبات أعلى
أظهرت كل دراسة ارتباط مُحسّنات محرّكات البحث التي رأيتها تقريبًا ارتباطًا صغيرًا ولكن إيجابيًا بين التصنيفات الأعلى والعناوين على الصفحة.
خذ هذا من SEM Rush:
وجدت أن وجود مقالات جيدة التنظيم (باستخدام علامات H2 و H3) من المرجح أن تكون عالية الأداء.
وهذا من Moz:
وجدت دراسة عوامل التصنيف Moz أن الصفحات التي تحتوي على الكلمة الرئيسية المضمنة في علامة العنوان H1 من المرجح أن تحصل على ترتيب أعلى.
في حين أن الترجيح المعطى لعلامات العناوين من خلال هذه الدراسات معتدل فقط ، و ؛
ستجادل بعض مُحسّنات محرّكات البحث (عن حق) في أن ارتباط علامة العنوان بالتصنيفات الأعلى لا يثبت أنها تسبب المزيد من التصنيفات العليا ، فأنا متأكد من أنك ستتفق معي:
إن استخدام علامات العناوين المحسّنة جيدًا يستحق كل هذا العناء.
أو هو؟
هل تعمل علامات H1 حقًا (تجربة تحسين محركات البحث)؟
يقدم كل دليل لتحسين محركات البحث نفس النصيحة:
ولكن ، لا تتبع جميع المدونات ما يسمى بأفضل ممارسات تحسين محركات البحث (SEO) ، حيث يعتبر Moz واحدًا منها.
يعد Moz.com أحد أكثر مواقع الويب الموثوقة (والتي يتم تداولها بشكل كبير) حول موضوع تحسين محركات البحث ، ومع ذلك:
لا تحتوي مدونة Moz's على علامة H1 وتستخدم علامة H2 لعنوانها الرئيسي بدلاً من ذلك.
بعد ملاحظة أن مدونة Moz تستخدم علامات H2 للعناوين الرئيسية (بدلاً من H1s) ، قام Craig Bradford من Distilled بالتواصل مع Cyrus Shepard في Moz.
قرر Craig و Cyrus معًا إجراء تجربة نأمل أن تحدد مرة واحدة وإلى الأبد ما إذا كانت علامات H1 تؤثر على تصنيفات محرك البحث.
للقيام بذلك ، ابتكروا اختبار تقسيم 50/50 لعناوين مدونة Moz باستخدام SearchPilot ؛ أداة اختبار انقسام SEO A / B.
في التجربة ، تم تغيير نصف عناوين Moz الرئيسية إلى H1s ، والنصف الآخر تم الاحتفاظ به على شكل H2s.
ثم قاموا بقياس أي اختلاف في حركة المرور العضوية بين المجموعتين.
ماذا حدث برأيك عندما تم تغيير العناوين الرئيسية من علامة العنوان غير الصحيحة (H2) إلى العنوان الصحيح (H1)؟
الاجابة:
ليس كثيرا على الاطلاق!
بعد ثمانية أسابيع من جمع البيانات ، قرروا:
لم يحدث تغيير عناوين منشورات المدونة من H2s إلى H1s أي فرق ذي دلالة إحصائية.
ماذا يمكن أن نستنتج من هذا؟
مجرد أن Google قادرة بنفس القدر على تحديد سياق الصفحة إذا كان عنوانك الرئيسي ملفوفًا في H1 أو H2.
هل هذا يعني أنه يجب عليك التخلي عن أفضل الممارسات والتخلص من H1s؟
لا على الاطلاق.
هيكل العنوان: تشريح تسلسل هرمي لعلامة الرأس منظم تمامًا
كما أشرت بالفعل:
تشير العناوين إلى تنظيم المحتوى على صفحتك.
واجعل المحتوى الخاص بك أكثر قابلية للقراء.
لذلك ، على الرغم من أن Google قد ذكرت أنه حتى بدون "علامات العناوين" ، يمكنهم تحديد ما هو ملحوظ في الصفحة ...
فائدة تحسين محركات البحث لاستخدام علامات العناوين وتنظيمها بشكل صحيح تجعل أي جهد إضافي مطلوب يفوق عدم استخدامها على الإطلاق ...
يصبح السؤال بعد ذلك:
كيفية هيكلة علامات العنوان: تسلسل هرمي بسيط (منطقي) لصفحة ويب
عندما يتعلق الأمر بهيكلة العناوين ، فهناك بعض القواعد البسيطة التي يجب اتباعها:
- عش العناوين حسب رتبتها (أو مستواها)
- العنوان الأكثر أهمية يحتل المرتبة الأولى (<h1>)
- العنوان الأقل أهمية له أدنى رتبة (<h6>)
- تبدأ العناوين ذات الرتبة المتساوية أو الأعلى قسمًا جديدًا
- تبدأ العناوين ذات الترتيب الأدنى أقسامًا فرعية جديدة تشكل جزءًا من القسم الأعلى مرتبة
عند تطبيق هذه القواعد ، ضع المستخدم في الاعتبار.
أولاً ، المستخدم المرئي الذي سيقوم بمسح صفحتك ضوئيًا ؛
هل يجعل التسلسل الهرمي للعلامات بنية الصفحة أكثر وضوحًا ويسهل مسحها ضوئيًا؟
ثانيا المستخدم ضعاف البصر.
هل يصور التسلسل الهرمي للعلامات كل قسم (والصفحة ككل) مما يسمح للمستخدمين المكفوفين بالانتقال مباشرة إلى الجزء الذي يثير اهتمامهم أكثر؟
إذا كنت ستقرأ علامات الرأس بصوت عالٍ ، فهل سيتعرف المستخدم (على وجه التحديد) على المعلومات التي تحتوي عليها صفحتك وكيف يتم تنظيمها؟
إذا أجبت بـ "لا" على أي من هذه الأسئلة ، فإن هيكلك يحتاج إلى إعادة تفكير.
دعنا نستخدم مثالا:
<h3>Quick Links</h3> <h3>Photography Tutorials</h3> <h1>Setting the Exposure Manually on a Camera</h1> <h3>Set the ISO</h3> <h4>The effect of ISO on image quality</h4> <h4>High ISO cameras</h4> <h3>Choose an aperture</h3> <h4>The effect of aperture on depth of focus</h4> <h4>Vignetting</h4> <h4>Diffraction</h4> <h3>Choose a shutter speed</h3> <h4>Shutter speed limitations for hand-holding a camera</h4> <h4>Long exposures</h4>في الهيكل أعلاه:
يبدأ المخطط التفصيلي برأسين من نوع <h3> ، بدلاً من <h1> ، ولا يمثل أي من هذين العنوانين العنوان الرئيسي لصفحة الويب.
بدلاً من ذلك ، فهي جزء من بنية التنقل حول العنوان في القالب.
علاوة على ذلك ، بمجرد بدء المحتوى ، ينتقل المخطط التفصيلي من المستوى 1 إلى المستوى 3 ، بدون مستوى العنوان 2 بينهما.
كما يمكنك أن تتخيل.
قد يكون المستخدم الذي يمسح هذه العناوين ضوئيًا (مثل تلك الموجودة على جهاز قراءة الشاشة) مرتبكًا إلى حد ما.
افترض أن المحتوى ليس ما يبحثون عنه ؛
انقر فوق زر الرجوع وانتقل إلى مكان آخر.
زائر مفقود!
أنا متأكد من أنك تفهم الآن لماذا يعد الحصول على هيكل العنوان الصحيح أمرًا ضروريًا؟
التمسك بنفس المثال ...
إليك الشكل الذي يجب أن يبدو عليه هيكل العنوان بالترتيب المناسب:
<h1>Setting the Exposure Manually on a Camera</h1> <h2>Set the ISO</h2> <h3>The effect of ISO on image quality</h3> <h3>High ISO cameras</h3> <h2>Choose an aperture</h2> <h3>The effect of aperture on depth of focus</h3> <h3>Vignetting</h3> <h3>Diffraction</h3> <h2>Choose a shutter speed</h2> <h3>Shutter speed limitations for hand-holding a camera</h3> <h3>Long exposures</h3>يشير كل مستوى من مستويات العنوان ، من <h1> إلى <h3> ، إلى العلاقة من جزء واحد من المحتوى إلى الأجزاء الأخرى.
المحتوى الموجود أسفل عنوان يتعلق منطقيًا بالعنوان فوقه.
وبالمثل ، فإن المحتوى داخل كتلة <h2> من المحتوى يقع منطقيًا تحت <h1> الذي يسبقه.
بهذه الطريقة ، تنظم بنية العنوان محتويات المستند بشكل هرمي.
ويوضح ما هو مهم للغاية.
بنغو!
فحص علامة H1: كيفية إجراء تدقيق العنوان
حتى تعرف الآن كيفية تنظيم الصفحات الجديدة على موقعك ، أليس كذلك!
لكن ماذا عن صفحاتك الحالية؟
كيف يمكنك التحقق مما إذا كانوا يستخدمون علامات العنوان الصحيحة؟
حسنًا ، هناك طريقتان:
أولاً ، يمكنك التحقق من شفرة مصدر موقع الويب الخاص بك .
للقيام بذلك ، انتقل إلى صفحة الويب التي تريد التحقق منها باستخدام Google Chrome.
بعد ذلك ، انقر فوق "عرض" ثم "المطور" ثم "عرض المصدر".
ثم "Control F" لبدء تشغيل وظيفة البحث في الصفحة متبوعة بـ "<h1" للعثور على علامة HTML H1 الافتتاحية:
يمكن تكرار هذه العملية مع H2s باستخدام البحث عن "<h2" وما إلى ذلك.
يمكنك أيضًا عرض علامات العنوان الخاصة بك باستخدام امتداد متصفح مثل SEO Quake.
بعد تثبيت SEO Quake ، افتح الصفحة التي تريد التحقق منها ، وانتقل إلى علامة التبويب "التشخيص" داخل SEO Quake ، ثم قم بالتمرير لأسفل إلى قسم العناوين.
سيُظهر لك العدد الإجمالي لعلامات العناوين في كل مستوى ، ثم يسرد علامات العناوين في التسلسل الهرمي الذي يتم عرضه.
تظهر مراجعة سريعة للصفحة أعلاه أنها تستخدم علامات H1 و H2 و H3 ، ويتم تنظيم العلامات في تسلسل هرمي منطقي.
لكن قد تكون هناك مشكلة.
تحتوي الصفحة على عنوانين H1.
علامات H1: كم عدد عناصر H1 الموصى بها في صفحة واحدة
كما أشرت سابقًا ، يجب أن تحتوي الصفحة على علامة H1 واحدة فقط .
ذلك لأن علامة H1 هي عقدة الجذر التي تنبثق منها جميع العناوين الأخرى.
ومن خلال وجود علامة H1 واحدة فقط ، تتركز جهود تحسين محركات البحث على موضوع رئيسي واحد - مع مواضيع فرعية متعددة (شاملة) تحت العناوين التي تستخدم H2s و H3s.
هذا هو الهيكل المثالي للترتيب في هذه الأيام.
ولكن ماذا عن الحالات التي تحتوي فيها صفحتك على أكثر من H1؟
أو حتى لا يوجد H1 على الإطلاق؟
وفقًا لدراسة أجرتها SEMRush ، تحتوي نسبة كبيرة من مواقع الويب على مشكلات علامة H1:
لكن وفقًا لـ Google ، هذا ليس مدعاة للقلق:
على وجه الخصوص ، نظرًا لأن HTML5 يمكنها استخدام H1s لتوجيه أقسام متعددة داخل نفس الصفحة.
إذن ماذا أوصي؟
إذا كنت تستخدم HTML5 بالفعل ، والتي يمكن أن تحتوي على أقسام مميزة في نفس الصفحة ، فإن استخدام علامات H1 لكل قسم يعد أمرًا جيدًا تمامًا.
ومع ذلك ، إذا كنت تستخدم كود HTML5 سابقًا ، حيث تعني صفحة واحدة عادةً موضوعًا أساسيًا واحدًا - فالتزم بقاعدة h1 / one-page!
كيفية إنشاء علامات Killer H1 to H6. خمس نصائح لكتابة الرأس
بعد ذلك ، سأشارك بالضبط كيفية كتابة عنوان يخفض معدل الارتداد ، ويزيد من الوقت على الصفحة ، ويؤدي في النهاية إلى زيادة تصنيفات محرك البحث والتحويلات لموقعك على الويب.
دعنا نقفز في:
1. أعطهم ما جاءوا من أجله - إتقان نية البحث باستخدام H1s
تقول Google إن استخدام الكلمات الرئيسية في عناوينك لن يساعدك في الترتيب بشكل أفضل.
إنهم مخطئون!
أوافق على أن الكلمات الرئيسية الموجودة داخل العناوين قد لا تكون عامل ترتيب مباشرًا ، لكنها لا تزال تساعدك على ترتيب أعلى بمرور الوقت.
كيف ذلك؟
كلمتين صغيرتين نية البحث.
تخيل للحظة أنك بحثت عن شيء ما على Google ، ونقرت على نتيجة ذات صلة ، وانتهيت من الوصول إلى صفحة مقصودة.
في السيناريو أ ، تحتوي الصفحة التي تضغط عليها على عنوان واضح بوضوح يتطابق تمامًا مع مصطلح البحث الخاص بك.
في السيناريو ب ، لا يتطابق عنوان الصفحة مع مصطلح البحث على الإطلاق.
في أي صفحة تبقى؟
الصفحة "أ" بالطبع.
تستخدم خوارزمية التعلم الآلي من Google ، والمعروفة باسم RankBrain هذا المفهوم كعامل تصنيف عن طريق قياس وقت بقاء المستخدمين.
يعد وقت المكوث الطويل (AKA time-on-page) مقياسًا لرضا الباحث.
إذا أمضى المستخدم فترة طويلة على صفحة ويب - على عكس pogo - العودة إلى نتائج البحث على الفور - ستفترض Google أن المستخدم وجد ما كان يبحث عنه.
وبالتالي ، قم بإعطاء الصفحة دفعة في الترتيب.
ببساطة:
يعد تعظيم وقت الإقامة وتقليل الالتصاق بجوجو أمرًا ضروريًا للحصول على ترتيب أعلى هذه الأيام.
أحد أهم العوامل التي تؤثر على وقت السكون هو ما يراه المستخدمون عند وصولهم إلى الصفحة لأول مرة. بعبارة أخرى ، العنوان.
كما سيخبرك جميع متخصصي البحث المدفوعين إذا كنت تستهدف الكلمة الرئيسية "عصا هوكي" ، يجب أن تتضمن صفحتك المقصودة هذا المصطلح (أو صيغة قريبة جدًا) في العنوان. وينطبق الشيء نفسه على البحث العضوي.
الشيء الرئيسي هنا هو ؛ الكلمة الرئيسية المستهدفة أو الاختلاف القريب .
بالطبع ، يمكنك تضمين الكلمة الرئيسية بالضبط إذا أردت ، ولكنها ليست ضرورية.
الشيء الرئيسي هو مطابقة القصد من بحث المستخدمين ، والذي يسمح لك باستخدام الاختلافات والمرادفات لجعل العنوان الخاص بك أكثر طبيعية وجاذبية.
في كلتا الحالتين ، فإن عكس مصطلح البحث في العنوان سيقول للمستخدم ، "لقد وجدت ما تبحث عنه" مما يزيد من فرص استمراره.
دعنا نوضح هذا بمثال:
كتب غلين ألسوب في موقع تفصيلي.كوم هذا المنشور الصغير عن بناء الروابط.
يستهدف الكلمة الرئيسية "بناء الارتباط المتقدم".
لمساعدة المنشور على تلبية نية البحث ، يقوم Glen بتضمين الكلمة الرئيسية الخاصة به في عنوان صفحة المنشورات:
ومرة أخرى في رأس الصفحة.
من الواضح لأي شخص يبحث عن "بناء ارتباط متقدم" أن مشاركة Glen ستحتوي على ما يبحثون عنه.
يمكن أن يساعد هذا فقط في تحسين وقت السكون في منشور Glen وإرضاء خوارزمية RankBrain من Google.
2. استخدم تقنية "ماذا في ذلك" وحوّل العناوين المملة التي تركز على الميزات إلى خطافات مدفوعة بالفوائد
بدلاً من كتابة عناوين فرعية قصيرة تركز على السمات.
أقوم بدمج الفوائد في 50٪ على الأقل من H2s الخاص بي:
لماذا أفعل ذلك؟
من خلال استخدام الفوائد ، فإنني ألمح إلى الكيفية التي ستساعد بها معلوماتي القراء في دورهم كمحسّنات محرّكات بحث.
على سبيل المثال:
في هذا المنشور حول تجارب تحسين محركات البحث ، كان بإمكاني كتابة "استخدام الروابط الخارجية" كـ H2.
لكن بدلاً من ذلك ، قمت بتضمين فائدة مؤثرة توضح المشكلة التي ستحلها المعلومات.
إذا كنت من محسّنات محرّكات البحث ولديك نفس المشكلة ، فمن شبه المؤكد أنك ستستمر في القراءة.
إذن كيف تصنع عناوينك المبنية على الفوائد؟
اسأل: "وماذا في ذلك؟" عدة مرات.
دعني أريكم مثالاً حصلت عليه من Enchanting Marketing:
الميزة: يسخن الفرن بسرعة.
وماذا في ذلك؟
إنه جاهز لبدء طهي اللازانيا بسرعة.
وماذا في ذلك؟
طعامك على الطاولة عاجلا.
وماذا في ذلك؟
الحياة أقل توترا. هناك القليل من الانتظار حول المطبخ في انتظار استعداد الفرن. ولا داعي للقلق. قد تنسى تسخين الفرن الخاص بك.
العنوان الذي بدأ بعبارة "وظيفة التسخين المسبق"
يمكن أن يصبح الآن:
"وفر الوقت وقلل من إجهادك مع وظيفة التسخين المسبق الفريدة هذه"
ما الذي من المرجح أن يبقيك ملتصقًا بالصفحة؟
3. اجعل عناوينك بارزة بخطوط مميزة وألوان متباينة
لقد قمت بتسمية نسختك وتفي عناوينك بقصد البحث تمامًا ، فماذا بعد؟
لمساعدة القراء على التنقل بشكل أفضل في المحتوى الخاص بك ، يجب أن تجعل العناوين والعناوين الفرعية مميزة.
بمعنى آخر ، يجب أن تكون عناوينك "POP" على الصفحة.
يمكن أن ينطوي التمييز على التمايز البصري في اللون أو الحجم أو الخط أو التأثير.
أو مزيج من كل هؤلاء.
دعنا نلقي نظرة على بعض الأمثلة:
تقوم مدونة Ahrefs بعمل رائع في تمييز رؤوسها:
يستخدمون حجم خط مختلفًا ويتقدمون بمهارة من الأسود إلى الرمادي أثناء انتقالهم إلى أسفل التسلسل الهرمي للرأس.
للحصول على نقاط المكافأة ، يستخدمون أيضًا خطًا مخصصًا تم تطويره حصريًا لعلامتهم التجارية.
مثال جيد آخر هو حبة واحدة من Eric Siu والتي تستخدم لونًا برتقاليًا متباينًا لعناوين مدوناتهم.
تريد أن تبرز عناوينك ، بحيث تكون مختلفة بصريًا عن العناصر الأخرى في الصفحة - خاصةً عبارة الحث على اتخاذ إجراءات .
قد يؤدي التداخل البصري الشديد إلى تقليل عدد مقل العيون على عبارات الحث على اتخاذ إجراء مما يؤدي إلى تحويلات أقل.
مع ذلك ، في نصيحتي الرابعة
4. الاستفادة من هذه الأساليب الرائعة في كتابة الإعلانات ، وخفض معدل الارتداد وزيادة مبيعاتك
إذا لم يدفعك ذلك إلى أخذ كتابة العناوين على محمل الجد ، فلن يؤدي ذلك إلى:
يؤكد هذا البيان على أهمية العنوان ولماذا يحدد فعالية مقالتك بأكملها.
باختصار ، كلما كان عنوانك أفضل ، زادت احتمالات فوزك بالمعدلات والحصول على ما كتبته.
هذا لا ينطبق فقط على العنوان الرئيسي (H1) ، ولكن أيضًا العناوين الفرعية (H2 إلى H6).
في كل مرة يكون هناك فاصل في المحتوى الخاص بك ، يكون للقارئ خياران ؛
إما أن يتوقفوا أو يواصلوا القراءة.
لهذا السبب من الضروري استخدام نسخة جذابة في جميع عناوينك (H1 إلى H6).
لست خبيرًا في كتابة الإعلانات ، لذا سأترك الأمر لدورة نيفيل ميدورا كوبي الكتابة لمشاركة بعض نصائح كتابة العناوين الرئيسية.
5. وقف القراء في مساراتهم عن طريق إدخال عناصر العناوين هذه في المحتوى الخاص بك
استخدام الرسومات ممتاز.
استخدام العناوين ممتاز.
ولكن عندما تجمع بين الاثنين معًا ، يحدث السحر الحقيقي.
كما ناقشنا بالفعل:
يؤدي تحسين وقت المستخدم على الصفحة إلى تحسين نتائج الترتيب الخاصة بك.
يخبرنا وقت طويل أن مستخدمي Google راضون - وبالتالي ، يحصل المحتوى الخاص بك على تعزيز في الترتيب.
لتحسين الوقت على الصفحة ، هناك شيء واحد يجب أن تركز عليه قبل كل شيء آخر ؛
جعل المحتوى الخاص بك أكثر قابلية للقراءة .
بجانب من؛
- فقرات قصيرة
- الصور والوسائط المتعددة
- كتل الاقتباس
- نقاط مهمة
- الإختبارات
هناك عنصر محتوى متقطع آخر يجب عليك مقاطعته جنبًا إلى جنب مع العناوين الفرعية الخاصة بك والتي من المؤكد أنها ستوقف "كاشطات المحتوى" في مساراتها:
رسومات رأس مخصصة
ألق نظرة على هذه الجولة حول مُحسّنات محرّكات البحث المحلية على مدونة SEO Sherpa.
إلى جانب علامات رأس H2 ، أضفت رسومات مخصصة تقدم كل قسم فرعي من المنشور.
لا يقتصر الأمر على جعل المنشور يبدو أكثر إثارة للإعجاب.
لكنهم يساعدون في زيادة الوقت على الصفحة إلى متوسط 4 دقائق لائق:
وهو أعلى بكثير من المتوسط بالنسبة للموقع:
كان إنشاء هذه الرسومات أمرًا سهلاً لأنني محظوظ بما يكفي لوجود مصممين بدوام كامل في فريق العمل.
ولكن ، إذا لم تكن مستعدًا لبناء فريق التصميم الخاص بك ، فلا يزال هناك الكثير من الخيارات المتاحة
- Canva - أداة تعديل الصور (مجانًا)
- PicMonkey - صانع تصميم جرافيك (مجاني)
- 99 تصميمًا - مصممون لحسابهم الخاص (منخفض التكلفة)
- Upwork - منصة مستقلة (منخفضة التكلفة)
أي طريق تختار.
في المرة القادمة التي تكتب فيها جزءًا طويلًا من محتوى تحسين محركات البحث ، أضف بعض الرسومات الرأسية وشاهد صعود الوقت على الصفحة (والتصنيفات).
إذن هناك ، كل ما تحتاج لمعرفته حول علامات الرأس وكيفية استخدامها لتحسين محرك البحث الخاص بك.
الآن الأمر متروك لك!
كيف تضع هذه الأساليب في الممارسة على موقعك
لقد أنشأت قائمة تحقق مجانية للعناوين ستساعدك على الاستفادة من هذه الأساليب لتحسين أداء موقعك.
إنه يوضح - خطوة بخطوة - بالضبط كيفية استخدام الاستراتيجيات التي تحدثت عنها في المنشور.
بمجرد تنزيله أدناه ، اسمح لي أن أعرف في التعليقات ما هو نصيحتك المفضلة في كتابة العنوان. أحب أن أعرف.
