CSS rollover button เพื่อ SEO

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

ผมจะไม่กล่าวถึงปุ่มที่สร้างด้วย Dream นะครับ เรามาดูปุ่มในแบบของเราที่สามารถให้ผลทางด้าน SEO ได้ด้วยเลยดีกว่า

<div class="css_nav">
<a href="http://www.xxx.com"><span>คีย์เวิร์ด</span></a>
</div>

จากโค้ด คำว่า คีย์เวิร์ด จะใช้เป็นส่วนหนี่งในการทำ SEO โดยการใส่ข้อความสำคัญไว้ ซึ่งข้อความนี้จะไม่สามารถมองเห็นโดยผู้ใช้ แต่สามารถมองเห็นได้โดย SE (ลอง preview source ดู) แต่ user จะเห็นข้อความจากรูปภายในปุ่มแทน

.css_nav span {
  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 ออกเป็นไฟล์ต่างหากได้ด้วย

ผู้เขียน goragod โพสต์เมื่อ 06 พ.ย. 2551 เปิดดู 16,787 ป้ายกำกับ CSSXHTMLSEO
^