เรียนรู้ว่าทำไมควรใช้ H1 elements/tags เพียงครั้งเดียวต่อหน้า เพื่อ SEO ที่เหมาะสมที่สุด
หนึ่งในสิ่งแรกที่ web developer หรือ designer เรียนรู้คือ 6 ระดับของ HTML5 heading elements จาก H1 ถึง H6
ในฐานะ beginner คุณถูกบอกว่า H1 เป็น element สำคัญที่สุด และควรใช้สำหรับ main titles, headlines — สิ่งสำคัญที่สุด แล้วคุณค่อยลงมาจาก H2, H3, H4 เป็น subheadings ของเนื้อหา
ฉันสังเกตว่า beginners หลายคนใช้ H1 tags หลายครั้งในหน้าเดียวกัน ผมคิดว่าน่าจะเพราะพวกเขาคิดว่ามีหลาย text elements ในหน้านั้นที่สำคัญ แต่สิ่งนี้เป็นปัญหา
Search engines สมมติโดยอัตโนมัติว่าเนื้อหาที่ห่อหุ้มใน H1 tags คือ headline (main topic) ของเนื้อหา นี่สำคัญเพราะเมื่อคุณค้นหาบน SERPs (Search Engine Results Pages) สิ่งที่แสดงเมื่อกด enter คือ:
- Title
- Meta description
- URL
หากคุณใช้ H1 หลายครั้งต่อหน้า คุณกำลัง dilute priorities ของแต่ละหน้า Search engines จะรู้ยังไงว่าจะเลือก H1 heading ไหนเมื่อแสดงผลการค้นหา? โดย default search engines จะ ปกติ เลือกจากบนลงล่าง — แต่ไม่ guaranteed เนื่องจากหลาย factors ส่งผลต่อการ index และแสดงเนื้อหา
Search engines ใช้ H1 headings ของคุณเพื่อกำหนดว่าหัวข้อสำคัญที่สุดในแต่ละหน้าคืออะไร แต่ถ้าคุณบอกว่าทุกอย่างสำคัญ แล้วไม่มีอะไรสำคัญเลย
ตัวอย่างคลาสสิกของการ overuse H1 คือ portfolios ที่ creator มี grid item gallery บน front page แสดง list ของ projects
ตอนแรก ใช้ H1 สำหรับ project titles ของ grid items ดูสมเหตุสมผล เพราะแต่ละ project นำไปสู่ individual URL ที่ describe project นั้น
นี่คือ SEO ที่ผิด
วิธีที่ถูกต้อง:
- บน front page ที่แสดง grid list ของ client projects ควรใช้ H2, H3, หรือ H4 สำหรับ grid item titles
- บนหน้าของแต่ละ project ควรมี project title ห่อหุ้มใน H1 (
<h1></h1>) tags หนึ่ง H1 element ต่อ project page
คุณสามารถใช้ H2, H3, H4, ฯลฯ ได้มากเท่าไหร่ก็ได้ในแต่ละหน้า เลือกหนึ่งใน 3 heading tags นี้ห่อหุ้ม grid item titles
ทำไม H2, H3 หรือ H4? มีความแตกต่างไหม? ผมคิดว่าไม่แตกต่าง ผมสังเกตว่า top websites (ด้าน ranking) ใช้ heading tags 3 ตัวนี้ ผมไม่พบ evidence ว่า H2 ดีกว่า H3 หรือ H4
อ้างอิง:
- css-tricks.com และ Scotch.io ใช้ H2
- Medium.com และ sidebar.io ใช้ H3
คุณควรพิจารณาว่า headings ไม่ได้ใช้แค่บอก search engines เรื่องโครงสร้างเนื้อหา แต่ยังใช้บอกผู้ใช้แบบ visual เกี่ยวกับ hierarchy ของเนื้อหา
Heading element ที่ใช้แสดง grid item titles อาจถูกกำหนดโดย type scale (list of font-sizes) ที่คุณใช้สำหรับเว็บไซต์ ดังนั้นถ้า H3 ตั้งค่า font-size: 1.5rem; และ font-size นั้นเหมาะกับ grid item titles ให้ใช้นั้น
