Home > CSS techniques > ซ่อน h1 แล้วสวยด้วย images

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


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

play club รูปนี้ผมเซฟมาจากหน้าเว็บ 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 ของคุณ หวังว่าบทความนี้จะมีประโยชน์กับเพื่อนๆนะครับ และจะได้เป็นมาตรฐานในการทำเว็บครั้งต่อๆไป :)

Related Articles

  • Share/Bookmark
Categories: CSS techniques
Tags:

About the author

Webmaster ของเว็บนี้และ www.toysmile.com กับ www.wondercutie.com ความสามารถ : web design, graphic design, CSS, PHP programming, wordpress, magento ตอนนี้กำลังสนใจ : การออกแบบ ตัวการ์ตูน คาแรคเตอร์ ^^

Website : http://www.divland.com

Facebook : http://www.facebook.com/divland

Twiter : http://twitter.com/divland


  1. April 14th, 2007 at 19:44 | #1

    เพิ่งเคยได้ยินเทคนิคแบบนี้ค่ะ ขอบคุณมากค่ะ :d

    แต่สงสัยนิดนึงว่า ทำแบบนี้จะดีกว่านำรูปภาพมาใช้แล้วใส่ ALT เป็นคำอธิบายรึป่าวคะ ในแง่ของ SEO อย่างเช่นในกรณีนี้ ก็ใช้เป็น แทน ได้รึป่าวคะ :-?

  2. April 14th, 2007 at 19:45 | #2

    ใช้เป็น tag แทนน่ะค่ะ แล้วตรง H1,H2 ก็นำมาใส่ที่ ALT แทน

  3. admin
    April 14th, 2007 at 20:41 | #3

    alt เป็นการใช้อธิบายรูปครับ ว่า รูปนั้นคืออะไร เกี่ยวข้องกับอะไร ในแง่ของ web standards แล้ว ไม่ควรเอามาใช้แทนกันนะครับ :)

  4. April 16th, 2007 at 21:40 | #4

    เข้าใจแล้วค่ะ ขอบคุณมากค่ะ :d

  5. April 21st, 2007 at 09:53 | #5

    เยี่ยมไปเลยครับ css เนี่ย มหัศจรรย์จริง ๆ เลยนะครับ

  6. April 23rd, 2007 at 19:53 | #6

    แหม่ น่าสนใจไม่หยอกทีเดียวครับ เยี่ยมๆ:d

  7. May 10th, 2007 at 21:45 | #7

    สุดยอดมากครับ
    เคยเห็นและเคยใช้เทคนิคนี้มาแล้วหลายครั้งแต่ไม่เคยเข้าใจเลยว่า overflow=hidden นี่คืออะไร

    วันนี้กระจ่างแล้วครับ

  8. May 15th, 2007 at 11:02 | #8

    สุดยอดเลยครับ เดี่ยวเอาไปใช้ที่เว็บผมบ้างละครับ อิอิ คงไม่ว่ากันนะ

  9. ต่อ
    October 4th, 2007 at 19:36 | #9

    แล้วถ้าป็นไฟล์ flash ล่ะครับ ทำยังไงครับ

  10. October 5th, 2007 at 10:36 | #10

    ถ้าเป็นแฟลชคิดว่าน่าจะใส่ แท็ก object ไปแทน แท็ก span ได้เลยอะครับ กำหนดกว้างสูงให้พอดี น่าจะได้อะครับ ไม่เคยลองเหมือนกัน :-?

  11. November 23rd, 2007 at 00:50 | #11

    ผมใช้วิธี text-indent:-3000px; ครับเพราะใช้กับ IE7 ได้ด้วย:d

  12. November 27th, 2007 at 08:45 | #12

    ขอบคุณมากครับ มีประโยชน์จริงๆ:d/

  13. ViV
    February 21st, 2008 at 04:47 | #13

    ผมเขียนแบบนี้ แสดงผลเหมือนกัน ช่วยดูให้หน่ิอยครับ ว่ามีข้อเสียจุดใหนบ้าง
    ผมไม่ค่อยใช้ 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

  14. February 21st, 2008 at 15:58 | #14

    ผมไม่แน่ใจว่า บอท จะเข้าใจ display:none รึป่าว อาจจะไม่เข้ามาอ่านก็ได้:-?

  15. vent
    August 21st, 2008 at 08:32 | #15

    เจ๋งๆ

  16. October 29th, 2009 at 14:42 | #16

    สุดยอดไปเลยครับ

  17. December 1st, 2009 at 11:11 | #17

    ทำไมผมเขียนแบบนี้แล้วรูปภาพมันไม่ยักแสดงแฮะ งงเลย

  18. December 6th, 2009 at 12:54 | #18

    Thank you for good information

  19. December 6th, 2009 at 12:56 | #19

    ความรู้แบบนี้ชอบจริงๆ

  20. January 20th, 2010 at 09:50 | #20

    ทำไมไม่เขียนแบบนี้อะ

    Play Park

    h1{ width: ความกว้างของรูป; height: ความสูงของรูป; background:url(images/play_club.gif) no-repeat left top; }
    h1 > span { display: none }

  21. March 1st, 2010 at 11:10 | #21

    ขอบคุณมากค่ะ

  22. March 31st, 2010 at 16:00 | #22

    เทคนิค แบบนี้ ถูกหลักการของกูเกิลมั้ยครับ ?? :-?

  23. May 9th, 2010 at 13:06 | #23

    ขอบคุณครับ

    แล้วถ้าใส่กับทุกรูปภาพนี่มีผลไหมครับ บอทมันจะคิดว่าเราปั่นคีย์หรือเปล่านะ ?

  24. August 15th, 2010 at 12:55 | #24

    Thanks you หลายๆๆครับ

  1. No trackbacks yet.