วิธีใช้แท็กหัวเรื่อง HTML อย่างถูกต้อง

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

สมัครสมาชิกช่อง Youtube ของเรา

เหตุใดจึงต้องใช้แท็กหัวเรื่อง HTML

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

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

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

และแต่ละแท็กในหน้าของคุณช่วยทั้งหมดนี้ในแบบของตัวเอง

ลำดับชั้นของแท็กเป็นสิ่งสำคัญ

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

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

นี่คือตัวอย่าง:

<h1>Title</h1>
    <h2>Main Point Number 1</h2>
        <h3>Subtopic</h3>
            <h4>Very specific point</h4>
        <h3>Main Point Number 2</h3>
            <h4>Subtopic</h4>
                <h5>Example or important chart</h5>
            <h4>Specific point</h4>
                <h5>Example or important chart</h5>
                    <h6>Highly specific example explaining this point</h6>

อาจมีบางกรณีที่คุณมี H6 เดียวที่อยู่เหนือ H4 แต่โดยส่วนใหญ่ Google และเครื่องมือค้นหาอื่นๆ จะกำหนดลำดับความสำคัญของหัวข้อและวัดประสิทธิภาพของเนื้อหาเพื่อจุดประสงค์ในการค้นหาโดยใช้หัวข้อเพื่อสำรวจเนื้อหาของคุณ

แท็ก H1

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

ภาพด้านบนแสดงแท็ก H1 ที่ใช้เป็นชื่อบทความสำหรับบทความในบล็อก Elegant Themes เป็นแท็ก H1 เพียงแท็กเดียวในหน้าด้วย นี่แสดงว่าเป็นหัวข้อของเนื้อหาบนหน้า

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

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

เมื่อใดควรใช้หัวเรื่อง H1 หลายรายการ

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

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

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

คุณอาจเลือกใช้แท็ก H1 ทุกครั้งที่ใช้แท็ก ส่วน ในไซต์ของคุณ แต่เราแนะนำให้ทำเฉพาะเมื่อเป็นส่วนที่มีความสำคัญขนานกับชื่อหน้า แทนที่จะเป็นส่วนรอง

แท็ก H2

ตอนนี้แท็ก H2 น่าจะเป็นแท็กส่วนหัว HTML ที่ใช้มากที่สุดในหน้าเว็บของคุณ และด้วยเหตุผลที่ดี โพสต์และหน้าบนอินเทอร์เน็ตส่วนใหญ่ประกอบด้วยหัวข้อเดียวโดยมีหัวข้อย่อยเพียงไม่กี่หัวข้อ เราขอแนะนำว่าเนื้อหาทุกชิ้นที่คุณสร้างมีแท็ก H2 อย่างน้อยหนึ่งแท็ก Yoast และปลั๊กอิน SEO อื่น ๆ แนะนำหัวเรื่องทุกๆ 300 คำโดยประมาณ แท็ก H2 มีไว้สำหรับเนื้อหาของคุณ ทั้งนี้ขึ้นอยู่กับเนื้อหาของคุณ

พวกเขาแยกหัวข้อย่อย (หรือขั้นตอน) เพื่อความสะดวกในการอ่าน ตัวอย่างเช่น โพสต์ส่วนใหญ่ของเราประกอบด้วยส่วนหัว H2 (โดยมี H3 หากมี) นั่นเป็นเพราะบทความของเราอยู่ในหัวข้อเดียว ซึ่งเรากำลังพยายามแก้ไขปัญหาเดียว เราจะมีชื่อเช่น How to Use OBS Studio to Livestream เป็น H1 แต่หัวข้อย่อยเช่น “How to Get Started with OBS Studio” จะอยู่ในรูปแบบ H2

แท็ก H2 แสดงถึงแต่ละขั้นตอนที่เกี่ยวข้องโดยตรงกับหัวข้อ H1 ในโพสต์นั้นเราใช้โครงสร้างต่อไปนี้:

