การใช้แท็ก H โดยเฉพาะอย่างยิ่งการใช้ H1 นั้นเป็นปัญหาที่ถกเถียงกันอยู่เสมอและยังเป็นคำถามที่ควรค่าแก่การศึกษาของเรา จากประสบการณ์ของรุ่นก่อนของฉันฉันเขียนบทความนี้ตามความเข้าใจของฉันเกี่ยวกับแท็ก H โดยหวังว่ามันจะเป็นประโยชน์กับทุกคน H แท็ก คืออะไร ?
W3C ชี้ให้เห็นว่าแท็ก H1-H6 สามารถกำหนดชื่อได้ H1 กำหนดชื่อที่ใหญ่ที่สุด H6 กำหนดชื่อที่เล็กที่สุด
H1, H2, H3, H4, H5, H6, เป็นแท็กชื่อเรื่องและลดลงตามความสำคัญ ฉันคิดว่ามีความจำเป็นที่จะต้องปฏิบัติตามหลักการดังกล่าวซึ่งสามารถสร้างความสัมพันธ์แบบลำดับชั้นของหน้าเว็บที่ชัดเจนขึ้นและอนุญาตให้เครื่องมือค้นหารวบรวมข้อมูลและวิเคราะห์เนื้อหาหัวข้อของหน้าเว็บได้ดีขึ้นเพื่อความเข้าใจที่ดีขึ้นโปรดดูรหัสต่อไปนี้:
<body> <h1> ชื่อระดับแรก </h1> <p> ย่อหน้า </p> <div> <h2> ชื่อระดับที่สอง </h2> <p> ... </p> </h3> ชื่อระดับที่สอง </h3> <p> ...
รูปแบบเริ่มต้นของเบราว์เซอร์ยังลดลงตามความสำคัญและขนาดตัวอักษรเปลี่ยนจากขนาดใหญ่เป็นขนาดเล็กจาก H1 เป็น H6 มีความแตกต่างบางอย่างในรูปแบบในเบราว์เซอร์ที่แตกต่างกัน เนื่องจากความแตกต่างนี้เรามักจะใช้ CSS เพื่อรวมเข้าด้วยกันในรูปแบบ
คุณใช้มันอย่างไร?ทุกวันนี้เว็บไซต์หลายแห่ง (รวมถึงเว็บไซต์ที่รู้จักกันดีเช่น Taobao, Sina, Sohu) ชอบใช้ H1 บนโลโก้ดังที่แสดงในภาพ:
ไม่มีเหตุผลที่ทุกคนจะใช้สิ่งนี้ แต่ในความเป็นจริงมีข้อได้เปรียบมากมาย: มันสรุปเนื้อหาของทั้งหน้าและโลโก้อยู่ใกล้กับร่างกายมากซึ่งทำให้สะดวกสำหรับเครื่องมือค้นหาที่จะคว้าหัวข้อที่เร็วที่สุดและในแง่ของความหมาย
แน่นอนว่าไม่ใช่ทุกเว็บไซต์ที่ใช้ H1 บนโลโก้ การใช้งานของ NetEase เป็นตัวอย่างที่พิเศษกว่า:
NetEase ตั้งค่าการแสดงผล: ไม่มีสไตล์ที่จะซ่อนซึ่งไม่เพียง แต่แก้ปัญหาความขัดแย้งที่ไม่รู้ว่าจะใส่ H1 แต่ยังมีบทบาทของการเพิ่มประสิทธิภาพ SEO ซึ่งสามารถกล่าวได้ว่าฆ่านกสองตัวด้วยหินก้อนเดียว
และหน้าแรกของ Tencent H1 เป็นข่าวพาดหัวดังที่แสดงในภาพ:
จากตัวอย่างข้างต้นเราจะเห็นว่าการใช้งานของ H1 นั้นแตกต่างกันสำหรับเว็บไซต์หลัก จะวางไว้ที่ไหนบน H1? มันเป็นปัญหาที่ถกเถียงกันอยู่เสมอ แต่ฉันไม่คิดว่าจะมีคำตอบที่แน่นอนว่าจะวางไว้ที่ไหน ฉันคิดว่ามันควรได้รับการพิจารณาตามปัจจัยต่าง ๆ เช่นการวางตำแหน่งประเภทและพฤติกรรมการค้นหาผู้ใช้ของหน้าเว็บ ตัวอย่างเช่นสำหรับเว็บไซต์ข่าวคุณสามารถใส่ H1 ลงในข่าวพาดหัว สำหรับเว็บไซต์พอร์ทัลที่ครอบคลุมคุณสามารถใส่ H1 ลงในโลโก้ หากเว็บไซต์ของ บริษัท สามารถใส่ H1 ลงในโลโก้ได้เพราะผู้ใช้มักต้องการค้นหาชื่อของ บริษัท หากมีสโลแกนเว็บไซต์คุณสามารถใส่ H1 ลงบนสโลแกนซึ่งเป็นตัวเลือกที่ดี ในระยะสั้นการเลือกอันที่เหมาะสมที่สุดคือสิ่งที่ดีที่สุด
เกี่ยวกับ H2 ฉันมักจะใช้มันในคอลัมน์ขนาดใหญ่ของหน้าแรกดังที่แสดงในรูปภาพ:
สำหรับหน้าเนื้อหาฉันคุ้นเคยกับการให้ H2 กับชื่อบทความมากขึ้นและชื่อคอลัมน์จะแสดงโดย H3 ดังที่แสดงในรูป:
H3 ส่วนใหญ่ใช้สำหรับชื่อคอลัมน์ดังที่แสดงในรูป:
แท็ก H ที่ใช้ในหน้าแรกของผลิตภัณฑ์ R&F ไม่เพียง แต่มีความสัมพันธ์แบบลำดับชั้นที่ชัดเจน แต่ยังเน้นถึงความสำคัญของเนื้อหาผลิตภัณฑ์ซึ่งยังเป็นประโยชน์อย่างมากต่อเครื่องมือค้นหา
ตัวอย่างต่อไปนี้น่าสนใจมากดังที่แสดงในรูป:
ชื่อคอลัมน์ใช้ H2 และชื่อข่าวใช้ H1 หากคำสั่งซื้อของพวกเขากลับด้านตามความสัมพันธ์แบบลำดับชั้นมันไม่ผิด เมื่อใช้แท็ก H จริง ๆ เรายังสามารถกำหนดได้ตามความสำคัญของเนื้อหา ดังนั้นโดยการใช้ทฤษฎีพื้นฐานอย่างยืดหยุ่นเท่านั้นที่สามารถขยายได้สูงสุด
จากตัวอย่างข้างต้นมันไม่ยากที่จะเห็นว่าการใช้แท็ก H นั้นมีความยืดหยุ่นมากและไม่ จำกัด เฉพาะการใช้งานเหล่านี้ ในแอปพลิเคชันของเราเราจำเป็นต้องปฏิบัติตามหลักการของการลดความสำคัญและเรียนรู้จากตัวอย่างหนึ่งและนำไปใช้กับด้านอื่น ๆ เช่นเดียวกับ H4-H6
สรุปบางส่วนขึ้นอยู่กับความเข้าใจและการประยุกต์ใช้แท็ก H ด้วยวัสดุอ้างอิงผู้เชี่ยวชาญด้านการผลิตส่วนหน้าเว็บไซต์ที่รู้จักกันดี ฯลฯ ฉันได้สรุปข้อกำหนดต่อไปนี้โดยหวังว่าจะนำมูลค่าอ้างอิงมาให้คุณ
H1 ชื่อระดับแรก
มันแสดงถึงลำดับความสำคัญสูงสุดและตำแหน่งของมันมีความสำคัญเท่ากับตำแหน่งของคำหลักในหน้า โดยทั่วไปจะใช้ในชื่อเว็บไซต์หรือหัวข้อข่าวและเว็บไซต์ขนาดใหญ่บางแห่งยังใช้ในโลโก้ แม้ว่ารหัส H1 สามารถเขียนได้หลายอย่าง แต่จริง ๆ แล้วมีความเฉพาะเจาะจง เป็นการดีที่สุดที่จะปรากฏเพียงครั้งเดียวหรือไม่ในหน้าหนึ่ง
ชื่อ H2 ระดับ 2
ส่วนใหญ่จะปรากฏในชื่อบทความและชื่อคอลัมน์ของเนื้อหาหลักของหน้า โครงสร้างสามคอลัมน์โดยทั่วไปอยู่ตรงกลางและโครงสร้างสองคอลัมน์โดยทั่วไปอยู่ในด้านที่สำคัญ สามารถใช้กับ H3
H3 ระดับสามชื่อ
แถบด้านข้างของหน้าหลักทั่วไป H4 เป็นตัวเสริมและดูเหมือนจะไม่บ่อยนัก
ความสัมพันธ์ระดับหน้าไม่สามารถลึกเกินไปดังนั้น H4, H5, H6 โดยทั่วไปจะปรากฏน้อยกว่า