มันเป็นเรื่องธรรมดาสำหรับนักพัฒนา Front-end ที่จะใส่ชื่อเว็บไซต์หรือโลโก้ในแท็ก H1 และชื่อใน H2 แต่ส่วนใหญ่ชื่อของหน้า / บทความนั้นสำคัญกว่าเพราะมีค่าเนื้อหา ดังนั้นคำถามของฉันคือสิ่งที่เป็นวิธีที่ดีที่สุดจากมุมมองความหมายและ SEO ตัวอย่าง:
ระบุตัวแปรอื่น ๆ หากคุณคิดว่าพวกเขาจะมีผลกระทบที่ใหญ่กว่า
คำตอบ:
ฉันมักจะไม่ใส่โลโก้หรือชื่อเว็บไซต์ใน H1 วิธีที่ฉันชอบดูก็คือแต่ละหน้าเป็นเอกสาร เอกสารนั้นเป็นเรื่องเกี่ยวกับเรื่องใดเรื่องหนึ่งตามที่ปรากฏในชื่อหน้าและหัวข้อหลัก เว็บไซต์เป็นเพียงผู้เผยแพร่เอกสาร ดังนั้นความหมายมันไม่ถูกต้องที่จะใช้โลโก้ไซต์หรือชื่อเป็นหัวเรื่องหลักของแต่ละหน้า โลโก้จะปรากฏเด่นชัดเพื่อเตือนผู้ใช้ว่าพวกเขาอยู่ที่ไหนและเพื่อจุดประสงค์ในการสร้างแบรนด์ แต่จริงๆแล้วพวกเขาไม่ได้เป็นส่วนหนึ่งของเนื้อหาหรือเอกสาร
ฉันหมายถึงเมื่อคุณดูข่าวคุณอาจเห็นโลโก้ช่องข่าวเล็ก ๆ อยู่ตรงมุม แต่เรื่องราวข่าวจะไม่มีชื่อว่า "CNN" หรือ "BBC News" พาดหัวจะเกี่ยวกับเรื่องราวไม่ใช่เครือข่ายที่เผยแพร่เรื่องราว ในทำนองเดียวกันเมื่อคุณอ่านนิตยสารจะใช้เฉพาะชื่อบทความในหัวเรื่องเท่านั้นไม่ใช่ชื่อสิ่งพิมพ์
การใช้แท็ก H1 สำหรับโลโก้ / ชื่อไซต์นั้นไม่ถูกต้องในเชิงความหมายและอีกอันหนึ่งสำหรับชื่อเอกสาร ส่วนหัวกำหนดโครงสร้างลำดับชั้นของเนื้อหาในหน้า; ใช้หนึ่งสำหรับชื่อเว็บไซต์และอีกชื่อสำหรับเอกสารเป็นเหมือนพูดหน้านี้มี 2 ส่วนหลัก: "mydomain.com" และ "ติดต่อเรา"
h1แต่บนหน้าหลักเท่านั้น h1ไปที่เฉพาะเจาะจงและรายการชื่อรายการขณะนี้อยู่ใน
ดูเอกสารบัตรรายงาน SEOของ Google หน้า # 37 :
หน้าหลักของผลิตภัณฑ์ส่วนใหญ่มีโอกาสใช้
<h1>แท็กเดียวเช่นตัวอย่างด้านบน แต่ขณะนี้ใช้แท็กส่วนหัวอื่น ๆ เท่านั้น (<h3>ในกรณีนี้) หรือรูปแบบตัวอักษรที่ใหญ่ขึ้น ในขณะที่จัดแต่งข้อความของคุณเพื่อให้มีขนาดใหญ่ขึ้นอาจบรรลุการนำเสนอแบบภาพเดียวกัน แต่ไม่ได้ให้ความหมายเชิงความหมายแบบเดียวกันกับเครื่องมือค้นหาที่<h1>แท็กทำ ชื่อผลิตภัณฑ์และ / หรือคำสองสามคำเกี่ยวกับคุณสมบัติของผลิตภัณฑ์นั้นดีเยี่ยมที่มีอยู่ใน<h1>แท็กสำหรับหน้าหลักของผลิตภัณฑ์
ตามการวิเคราะห์ข้อเสนอของ Google ฉันจะได้ข้อสรุปว่า Google คาดหวังว่าค่าเฉพาะหน้าเฉพาะจะปรากฏใน H1 (ภาพประกอบในเอกสารที่เชื่อมโยงแสดงให้เห็นนี้)
นี่คือเหตุผลที่ดี: โลโก้ของคุณเป็นภาพไม่ใช่ <h1>
<h1>ควรใช้ความหมายสำหรับชื่อหน้าและชื่อหน้าจะต้องไม่ซ้ำกันต่อหน้า โลโก้หรือชื่อเว็บไซต์ของคุณไม่ใช่ชื่อหน้า (นอกเหนือจากอาจเป็นหน้าแรก)
โลโก้ / ชื่อเว็บไซต์ของคุณควรอยู่ใน div ธรรมดาซึ่งอาจมี ID ของ 'หัวเรื่อง' หรือ<header>แท็กหากใช้ HTML5
<img>แท็กมันสามารถเป็นพื้นหลังได้ไม่ใช่พื้นหลังบน<h1>แท็ก อย่างไรก็ตามในขณะที่บทความที่เชื่อมโยงระบุโลโก้ของคุณสามารถมองเห็นเป็นเนื้อหาของหน้า
IMO ควรมีเพียง H1 เดียวในหน้า และ H1 ควรอยู่ก่อน H2 - เพื่อรักษาลำดับชั้นที่ถูกต้องของเนื้อหาของคุณ
โลโก้มักถูกทำซ้ำในทุกหน้าและอย่างที่คุณพูดในทุก ๆ หน้าชื่อเรื่องนั้นมีความสำคัญมากกว่า
ในหน้าแรกของฉันจะพิจารณาใช้:
โลโก้ / ชื่อ - H1 [, ชื่อ - H2]
แม้ว่าในหน้าแรกของคุณโลโก้อาจเป็นชื่อของคุณ
อย่างไรก็ตามในหน้าถัดไปทั้งหมดที่ฉันจะไป:
โลโก้ - แท็กอื่น ๆ ชื่อ - H1
แม้จะมีโลโก้เป็นภาพพื้นหลังตามความเหมาะสม
สิ่งที่คุณกำลังมองหาในแท็ก H1 ของคุณคือชื่อหน้าหรือสิ่งที่ทำให้หน้านี้ไม่เหมือนใคร หากคุณกำลังใช้รูปภาพอยู่คุณจำเป็นต้องใช้วิธีสำรองเพื่อลดความสามารถในการย่อยสลาย:
<style>
h1{background: url('imagePathHere.gif');width:60px;height:10px;}
h1 span{display:none}
</style>
<h1><span>Unique Page Title</span></h1>
วิธีนี้คุณสามารถตั้งค่ารูปภาพเพื่อแสดงสำหรับ H1 (ซึ่งคนมักใช้ในทางที่ผิดเป็นพื้นที่โลโก้) และยังมีเนื้อหาที่ดีอยู่ภายในสำหรับผู้ที่ใช้ประสบการณ์อินเทอร์เน็ตที่เสื่อมโทรม นอกจากนี้ยังทำให้ค่า SEO ของคุณมีความสุข
นี่เป็นคำถามที่ยอดเยี่ยมเนื่องจากการปฏิบัติ (และแม่แบบ) ที่มีอยู่
โดยส่วนตัวแล้วฉันชอบอ้างถึงตรรกะ "เค้าร่าง 101" โดยพิจารณาจากสิ่งต่อไปนี้:
H1 เป็นเหมือนชื่อเรื่อง (แน่นอนว่าคุณต้องการเติมชื่อ HTML ของคุณ) และควรมีเพียงหนึ่งรายการต่อหน้าเช่นเดียวกับหน้ามีเพียงหนึ่งชื่อ
H2 นั้นเหมือนกับตัวเลขโรมันในโครงร่าง: I. , II., III. ฯลฯ
H3 จะเป็นโครงร่างเทียบเท่ากับ A. , B. , C
บ่อยครั้งที่การใช้งานจริงของตรรกะนี้เป็นการยากที่จะบังคับใช้บนหน้าเว็บอย่างแน่นอน - มีข้อมูลจำนวนเล็กน้อยที่ไม่ได้เกิดขึ้นกับลำดับชั้นนั้น อย่างไรก็ตามถ้าคุณนั่งลงและพยายามที่จะทำลายมันด้วยตรรกะนั้นฉันรู้สึกว่ามีประโยชน์กับวินัย
ฉันh1สำหรับผู้ชายชื่อเรื่องหลัก และหัวเรื่องหลักคือชื่อไซต์ที่มีการตกแต่งหรือตามที่คุณเรียกว่าโลโก้ นี่คือจุดสำคัญ - ในส่วนหัวของเว็บไซต์โลโก้ไม่ได้เป็นโลโก้จริงๆมันเป็นส่วนหัวของเว็บไซต์ นักออกแบบต้องการออกแบบเป็นโลโก้
มีอะไรผิดปกติกับโลโก้ -> H1?
<div>Google</div>
<h1>About Us</h1>
ขณะนี้เป็นh1ส่วนที่สำคัญที่สุดที่จะบอกผู้เข้าชมว่าเกี่ยวข้องกับอะไรผู้เข้าชมไม่สามารถเข้าใจหน้าได้เนื่องจากh1มีความเฉพาะเจาะจงมากเกินไป เกี่ยวกับใคร
<h1>Google</h1>
<h2>About Us</h2>
หน้านี้เป็นเรื่องเกี่ยวกับ Google นี่คือส่วนเกี่ยวกับเรา ดู - ไม่มีคำถาม? ทุกอย่างเรียบร้อย.
โครงสร้างหน้า หากคุณใส่หัวเรื่องหลักของเว็บไซต์เป็น div หรือ p ไม่มีอะไรที่จะเชื่อมโยงกับมัน
<p>Google</p>
<h1>About us</h1>
ฉันจะเชื่อมโยง "เกี่ยวกับ U" กับ Google ได้h1อย่างไรในภายหลัง เพราะสิ่งที่มาหลังจากH1นั้นเกี่ยวข้องกับมันไม่ใช่สิ่งที่เกิดขึ้นก่อนหน้านี้
<h1>Google</h1>
<h2>About Us</h2>
"เกี่ยวกับเรา" เป็นของ Google ไม่มีคำถาม.
HTML เป็นภาษาสำหรับข้อมูล DESCRIBE ดังนั้นคุณไม่แสดงข้อมูลคุณอธิบายมัน และแต่ละหน้ามีความเป็นอิสระ ดังนั้นคุณอธิบายหนึ่งหน้าเนื่องจากไม่มีการเชื่อมโยงระหว่างหน้า เพียงลิงก์ที่ลิงค์แต่ละหน้า
<p>Google</p>
<h1>About us</h1>
หน้านี้เกี่ยวกับเรา มันคือใคร กำกวม มันอธิบายสิ่งที่เรียกว่า "เกี่ยวกับเรา"
<h1>Google</h1>
<h2>About Us</h2>
เว็บไซต์นี้อธิบายถึง google และมีส่วนเกี่ยวกับเรา เรา = อาจเป็น google ได้เพราะโครงสร้างอธิบายแบบนั้น
ฉันหวังว่าฉันทำประเด็นของฉัน :)
PS! คุณไม่สามารถใช้h2- h1- h3เพราะมันไร้เหตุผลดังนั้นจึงล้มเหลวอย่างมาก เพียงเพราะ w3c ไม่ได้บอกว่าไม่ได้รับอนุญาตก็ไม่ถูกต้อง มันไร้เหตุผลลองคิดดู
โลโก้เป็นแท็ก h2?
ฉันแค่เรียกดูรอบ ๆ SitePoint (www.sitepoint.com) ซึ่งเป็นบล็อก WordPress ที่มีทั้งหน้าและบล็อกปกติ โดยทั่วไปแล้วฉันพบว่าพวกเขามีชื่อหน้าเป็นแท็ก h1 และโลโก้ตั้งเป็น h2 คุณสามารถดูได้ที่หน้าบล็อกเช่น www.blogs.sitepoint.com/category/design/ ล่องเรือรอบ ๆ เว็บไซต์คุณพบการตั้งค่าที่แตกต่างกัน ฉันมักจะไม่พบแท็ก h1 เป็นตัวอย่างในหน้าผลิตภัณฑ์หลัก (http://products.sitepoint.com/) แม้ว่าจากหน้านั้นหากคุณคลิกที่ผลิตภัณฑ์ใด ๆ สำหรับข้อมูลเพิ่มเติม www.sitepoint.com/books/design2/ คุณจะพบอีกครั้งว่า h1 เป็นชื่อหน้า แต่ h2 เป็นโลโก้ หน้าเว็บทั่วไปคล้ายกับบล็อก (ดู www.sitepoint.com/help/) ในกรณีนี้หัวเรื่องของคำถามที่พบบ่อยคือแท็ก h2 ทั้งหมด
ทอมโรเจอร์ส
โลโก้ของคุณไม่จำเป็นต้องซ้อนในหัวเรื่อง - รูปภาพที่เชื่อมโยงอย่างง่ายในheaderนั้นเพียงพอแล้ว แต่ทั้งสองชื่อเว็บไซต์ของคุณและชื่อหน้า / <h1>บทความที่ควรจะเป็น บทความนี้เป็นข้อมูล: ความจริงเกี่ยวกับหลาย H1 แท็กในยุค