<h1> - ผลกระทบเชิงความหมายกับผลกระทบ SEO

มีการถกเถียงกันมากมายเกี่ยวกับสถาปัตยกรรมของโครงสร้างหัวเรื่องใน html5 หลังจากอ่านบทความต่าง ๆ ฉันมาถึงสามสถาปัตยกรรมที่เป็นไปได้ที่สมเหตุสมผลสำหรับฉัน แต่ฉันไม่แน่ใจซึ่งเป็นวิธีการที่เหมาะสมจริงของวิธีการ ฉันจะแสดงรายการด้านล่างพร้อมตัวอย่างโค้ดและหวังว่าจะมีใครบางคนให้ความกระจ่างบางอย่างเกี่ยวกับความสมดุลที่เหมาะสมหรือแย่ลง / ดีขึ้นกว่านี้ได้พูดว่า

วิธีที่ 1: รุ่น A

โสด<h1>: ใช้ส่วนหัวสำหรับเนื้อหาเฉพาะหน้าเท่านั้น

นี่จะ<h1>เป็นการนำทางระดับบนสุดสำหรับส่วนหัวของหน้าเฉพาะขณะที่ไหล<h2-6>ตามที่ต้องการภายในพื้นที่เนื้อหา ในขณะที่ออก<header>, <nav>และ<footer>เป็นองค์ประกอบ "ไม่มีชื่อ"

<header>
  <nav>
    <!-- no headings -->

<div role="main">
  <h1>
  <section>
    <h2>
      <section>
        <h3>

<footer>
  <!-- no headings -->

วิธีที่ 1: รุ่น 2

หลาย<h1>รายการ: ใช้หัวเรื่องสำหรับเนื้อหาเฉพาะหน้าเท่านั้น

เหมือนกับ1Aที่เพิ่มหัวข้อเนื้อหาของหน้าหลายหัวข้อที่สำคัญเท่าเทียมกัน (เช่นเป็นไปได้สำหรับบล็อกหรือหน้าหัวข้อแยก)

<header>
  <nav>
    <!-- no headings -->

<div role="main">
  <h1>
  <article>
    <h2>
  <article>
    <h1>

<footer>
  <!-- no headings -->

แนวทางที่ 1 สรุป: ส่วนใหญ่มีเหตุผลสำหรับ SEO (ความคิดเห็นของฉันจากการวิจัยของฉัน)

• BODY ไม่มีชื่อ
  • NAV ที่ไม่มีชื่อ
• หัวเรื่องหลัก
  • ส่วนหัวเรื่อง
    • หัวเรื่องย่อย
  • ส่วนไม่มีชื่อ

วิธีที่ 2:

หลาย<h1>รายการ: เน้นโครงสร้างเค้าร่างและลำดับชั้นเนื้อหา

นี้ใช้หัวกับองค์ประกอบเว็บไซต์กว้าง<header>, <nav>และ<footer>ใช้หลาย<h1>'s สำหรับองค์ประกอบที่ไม่ใช่เนื้อหาที่มุ่งเน้น

<header>
  <h1>
  <nav>
    <h2>

<div role="main">
  <h1>
  <section>
    <h2>
    <section>
      <h3>

<footer>
  <h1>
  <section>
    <h2>

แนวทางที่ 2 เค้าโครง: ส่วนใหญ่มีเหตุผลสำหรับโครงร่างความหมาย (อีกครั้งความคิดเห็นของฉัน)

• ส่วนหัวหัวเรื่อง
  • หัวเรื่องการนำทาง
• หัวเรื่องหลัก
  • ส่วนหัวเรื่อง
    • หัวเรื่องย่อย
• หัวเรื่องท้ายกระดาษ
  • ส่วนหัวเรื่อง

วิธีที่ 3

โสด<h1>: มุ่งเน้นลำดับชั้นเนื้อหา ระดับที่ต่ำกว่า<h1-6>สำหรับองค์ประกอบทั่วทั้งไซต์

นี้ใช้หัวกับองค์ประกอบเว็บไซต์กว้าง<header>, <nav>และ<footer>โดยไม่ต้องใช้หลาย<h1>'s สำหรับองค์ประกอบที่ไม่ใช่เนื้อหาที่มุ่งเน้น

<header>
  <h2>
  <nav>
    <h3>

<div role="main">
  <h1>
  <section>
    <h2>
    <section>
      <h3>

<footer>
  <h2>
  <section>
    <h3>

แนวทางที่ 3 โครงร่าง: เป็นลูกผสมของทั้งสองแนวทาง

• ส่วนหัวหัวเรื่อง
  • หัวเรื่องการนำทาง
• หัวเรื่องหลัก
  • ส่วนหัวเรื่อง
    • หัวเรื่องย่อย
  • หัวเรื่องท้ายกระดาษ
  • ส่วนหัวเรื่อง

