CSS rollover button เพื่อ SEO
ปกติแล้วการทำปุ่มเมนูด้วยรูปภาพ มักไม่มีผลกับการทำ SEO เนื่องจาก SE ไม่สามารถเข้าใจได้ว่ารูปภาพที่เป็นปุ่มนั้นจะสื่อความหมายถึงอะไร ทำให้เสียโอกาสในการทำ SEO ยกตัวอย่างเช่นการสร้างปุ่ม rollover ด้วยรูปภาพโดย Dream เราจะได้โค้ดปุ่มที่ทำงานด้วย Javascript ทั้งๆที่ในความเป็นจริงแล้ว เราสามารถใช้ CSS เพื่อจัดการปุ่ม rollover เพื่อให้ผลแบบเดียวกันได้
ผมจะไม่กล่าวถึงปุ่มที่สร้างด้วย Dream นะครับ เรามาดูปุ่มในแบบของเราที่สามารถให้ผลทางด้าน SEO ได้ด้วยเลยดีกว่า
<a href="http://www.xxx.com"><span>คีย์เวิร์ด</span></a>
</div>
จากโค้ด คำว่า คีย์เวิร์ด จะใช้เป็นส่วนหนี่งในการทำ SEO โดยการใส่ข้อความสำคัญไว้ ซึ่งข้อความนี้จะไม่สามารถมองเห็นโดยผู้ใช้ แต่สามารถมองเห็นได้โดย SE (ลอง preview source ดู) แต่ user จะเห็นข้อความจากรูปภายในปุ่มแทน
visibility:hidden;
}
.css_nav a {
background:url('downbtn.jpg') no-repeat; /* รูปปุ่มปกติ */
display:block;
width:211px; /* ขนาดของปุ่ม */
height:44px; /* ขนาดของปุ่ม */
}
.css_nav a:hover {
background:url('overbtn.jpg') no-repeat; /* รูปปุ่มเมื่อเมาส์อยู่บนปุ่ม */
}
โค้ด CSS ครับ โดยการใช้ CSS ทำการเปลี่ยนรูปภาพเมื่อเอาเมาส์ไปชี้บนปุ่ม ซึ่งไม่ต้องใช้ Javascript เลย และยังสามารถแยก CSS ออกเป็นไฟล์ต่างหากได้ด้วย