Breadcrumbs

Breadcrumb คือ Navigator interfaces ที่บอกตำแหน่งที่อยู่ภายในเว็บไซต์ มีโครงสร้างแบบลำดับชั้น ซึ่งระบุถึงตำแหน่งปัจุบัน ตำแหน่งสูงกว่าและตำแหน่ง Root ของ Domain (หน้าแรก) เอาไว้

ประโยชน์ของ Breadcrumbs

• ช่วยให้ผู้ใช้สามารถทราบตำแหน่งของเนื้อหาในปัจจุบัน
• ผู้ใช้สามารถออกไปยังเนื้อหาตำแหน่งอื่นๆ ที่ต้องการได้ง่าย
• ช่วยให้ Bot เข้าถึงตำแหน่งเนื้อหาได้ง่ายขึ้น

วิธีทำให้ Google แสดงผลแบบ Breadcrumbs

วิธีการทำ Breadcrumbs นั้นควรจะออกแบบ โครงสร้างเว็บไซต์ (Site Structure) ที่ดีก่อน หากเว็บไซต์ไม่ใหญ่มาก โครงสร้างก็จะมีเพียงหมวดหมู่และเนื้อหา ซึ่งเนื้อหาแต่ละอันก็ต้องมีหมวดหมู่สังกัดอยู่

ตัวอย่าง Site Structure

หลังจากที่วาง Site Structure แล้ว ก็นำโครงสร้างดังกล่าว มาออกแบบ Breadcrumbs จากตัวอย่าง Site Structure เมื่อนำมาวาง Path จะได้ดังนี้คือ

• หน้าแรก > เพลงสตริง > อยู่คนเดียว เบิร์ด ธงไชย
• หน้าแรก > เพลงลูกทุ่ง > เป็นเพื่อนไม่ได้ หัวใจอยากเป็นแฟน ไผ่ พงศธร
• หน้าแรก > เพลงสากล > Just The Way You Are Bruno Mars

เครื่องมือทำ Breadcrumbs สำหรับ WordPress

แนะนำ Breadcrumb NavXT กดดาน์โหลดตรงนี้ หลังที่ Activate Plugins แล้วให้นำ Code นี้ไปวางในตำแหน่งที่ต้องการแสดงผลบน Themes ของคุณ

<div>
<?php
if(function_exists(‘bcn_display’))
{
bcn_display();
}
?>
</div>

ดูผลลัพท์ได้ที่ Breadcrumbs ของผมในเว็บไซต์นี้ครับ

เครื่องมือทำ Breadcrumbs สำหรับ Joomla

สำหรับการทำ Breadcrumbs ใน Joomla นั้นคุณสามารถ้ข้าไปเพิ่ม Module ได้เลย เข้าที่ Module Manager > New > Breadcrumbs > ตั้งค่าและกด Apply

อ้างอิง

• Module : Breadcrumbs บอกตำแหน่งปัจจุบันของผู้ชมเว็บไซค์บน joomla
• การพัฒนาการออกแบบเว็บ(Navigation)
• การออกแบบโครงสร้างเว็บไซต์ (Site Structure Design)
• การออกแบบระบบนำทาง (Site Navigation Design)

เพิ่มเติม

• มาทำความรู้จักกับ Breadcrumbs (Navigator bar)