โครงสร้างลำดับชั้นของเนื้อหาที่มีแท็กหัวเรื่อง Hx

เผยแพร่แล้ว: 2018-01-30

สารบัญ

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

    • 1 หัวข้อคืออะไร?
    • 2 ใช้เนื้อหาที่สำคัญในแท็กหัวเรื่อง Hx
    • 3 Google พูดอะไรเกี่ยวกับแท็กส่วนหัว Hx
    • 4 ข้อมูลสำคัญอื่น ๆ เกี่ยวกับหัวเรื่องเนื้อหา

    หัวข้อคืออะไร?

    แท็กหัวเรื่องใช้เพื่อนำเสนอโครงสร้างของเนื้อหาแก่ผู้ใช้ (โปรแกรมรวบรวมข้อมูลเว็บเบราว์เซอร์ด้วย) ขนาดหัวเรื่องมีหกขนาด ตั้งแต่ H1 ถึง H6 แม้ว่าขนาดแรกจะมีความเกี่ยวข้องมากที่สุด (เป็นส่วนหัวที่สำคัญที่สุด) ในขณะที่ H5 และ H6 นั้นไม่ค่อยมีใครใช้

    เนื่องจากแท็กหัวเรื่อง Hx มีข้อความที่ (ควร) ใหญ่กว่าเนื้อหาที่เหลืออย่าง มาก จึงเป็นเบาะแสที่มองเห็นได้สำหรับผู้ใช้ที่ช่วยให้พวกเขาเข้าใจว่าย่อหน้าใดด้านล่างอธิบาย การใช้หัวเรื่องขนาดต่างๆ เพื่อแสดงโครงสร้างแบบลำดับชั้น ทำให้ผู้ใช้แยกแยะเนื้อหาได้ง่ายขึ้น

    ในไวยากรณ์ HTML เราใช้แท็กในวงเล็บ <>:

     <h1>หัวเรื่อง 1</h1>
<h2>หัวเรื่อง 2</h2>
<h3>หัวเรื่อง 3</h3>
<h4>หัวเรื่อง 4</h4>
<h5>หัวเรื่อง 5</h5>
<h6>หัวเรื่องที่ 6</h6>

    แต่ในเว็บไซต์พวกเขาจะมีลักษณะเช่นนี้ (แน่นอนขึ้นอยู่กับสไตล์ชีต):

    ตัวอย่างการใช้งานสามารถดูได้ที่นี่: https://www.w3schools.com/html/html_headings.asp

    ใช้เนื้อหาที่สำคัญในแท็กหัวเรื่อง Hx

    เมื่อเกือบทุกวันมีบทความใหม่ๆ ในบล็อก ข่าวสาร คำแนะนำ หรือบทความจากผู้เชี่ยวชาญ การดึงดูดผู้ใช้ไม่เพียงแต่ด้วยภาพที่สวยงามหรือชื่อที่ดึงดูดใจเท่านั้น แต่ยังรวมถึงเนื้อหาที่มีโครงสร้างด้วย

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

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

    โครงสร้างควรกำหนดไว้อย่างชัดเจนและ หัวเรื่องควรมีขนาดแตกต่างกัน จะเป็นความผิดพลาดที่จะจัดรูปแบบให้เหมือนกับข้อความเนื้อหาหรือไม่แยกความแตกต่างตามความสำคัญ

    หัวข้อ Hx ในบทความ

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

    โครงสร้างที่ออกแบบมาอย่างดีของบทความสามารถทำให้ดูน่าดึงดูดยิ่งขึ้น เนื้อหาที่น่าสนใจที่ใส่ไว้ในหัวเรื่องจะแจ้งให้ผู้อ่าน (และโปรแกรมรวบรวมข้อมูล) ทราบอย่างชัดเจนถึงสิ่งที่พวกเขาควรคาดหวังจากบทความที่กำหนด

    แท็กหัวเรื่องใดที่จะวางบนหน้าแรกของเว็บไซต์

    หน้าแรก (หรือหน้าอื่นๆ เช่น หน้าบริการ) ควรมีโครงสร้างแบบลำดับชั้นของส่วนหัว ในส่วน <head> ขอแนะนำให้วาง H1 ด้านล่าง H2 H3 และอื่นๆ แม้ว่าจะไม่มีแท็กหัวเรื่องสูงสุดก็ตาม แม้แต่ในกรณีของ H1 คุณไม่จำเป็นต้องจำกัดตัวเองให้อยู่ในหัวข้อเดียว (ดังอธิบายเพิ่มเติมด้านล่าง)

    อย่างไรก็ตาม คุณต้องจำไว้ว่าส่วนต่างๆ เช่น “เกี่ยวกับเรา” หรือ “เรียนรู้เพิ่มเติม” ที่ใส่ในหัวเรื่องไม่ได้เพิ่มเนื้อหามากนัก นอกจากนี้ การ ใช้หัวข้อที่มีความสำคัญต่ำกว่า เช่น H5–H6 นั้นค่อนข้างไร้ประโยชน์ (ยกเว้นด้านการจัดวางของบทความ)

    เว็บไซต์หน้าเดียว = หนึ่งแท็กหัวเรื่อง H1?

    ในกรณีของเว็บไซต์หน้าเดียว จะไม่ชัดเจนเท่าบทความในบล็อก ใน ข้อกำหนด HTML5 (https://www.w3.org/TR/2014/REC-html5-20141028/sections.html) คุณจะพบแท็ก <section> ที่ รับผิดชอบสำหรับการกำหนดแต่ละส่วนในเอกสาร HTML ส่วนมักจะมีหัวเรื่อง ดังนั้นทุกส่วนอาจมีโครงสร้างลำดับชั้นที่แตกต่างกัน ตัวอย่างเช่น

     <section id="about">
 <h1>เกี่ยวกับฉัน</h1>
 <p>ข้อความเกี่ยวกับฉัน :)</p>
 <h2>ฉันชื่อดาวิด...</h2>
 <p>ย่อหน้าที่สองเกี่ยวกับฉัน ฮ่าๆ :)</p>