จากทั้งหมดที่กล่าวมาฉันจะเข้าใจได้อย่างไร? วิธีใดวิธีหนึ่งมีค่าความหมายมากกว่าวิธีอื่นหรือไม่ หนึ่งทำให้เหมาะสมในแง่ของ SEO? มีความสุขที่สามารถทำได้หรือไม่?

แหล่งที่มา: มีอีกมากมายเหล่านี้คือสิ่งที่ฉันจำได้ในขณะนี้

• https://youtu.be/GIn5qJKU8VM
• http://accessiblehtmlheadings.com/
• http://html5doctor.com/outlines/
• http://webdesign.tutsplus.com/articles/the-truth-about-multiple-h1-tags-in-the-html5-era--webdesign-16824

ในการเริ่มต้นไม่มีตัวอย่างใดที่เกี่ยวข้องกับซีแมนทิกส์ คำถามของคุณขึ้นอยู่กับตัวแยกวิเคราะห์รุ่นที่อ่านหน้าจากบนลงล่างในแบบดั้งเดิม

ด้วยเหตุผลนี้ตัวอย่างแรกของคุณจึงถูกต้อง ตัวอย่างต่อไปนี้จะไม่สามารถให้ผลลัพธ์ที่สามารถคาดเดาได้และอาจทำให้คุณหัวใจไหม้อย่างรุนแรง

โปรดเข้าใจว่าหน้าเว็บของคุณจะถูกมองในเชิงแนวคิดในหลายวิธี: หนึ่งรูปแบบดังต่อไปนี้แบบ DOM ดั้งเดิมที่ HTML และสิ่งนั้นถูกประเมินจากมุมมองของผู้ใช้; สองข้อความเท่านั้นที่มีการเพิ่มมาร์คอย่างง่าย ๆ เพื่อระบุหัวเรื่องหัวเรื่องย่อยเนื้อหาและอื่น ๆ และสามโดยใช้มุมมองแบบ semantic ซึ่งมีน้ำหนักเพียงเล็กน้อยเท่านั้นที่ใช้กับแท็กส่วนหัวในดัชนีโดยยึดตามตำแหน่งในลำดับชั้น h1-6 จากโมเดล DOM คุณจะได้รับแท็กชื่อคำอธิบายเมตาแท็กและอื่น ๆ ที่จะหายไปในอีกสองมุมมอง อย่างไรก็ตามมุมมอง DOM นั้นมีน้ำหนักเพียงเล็กน้อยสำหรับการชั่งน้ำหนักเนื้อหาของคุณ หน้าที่หลักของมันคือการเข้าใจหน้าเว็บของคุณการนำทางของคุณอยู่ที่ไหนส่วนหัวและส่วนท้ายของคุณอยู่ที่ไหนเนื้อหาของคุณเริ่มต้นและสิ้นสุดเป็นต้น

สิ่งที่คุณต้องใส่ใจคือข้อความและมุมมองเชิงความหมาย มุมมองเชิงความหมายส่วนใหญ่มาจากมุมมองข้อความเท่านั้นอย่างไรก็ตามมันประกอบไปด้วยภาษาศาสตร์จิตวิทยาจิตเซมานิกส์และการวิเคราะห์เนื้อหาอื่น ๆ ของคุณ

ฉันจะไม่อธิบายความหมายอีกครั้ง แต่ฉันจะชี้ให้คุณเห็นคำตอบที่ฉันเขียนเมื่อไม่นานมานี้ซึ่งเป็นแบบฝึกหัดขนาดเล็กในหัวข้อ: ทำไมเว็บไซต์ที่มีคำหลักบรรจุอันดับสูงกว่าหนึ่งโดยไม่มีผลการค้นหาของ Google

เนื่องจากเว็บเป็นไปตามหน้าที่พิมพ์และ parsers จากวันแรกตามประเพณีเหล่านี้และส่วนใหญ่ไม่เปลี่ยนแปลงจึงเป็นไปไม่ได้ที่จะหลบหนีพวกเขา นี่คือคำตอบที่อธิบายถึงลำดับการอ่านพาดหัวซึ่งยังคงเป็นกลยุทธ์ที่ดีที่สุดตามตัวแยกวิเคราะห์: ปรับปรุงการจัดอันดับของ Google สำหรับคำหลักทั่วไปและคำหลักที่เฉพาะเจาะจง

