รูปภาพเช่น tag img ปกติแล้วจะไม่สามารถใช้ในการทำ SEO ได้ เนื่องจาก SE ไม่สามารถเข้าใจความหมายของรูปภาพได้ นอกจากการอ่านจาก tag alt ซึ่งสามารถบอกความหมายของรูปภาพได้ รวมถึงสามารถใส่คีย์เวิร์ดลงใน alt ของ image ได้ เช่น

<img src="keyword.png" alt="keyword" />

โค้ดข้างบนคือวิธีปกติในการแสดงรูป ซึ่งสามารถใส่ keyword ลงในรูปได้ แต่ SE มันก็ไม่สามารถเข้าใจรูปภาพได้หรือสามารถอ่านข้อความภายในรูปภาพได้ แต่เราสามารถเลี่ยงมาใช้ CSS เพื่อทำการบอกความหมายของสิ่งที่ต้องการสื่อจากรูปได้

นอกจากนี้ เทคนิคนี้ยังสามารถเลี่ยงการ cache รูปภาพโดย SE ได้ เพื่อป้องกันรูปภาพแสนรักของเราถูกค้นหาพบบน SE

span.logo {
  display:block;
  background:url(logo.png) no-repeat; /* รูปภาพที่จะแสดง */
  height:70px; /* ขนาดของรูป */
  width:200px; /* ขนาดของรูป */
}
span.logo span {
  visibility:hidden; /* ซ่อนไม่ให้เห็นข้อความ */
}

CSS สามารถแยกเป็นไฟล์ได้นะครับ

<span class="logo"><span>ใส่คีย์เวิร์ดที่ตรงกับรูปภาพ</span></span>

โค้ด HTML ของรูปภาพ เนื่องจากไม่ได้ใช้ tag image ทำให้ SE ไม่สามารถรู้ได้ว่านี่คือรูป แต่ SE จะเห็นข้อความภายใน span แทน

ข้อควรระวังของเทคนิคนี้ คือข้อความที่เป็นคีย์เวิร์ดที่ใส่ลงไปควรเป็นข้อความภายในรูปภาพจริงๆ หรือ สื่อความหมายของรูปภาพจริงๆ เพื่อหลีกเลี่ยงปัญหาการมองจาก SE ว่าเป็นการจงใจเลี่ยงคีย์เวิร์ด หรือจงใจเล่นคำเพื่อประโยชน์ทาง SEO ซึ่งอาจถูกแบนโดย SE ได้ง่ายๆ