ซ่อน 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%;}
ผลลัพธ์ที่ได้จะเป็นแบบนี้
PLAY CLUB
ลอง view/source แล้ว search (Ctrl+f) คำว่า result ดูนะครับ จะเห็นว่า ยังคงมี แท็ก h2 อยู่แต่แสดงรูปแทนนะครับ
ทำไมจึงเป็นเช่นนี้?
ในตัว h2 นั้นเราได้กำหนด ความกว้างและสูงเท่ากับรูป ให้ margin padding เท่ากับ 0 และ overflow:hidden นั้นหมายถึงว่า เมื่อมีส่วนที่เกินนอกเหนือไปจากที่กำหนดนี้ จะไม่แสดงผล
ในส่วน span เราให้ความกว้างสูงเท่ากับ 100% แล้วใส่แบ็คกราวน์ คือ รูปที่จะแสดง ส่วนสำคัญคือ display:block เป็นการทำให้ขอบเขตของ span มีลักษณะเป็น ก้อนสี่เหลี่ยม ซึ่งก็จะดันให้ตัว h2 นั้นเกินขอบเขตออกไปนั่นเอง
******และแล้ว bot จาก search engine ทั้งหลายก็ยังคงเห็น h1 h2 ของคุณ หวังว่าบทความนี้จะมีประโยชน์กับเพื่อนๆนะครับ และจะได้เป็นมาตรฐานในการทำเว็บครั้งต่อๆไป 
Jennessa said,
April 14, 2007 @ 7:44 pm
เพิ่งเคยได้ยินเทคนิคแบบนี้ค่ะ ขอบคุณมากค่ะ
แต่สงสัยนิดนึงว่า ทำแบบนี้จะดีกว่านำรูปภาพมาใช้แล้วใส่ ALT เป็นคำอธิบายรึป่าวคะ ในแง่ของ SEO อย่างเช่นในกรณีนี้ ก็ใช้เป็น แทน ได้รึป่าวคะ
Jennessa said,
April 14, 2007 @ 7:45 pm
ใช้เป็น tag แทนน่ะค่ะ แล้วตรง H1,H2 ก็นำมาใส่ที่ ALT แทน
admin said,
April 14, 2007 @ 8:41 pm
alt เป็นการใช้อธิบายรูปครับ ว่า รูปนั้นคืออะไร เกี่ยวข้องกับอะไร ในแง่ของ web standards แล้ว ไม่ควรเอามาใช้แทนกันนะครับ
Jennessa said,
April 16, 2007 @ 9:40 pm
เข้าใจแล้วค่ะ ขอบคุณมากค่ะ
เจ้าชายน้อย said,
April 21, 2007 @ 9:53 am
เยี่ยมไปเลยครับ css เนี่ย มหัศจรรย์จริง ๆ เลยนะครับ
Pat said,
April 23, 2007 @ 7:53 pm
แหม่ น่าสนใจไม่หยอกทีเดียวครับ เยี่ยมๆ
โอ said,
May 10, 2007 @ 9:45 pm
สุดยอดมากครับ
เคยเห็นและเคยใช้เทคนิคนี้มาแล้วหลายครั้งแต่ไม่เคยเข้าใจเลยว่า overflow=hidden นี่คืออะไร
วันนี้กระจ่างแล้วครับ
เอ๋น้อย said,
May 15, 2007 @ 11:02 am
สุดยอดเลยครับ เดี่ยวเอาไปใช้ที่เว็บผมบ้างละครับ อิอิ คงไม่ว่ากันนะ
ต่อ said,
October 4, 2007 @ 7:36 pm
แล้วถ้าป็นไฟล์ flash ล่ะครับ ทำยังไงครับ
utt said,
October 5, 2007 @ 10:36 am
ถ้าเป็นแฟลชคิดว่าน่าจะใส่ แท็ก object ไปแทน แท็ก span ได้เลยอะครับ กำหนดกว้างสูงให้พอดี น่าจะได้อะครับ ไม่เคยลองเหมือนกัน
iiTheme said,
November 23, 2007 @ 12:50 am
ผมใช้วิธี text-indent:-3000px; ครับเพราะใช้กับ IE7 ได้ด้วย
pommatt said,
November 27, 2007 @ 8:45 am
ขอบคุณมากครับ มีประโยชน์จริงๆ
/
ViV said,
February 21, 2008 @ 4:47 am
ผมเขียนแบบนี้ แสดงผลเหมือนกัน ช่วยดูให้หน่ิอยครับ ว่ามีข้อเสียจุดใหนบ้าง
ผมไม่ค่อยใช้ span
ที่ css
.logo {
background-image: url(logo.gif);
width: 190px;
height: 91px;
background-repeat: no-repeat;
background-position: left top;
}
.logo h1 {
display: none;
}
ที่ html
TEXT
utto said,
February 21, 2008 @ 3:58 pm
ผมไม่แน่ใจว่า บอท จะเข้าใจ display:none รึป่าว อาจจะไม่เข้ามาอ่านก็ได้
vent said,
August 21, 2008 @ 8:32 am
เจ๋งๆ