<h1>How to Use OBS Studio to Livestream</h1>
    <h2>What is OBS Studio?</h2>
        <h3>What about SLOBS?</h3>
    <h2>How to Get Started with OBS Studio</h2>
    <h2>OBS Studio Setup</h2>
        <h3>Setting Up a Scene in OBS Studio</h3>
        <h3>Adding Sources in OBS Studio</h3>
    <h2>Adjusting Sources Onscreen</h2>
        <h3>RMTP Keys and OBS Studio</h3>
    <h2>Wrapping Up</h2>

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

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

แท็ก H3

ในทางกลับกัน แท็ก H3 เป็นที่ที่บทความของคุณสามารถเจาะลึกรายละเอียดของหัวข้อของคุณได้ คุณไม่ควรใช้แท็ก H3 เหล่านี้โดยตรงภายใต้ H1 Googlebots และเสิร์ชเอ็นจิ้นมองว่าเป็นหัวข้อย่อยอย่างแน่นอน ในขณะที่ H2 ได้รับการยอมรับว่าเป็นหัวเรื่องหลักสำหรับส่วนต่างๆ ภายในบทความเดียว (โดยที่ H1 จะประกาศหัวข้อหลักเป็นชื่อเรื่อง โปรดจำไว้ว่า)

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

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

แท็ก H4, H5, H6

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

I. Idea 
    A. Subpoint
        1. Detail
II. Idea
	A. Subpoint
		1. Detail
III. Idea

H4

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

H5 และ H6

คุณสามารถใช้ส่วนหัว H5 และ H6 ได้หลายวิธี

วิธีแรก

(ตัวอย่างเช่น เราได้แบ่งส่วนนี้ออกเป็นส่วนต่างๆ ผ่านหัวเรื่อง และตอนนี้เราอยู่ภายใต้ H4 เพราะเป็นหัวข้อย่อยของบทความหลัก)

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

วิธีที่สอง

บางคนใช้แท็ก H5 และ H6 เป็นหัวข้อการจัดรูปแบบ "พิเศษ" พวกเขาจะใช้ CSS พิเศษกับแท็กส่วนหัว HTML สองแท็กที่แตกต่างจาก H1 ถึง H4 อย่างสิ้นเชิง จากนั้นคุณสามารถใช้พวกเขาเพื่อเรียกร้องความสนใจในหัวข้อและแนวคิดที่อาจถูกมองข้าม

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

เพียงจำไว้ว่าแม้ว่าคุณจะใช้พวกมันสำหรับการจัดรูปแบบพิเศษ คุณจะไม่แยกจากลำดับชั้น ให้เป็นระเบียบ ดังนั้น หากคุณใช้ H6 เพื่อจัดรูปแบบหัวเรื่องย่อย ตรวจสอบให้แน่ใจว่าหัวข้อถัดไปที่คุณใช้คือ H1 หรือ H2 เพื่อแสดงว่าคุณได้ย้ายกลับไปที่โครงสร้างมาตรฐานแล้ว

สิ่งที่ไม่ควรทำกับแท็กหัวเรื่อง HTML

อย่าจัดโครงสร้างหน้าเดียวที่มีลำดับชั้นของหัวเรื่องทั้งหมดลงมา คุณดีกว่าด้วย H1 สำหรับชื่อเรื่องและ H2 ทั้งหมด แทนที่จะซ้อนกันแต่ละหัวข้อต่อเนื่องกัน

ใช่:

<h1>Title</h1>
    <h2>Main Point Number 1</h2>
    <h2>Main Point Number 2</h2>
    <h2>Main Point Number 3</h2>
    <h2>Main Point Number 4</h2>

เลขที่:

<h1>Title</h1>
    <h2>Point Number 2</h2>
    <h3>Point Number 3</h3>
    <h4>Point Number 4</h4>
    <h5>Point Number 5</h5>
    <h6>Point Number 6</h6>

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

เลขที่:

<h1>Title</h1>
    <h3>Point Number 2</h3>
    <h2>Point Number 3</h2>
    <h6>Point Number 4</h6>
    <h5>Point Number 5</h5>
    <h4>Point Number 6</h4>

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

ปิดท้ายด้วยแท็กหัวเรื่อง HTML

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

คุณใช้แท็กหัวเรื่อง HTML ถูกต้องหรือไม่?

บทความภาพโดย VectorV / shutterstock.com