</section>

<section id=”ผลงาน”>
 <h1>ผลงานของฉัน</h1>
 <p>โครงการล่าสุดของฉัน...</p>
</section>

<section>
 <h1>คำรับรอง</h1>
 <p>ความคิดเห็นของลูกค้าที่พึงพอใจ...</p>
 <h2>ทวีตล่าสุด</h2>
 <p>ทวีต 1</p>
 <p>ทวีต 2</p>
</section>

<section>
 <h1>ติดต่อ</h1>
</section>

    ดังที่คุณเห็นด้านบน แต่ละส่วนมีส่วนหัว H1 ที่แตกต่างกัน จากนั้นจึงส่วนหัว H2 ... แม้ว่าคุณสามารถเลือกที่จะมีแท็กส่วนหัว H1 ได้ตั้งแต่หนึ่งแท็กขึ้นไป และต่อมาคือ H2, H3 เป็นต้น

    Google พูดอะไรเกี่ยวกับแท็ก Hx

    พนักงาน Google พูดมากเกี่ยวกับแท็กหัวเรื่อง แต่ก็คุ้มค่าที่จะอ้างอิงความคิดเห็นล่าสุดของพวกเขา ปีที่แล้ว John Meuller เขียนข้อความต่อไปนี้ในฟอรัม Google สำหรับเว็บมาสเตอร์: https://productforums.google.com/forum/#!msg/webmasters/BmyI8YX_25A/81hZNQFJDQA

    “เราไม่ถือว่า HTML5 แตกต่างไปและการมีแท็ก H1 หลายแท็กในหน้าเดียวก็ไม่เป็นไร ใช้เหตุผลอย่างสมเหตุสมผล ใช้ในจุดที่เหมาะสม ไม่มีบทลงโทษสำหรับการใช้ H1 อย่างแน่นอน”

    ต่อมาในเดือนเมษายน 2017 จอห์นได้ตอบกลับสั้น ๆ บน Twitter (https://twitter.com/JohnMu/status/852131231928135680) สำหรับคำถามที่ว่าหน้าเดียวสามารถใช้ H1 ได้กี่หัวข้อ

    สุดท้ายนี้ ในฐานะที่เป็นส่วนหนึ่งของซีรีส์ “SEO Snippets” บน YouTube บน Google Webmaster Channel เราได้อัปโหลดคำแนะนำสั้นๆ เกี่ยวกับปัญหาดังกล่าว:

    ให้ Senuto ลอง เริ่มการทดลองใช้ฟรีของคุณ

    ข้อมูลสำคัญอื่นๆ เกี่ยวกับหัวเรื่องเนื้อหา

    แม้ว่าพนักงานของ Google จะแนะนำ (อย่างน้อยก็ในแถลงการณ์อย่างเป็นทางการ) แนวทางที่ยืดหยุ่นในแท็กหัวเรื่อง แต่ ก็มีกฎสองสามข้อที่ควรค่าแก่การปฏิบัติตาม:

    • อย่าใช้หัวเรื่องบนหน้ามากเกินไป
    • ใช้หัวเรื่องตามความเหมาะสมและเมื่อแสดงข้อความด้านล่างเพื่อช่วยให้ผู้ใช้ทราบว่าย่อหน้าเริ่มต้นและสิ้นสุดที่ใด
    • อย่าใส่ทั้งย่อหน้า (เนื้อหาทั้งหมด) ในหัวเรื่อง
    • อย่าใช้เฉพาะคำสำคัญ โดยเฉพาะในรูปแบบที่ผิดธรรมชาติ
    • อย่าซ่อนหัวเรื่องในข้อความเนื้อหาโดยใช้ขนาดแบบอักษรเดียวกันสำหรับทั้งหัวเรื่องและข้อความเนื้อหา
    • รักษาลำดับชั้นของโครงสร้างไว้
    • บางครั้งอาจใช้แท็ก <strong> แทนแท็กหัวเรื่อง ????

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

    ให้ Senuto ลอง เริ่มการทดลองใช้ฟรีของคุณ