ในขณะที่ฉันจะยอมรับว่าอาจมีบางส่วนของการย้ายแท็กส่วนหัวไปรอบ ๆ ฉันถามว่ามันเป็นสิ่งที่ฉลาดที่จะทำ? ไม่มีทาง! สิ่งต่าง ๆ ในวันนี้อาจไม่ได้มีน้ำหนักในวันพรุ่งนี้ การทำตามรูปแบบดั้งเดิมจะทำให้ได้ผลลัพธ์ที่คาดการณ์ได้ซึ่งการเปลี่ยนแปลงน้ำหนักอย่างง่าย ๆ สามารถทำให้ไซต์ของคุณกลายเป็นแบบหมุนได้

นี่คือมุมมองเกี่ยวกับวิธีการทำงาน: ชื่อโดเมนได้รับประโยชน์ใน SEOละเว้นชื่อและข้ามส่วนบนสุดของคำตอบและไปที่มุมมองของโปรแกรมเมอร์

หากคุณอ่านคำตอบสามข้อนี้คุณสามารถเข้าใจผลกระทบของแท็กส่วนหัวได้อย่างง่ายดาย เป็นไปได้มากที่จะทำลายประสิทธิภาพของหน้าเว็บ / เว็บไซต์ที่น่ารักด้วยวิธีการจัดเรียงเหล่านี้ แม้ตามประเพณีคุณสามารถเลิกทำแท็กชื่อและแท็ก h1 ได้อย่างรวดเร็วโดยการปรับแท็กส่วนหัวให้เล็กลง ความสมดุลที่รอบคอบเป็นกุญแจสำคัญ

สุดท้ายฉันจะเตือนคุณเกี่ยวกับคำแนะนำ SEO ออนไลน์ทั้งหมดจากผู้ที่ไม่ใช่วิศวกร มันเป็นแร็กเกตที่จะทำเงินและแข่งขันเพื่อความสนใจของคุณ เครื่องมือค้นหาทำงานอย่างไรไม่เป็นความลับ มันอยู่ที่นั่นถ้าคุณรู้ว่าจะดู ผู้เชี่ยวชาญด้าน SEO ส่วนใหญ่ไม่ได้เป็นผู้เชี่ยวชาญเลยเพราะพวกเขาไม่สามารถบอกคุณได้ว่าเทคโนโลยีการค้นหาเข้าด้วยกันได้อย่างไร เราไม่สามารถรู้ได้อย่างชัดเจนว่าเครื่องมือค้นหาเหล่านี้ทำงานอย่างไร โชคดีที่ Google บอกเราพอแล้ว (และจริงๆแล้วพวกเขาบอกเราเกือบทุกอย่างที่เราจำเป็นต้องรู้ - และไม่ได้มาจากผู้ชายที่ชื่อแมตต์) ว่าถ้าคุณรู้จักวิทยาศาสตร์และเทคโนโลยีสมมติฐานที่สมเหตุสมผลสามารถ ทำ จากมุมมองของฉัน SEO ส่วนใหญ่ผิดมากกว่าถูกในขณะที่บางคนมีอัตราการเข้าชมสูงกว่าค่าเฉลี่ยมาก

ต่อไปนี้มาจากมุมมองของข้อกำหนด HTML5 ตามสมมติฐานที่ว่าผู้บริโภค (เช่นเครื่องมือค้นหา) จะคาดหวังและทำงานกับสิ่งที่ระบุไว้ในมาตรฐาน HTML ในทางปฏิบัติในปัจจุบันรายละเอียดมาร์กอัปดังกล่าวอาจไม่สำคัญสำหรับ SEO แต่มันมีความสำคัญสำหรับผู้บริโภครายอื่นและการเข้าถึง

ฉันจะใช้ส่วนหัวของอันดับที่เหมาะสมเนื่องจากนี่คือสิ่งที่ HTML5 ส่งเสริมแต่ก็เป็นไปได้ที่จะใช้h1ทุกที่ (หากคุณมักจะใช้องค์ประกอบเนื้อหาในการแบ่งหมวดหมู่ตามความเหมาะสม)

คุณไม่สามารถ "ใช้" ส่วนหัวheaderหรือfooterองค์ประกอบเนื่องจากมันไม่ได้เป็นส่วนเนื้อหา (สามารถมีส่วนหัวได้เท่านั้น แต่ส่วนหัวนี้จะไม่ถูก จำกัด ขอบเขตของheader/ footer)

sectioning แต่ละองค์ประกอบเนื้อหา ( section, article, nav, aside) และแต่ละองค์ประกอบราก sectioning ( body, blockquoteฯลฯ ) สามารถมีหัวข้อนำไปใช้

เหล่านี้ sectioning องค์ประกอบเนื้อหา / รากและองค์ประกอบหัวข้อh1- h6เป็นองค์ประกอบเพียงว่าไม่ว่าสำหรับร่างเอกสาร

