รูปภาพ กับ SEO
รูปภาพเช่น tag img ปกติแล้วจะไม่สามารถใช้ในการทำ SEO ได้ เนื่องจาก SE ไม่สามารถเข้าใจความหมายของรูปภาพได้ นอกจากการอ่านจาก tag alt ซึ่งสามารถบอกความหมายของรูปภาพได้ รวมถึงสามารถใส่คีย์เวิร์ดลงใน alt ของ image ได้ เช่น
<img src="keyword.png" alt="keyword" />
โค้ดข้างบนคือวิธีปกติในการแสดงรูป ซึ่งสามารถใส่ keyword ลงในรูปได้ แต่ SE มันก็ไม่สามารถเข้าใจรูปภาพได้หรือสามารถอ่านข้อความภายในรูปภาพได้ แต่เราสามารถเลี่ยงมาใช้ CSS เพื่อทำการบอกความหมายของสิ่งที่ต้องการสื่อจากรูปได้
นอกจากนี้ เทคนิคนี้ยังสามารถเลี่ยงการ cache รูปภาพโดย SE ได้ เพื่อป้องกันรูปภาพแสนรักของเราถูกค้นหาพบบน SE
CSS สามารถแยกเป็นไฟล์ได้นะครับ
โค้ด HTML ของรูปภาพ เนื่องจากไม่ได้ใช้ tag image ทำให้ SE ไม่สามารถรู้ได้ว่านี่คือรูป แต่ SE จะเห็นข้อความภายใน span แทน
ข้อควรระวังของเทคนิคนี้ คือข้อความที่เป็นคีย์เวิร์ดที่ใส่ลงไปควรเป็นข้อความภายในรูปภาพจริงๆ หรือ สื่อความหมายของรูปภาพจริงๆ เพื่อหลีกเลี่ยงปัญหาการมองจาก SE ว่าเป็นการจงใจเลี่ยงคีย์เวิร์ด หรือจงใจเล่นคำเพื่อประโยชน์ทาง SEO ซึ่งอาจถูกแบนโดย SE ได้ง่ายๆ
<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 ได้ง่ายๆ