ซ่อน h1 แล้วสวยด้วย images

หากคุณเป็นคนหนึ่งที่ใส่ใจใน seo (search engine optimization) ก็ย่อมจะทราบความสำคัญของแท็ก <h1> ซึ่งมีความสำคัญ ต่อหน้าเว็บเพจ เป็นที่สำหรับ keyword แต่ h1, h2มันก็เป็น text ตัวใหญ่ที่ตกแต่งได้เพียงใส่สีขีดเส้นใต้เท่านั้น คงขัดใจ webdesigner อยู่ไม่น้อยทีเดียว ทางเลือกสำหรับการอยู่ร่วมกันอย่างสันติ ระหว่าง web seo และ web design ก็คือ ใช้ css เข้าช่วย อย่างไรนั้นมาดูกัน

รูปนี้ผมเซฟมาจากหน้าเว็บ playpark.com ซึ่งใช้รูปนี้เป็นหัวข้อและลิ้งค์

PLAY CLUB

ส่วนอันนี้เป็นหัวข้อที่ใช้ แท็ก <h2>PLAY CLUB</h2> เราจะจับนำมารวมกัน

เขียน html ดังนี้

<div class=”pc”>
<h2><span></span>PLAY CLUB</h2>
</div>

จะเห็นว่า มีแท็ก <span></span> อยู่ใน h2 เป็นตัวที่เราจะใส่ image เข้าไปนั่นเอง

จากนั้น เราก็มาเขียนในส่วน css ดังนี้

.pc h2 {width:210px; height:41px; margin:0; padding:0; overflow:hidden;}
.pc h2 span {background:url(images/play_club.gif) no-repeat left top;
display:block;width: 100%; height: 100%;}

ผลลัพธ์ที่ได้จะเป็นแบบนี้



ลอง view/source แล้ว search (Ctrl+f) คำว่า result ดูนะครับ จะเห็นว่า ยังคงมี แท็ก h2 อยู่แต่แสดงรูปแทนนะครับ

ทำไมจึงเป็นเช่นนี้?
ในตัว h2 นั้นเราได้กำหนด ความกว้างและสูงเท่ากับรูป ให้ margin padding เท่ากับ 0 และ overflow:hidden นั้นหมายถึงว่า เมื่อมีส่วนที่เกินนอกเหนือไปจากที่กำหนดนี้ จะไม่แสดงผล

ในส่วน span เราให้ความกว้างสูงเท่ากับ 100% แล้วใส่แบ็คกราวน์ คือ รูปที่จะแสดง ส่วนสำคัญคือ display:block เป็นการทำให้ขอบเขตของ span มีลักษณะเป็น ก้อนสี่เหลี่ยม ซึ่งก็จะดันให้ตัว h2 นั้นเกินขอบเขตออกไปนั่นเอง

******และแล้ว bot จาก search engine ทั้งหลายก็ยังคงเห็น h1 h2 ของคุณ หวังว่าบทความนี้จะมีประโยชน์กับเพื่อนๆนะครับ และจะได้เป็นมาตรฐานในการทำเว็บครั้งต่อๆไป

Related Articles

• ใช้ภาพแทน text link (9)
• เทคนิค css 1 บรรทัด (6)
• ทำปุ่มเมนู CSS ขอบมนโดยใช้รูปเดียว (22)
• ทำ opacity ให้ cross browser (17)
• ทำ layout ให้สูงเท่ากัน ทุกคอลัมน์ (12)