แม้ว่าทุกส่วนจะ "ยาว" สำหรับหัวเรื่อง แต่ก็ไม่จำเป็นต้องระบุหนึ่งหัวข้อ (ในกรณีเช่นนั้น ในขณะที่มันมักจะมีประโยชน์ในการให้หนึ่งมีบางกรณีที่มันไม่จำเป็นจริงๆ ตัวอย่างเช่นหากคุณมีการนำทางเพียงครั้งเดียวการมีเครื่องหมายnavไม่มีหัวเรื่องก็เพียงพอแล้ว แต่ถ้าไซต์ของคุณมีการนำทางหลายรายการคุณอาจใช้หัวข้อที่อธิบายวัตถุประสงค์ที่แตกต่างกัน

ในวิธีการที่ 1 ของคุณส่วนbodyนี้เป็นหัวข้อที่ไม่มีชื่อ (แต่เป็นเพียงเพราะคุณnavปรากฏก่อนองค์ประกอบส่วนหัวแรกมิฉะนั้นh1จะเป็นส่วนหัวของเอกสารทั้งหมด)
ฉันไม่คิดว่าการมีbodyหัวข้อที่ไม่มีชื่อเป็นตัวเลือกที่ดี มันเป็นรายการแรกในร่างและนึกคิด (แต่ไม่จำเป็น) ทุกอย่างที่ตามมาอยู่ในขอบเขตของรายการนี้

สำหรับเว็บไซต์ทั่วไปที่มีการนำทางทั่วโลกมันสมเหตุสมผล ( คำอธิบายที่ยาวกว่า ) เพื่อใช้ชื่อไซต์สำหรับbodyส่วนของหัวข้อเนื่องจากการนำทางส่วนกลางเป็นของทั้งไซต์ไม่ใช่เฉพาะกับเอกสารปัจจุบัน:

<body>
  <h1>My site</h1> <!-- site name -->

  <nav></nav> <!-- site navigation -->

</body>

<!-- Outline:
  1. "My site"
    1.1 Untitled nav
-->

เนื้อหาหลักสำหรับเอกสารนี้ควรอยู่ในขอบเขตของส่วนหัวของไซต์เนื่องจากไซต์เป็นบริบทของเนื้อหาหลักของเอกสารนี้นั่นคือเป็นส่วนหนึ่งของไซต์ของคุณ:

<body>
  <h1>My site</h1> <!-- site name -->

  <nav></nav> <!-- site navigation -->

  <article> <!-- document content -->
    <h2>My blog post</h2>
  </article>

</body>

<!-- Outline:
  1. "My site"
    1.1 Untitled nav
    1.2 "My blog post"
-->

หากคุณมีหลายส่วนของเนื้อหาหลักเช่นรายการบล็อกโพสต์บ่อยครั้งคุณควรใช้ส่วนsectionที่มีทั้งหมดเหล่านี้articleแทนการใช้ลูกarticleโดยตรงของbody:

<body>
  <h1>My site</h1> <!-- site name -->

  <nav></nav> <!-- site navigation -->

  <section> <!-- document content -->
    <h2>Recent blog posts</h2>

    <article>
      <h3>My blog post</h3>
    </article>

    <article>
      <h3>Another blog post</h3>
    </article>

  </section>

</body>

<!-- Outline:
  1. "My site"
    1.1 Untitled nav
    1.2 "Recent blog posts"
      1.2.1 "My blog post"
      1.2.2 "Another blog post"
-->

หากคุณมีส่วนท้ายของไซต์ที่มีความซับซ้อนมากซึ่งต้องการองค์ประกอบการแบ่งส่วนมันควรจะอยู่ในระดับเดียวกันเช่นnavและเนื้อหาหลัก (เนื่องจากเป็นของไซต์ไม่ใช่เนื้อหาหลัก):

<body>
  <h1>My site</h1> <!-- site name -->

  <nav></nav> <!-- site navigation -->

  <section> <!-- main content -->
    <h2>Recent blog posts</h2>

    <article>
      <h3>My blog post</h3>
    </article>

    <article>
      <h3>Another blog post</h3>
    </article>

  </section>

  <section> <!-- site footer -->
    <!-- this section should be the child of a 'footer' element -->
  </section>

</body>

<!-- Outline:
  1. "My site"
    1.1 Untitled nav
    1.2 "Recent blog posts"
      1.2.1 "My blog post"
      1.2.2 "Another blog post"
    1.3. Untitled section
-->

(ในตัวอย่างเหล่านี้ทั้งหมดการนำทางมาก่อนเนื้อหาหลัก แต่บ่อยครั้งที่เหมาะสมที่จะมีเนื้อหาหลักก่อนการสลับสิ่งเหล่านี้เป็นไปได้คุณควรตรวจสอบให้แน่ใจว่าh1ชื่อไซต์นั้นอยู่ก่อนส่วน / ส่วนหัวอื่น ๆ )