Breadcrumb คืออะไร และวิธีสร้าง Breadcrumb บน WordPress

เวลาเข้าเว็บแล้วเจอแถบเล็กๆ ด้านบนหน้าเนื้อหาที่มีลักษณะแบบนี้ หน้าแรก > บล็อก > ชื่อบทความ สิ่งนั้นคือ Breadcrumb หรือเส้นทางนำทางของเว็บไซต์ แม้ดูเป็นรายละเอียดเล็กน้อย แต่ช่วยทั้งผู้ใช้งานและ Google ให้เข้าใจโครงสร้างเว็บได้ง่ายขึ้น

Breadcrumb คืออะไร

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

Home > SEO > Breadcrumb คืออะไร

ชื่อ Breadcrumb มาจากนิทานเรื่อง Hansel and Gretel ที่โปรยเศษขนมปังไว้ตามทางเพื่อกันหลงทาง แนวคิดเดียวกันคือทำให้ผู้อ่านรู้เสมอว่าตัวเองอยู่ตรงไหนของเว็บ และย้อนกลับขึ้นไปหน้าหลักหรือหมวดหมู่ได้ในคลิกเดียว

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

1. ช่วยผู้ใช้รู้ว่าตัวเองอยู่ตรงไหน

เมื่อลงลึกหลายหน้า Breadcrumb ทำให้เห็นตำแหน่งทันที และกดกลับไปหมวดหมู่ที่เกี่ยวข้องได้เร็ว ใช้งานง่ายกว่าการไล่เมนูใหม่ทั้งเว็บ

2. ลด Bounce Rate และเพิ่มการสำรวจเว็บ

ผู้ที่เข้ามาจาก Google อาจจะเจอหน้าที่อยู่ชั้นลึก เช่น บทความเดี่ยวหรือหน้ารายสินค้า ถ้ามีเส้นทางกลับไปหมวดหมู่หรือหน้าหลัก ผู้ใช้มีโอกาสอ่านต่อมากขึ้น แทนที่จะปิดเว็บแล้วกลับไปที่ผลการค้นหา

3. ช่วย Google เข้าใจโครงสร้างเว็บ

Breadcrumb เป็นสัญญาณว่าหน้าไหนอยู่ภายใต้หมวดไหน ช่วยให้เครื่องมือค้นหาจัดกลุ่มเนื้อหาและจัดอันดับได้สอดคล้องกับโครงสร้างจริงของเว็บมากขึ้น

4. เสริม Internal Link

แต่ละขั้นใน Breadcrumb คือลิงก์ภายในที่ชี้ไปหน้าหลักและหมวดหมู่โดยอัตโนมัติ ช่วยกระจายน้ำหนักลิงก์ภายในโดยไม่ต้องวางลิงก์ทีละหน้า

5. อาจแสดงในผลการค้นหาของ Google

เมื่อใส่ Breadcrumb พร้อม Structured Data แบบ BreadcrumbList (Yoast SEO ใส่ให้อัตโนมัติ) Google อาจแสดงเส้นทางหมวดหมู่แทน URL ดิบใต้ชื่อเพจ ทำให้ผลค้นหาอ่านง่ายขึ้น และบางกรณีช่วยอัตราการคลิก (CTR)

Breadcrumb ไม่ใช่ปัจจัยจัดอันดับโดยตรง แต่ช่วยทั้งประสบการณ์ใช้งาน โครงสร้างเว็บ และลิงก์ภายใน ซึ่งล้วนส่งผลต่อ SEO โดยอ้อม

ปัญหาที่พบบ่อย: บางธีม WordPress ไม่มี Breadcrumb

บางธีมของ WordPress มี Breadcrumb เฉพาะบางส่วนของเว็บ เช่น หน้าสินค้า WooCommerce แต่ไม่มีบนหน้าบทความเดี่ยว (post)

ธีม Flatsome เป็นตัวอย่าง หน้าร้านค้ามี Breadcrumb อยู่แล้ว แต่หน้าบล็อกหรือโพสต์เดี่ยวไม่มีให้เปิดใช้งานจาก Theme Options เราต้องสร้างเพิ่มเอง

วิธีที่สร้างและดูแลง่าย คือใช้ Yoast SEO สร้างทั้งเส้นทางบนหน้าเว็บและ Schema ให้ Google จากนั้นเรียกแสดงผลด้วยโค้ดสั้นๆ ผ่านปลั๊กอิน Code Snippets โดยไม่ต้องแก้ไฟล์ธีมโดยตรง ซึ่งเสี่ยงถูกลบเมื่ออัปเดตธีม

วิธีสร้าง Breadcrumb บน WordPress

1. ติดตั้งปลั๊กอิน Yoast SEO

ติดตั้งและ activate ปลั๊กอิน Yoast SEO ให้เรียบร้อย ตัวปลั๊กอินนี้มีระบบ Breadcrumb พร้อม Schema มาให้ในตัวอยู่แล้ว เราแค่เรียกมาใช้

2. เปิดฟังก์ชัน Breadcrumb ใน Yoast

ไปที่ Yoast SEO > Settings > Advanced > Breadcrumbs แล้วเปิด (Enable) ฟังก์ชัน Breadcrumbs ขั้นตอนนี้ต้องทำก่อนเสมอ เพราะถ้าไม่เปิด โค้ดที่เรียก yoast_breadcrumb() จะไม่แสดงผลอะไรออกมา

ในหน้านี้ยังตั้งค่ารายละเอียดได้ด้วย เช่น ตัวคั่น (separator) ข้อความของหน้าแรก และ Taxonomy ที่จะใช้แสดงใน Breadcrumb

3. เพิ่มโค้ดผ่านปลั๊กอิน Code Snippets

เมื่อเปิดฟังก์ชันแล้ว ขั้นต่อไปคือบอกธีมว่าจะให้ Breadcrumb ไปแสดงตรงไหน วิธีที่ปลอดภัยที่สุดคือเพิ่มโค้ดผ่านปลั๊กอิน Code Snippets แทนการแก้ไฟล์ธีมโดยตรง เพราะโค้ดจะไม่หายเวลาอัปเดตธีม

/**
 * Add Yoast Breadcrumbs to Flatsome single posts
 */
function padvee_flatsome_post_breadcrumbs() {

    if ( is_singular( 'post' ) && function_exists( 'yoast_breadcrumb' ) ) {

        echo '<div class="row">';
        echo '<div class="col">';
        echo '<div class="padvee-breadcrumbs">';

        yoast_breadcrumb(
            '<nav id="breadcrumbs" aria-label="Breadcrumbs">',
            '</nav>'
        );

        echo '</div>';
        echo '</div>';
        echo '</div>';

    }
}

add_action( 'flatsome_before_blog', 'padvee_flatsome_post_breadcrumbs', 5 );

การปรับใช้กับธีมอื่น

หลักการเดียวกันนี้ใช้ได้กับทุกธีม สิ่งที่ต่างกันคือ hook หรือตำแหน่งที่จะแทรก Breadcrumb เพราะธีมแต่ละตัวมี action hook ไม่เหมือนกัน ของ Flatsome คือ flatsome_before_blog ธีมอื่นอาจเป็น hook คนละชื่อ หรือบางกรณีต้องแก้ผ่าน template file แทน

ถ้าโค้ดชุดนี้ใช้กับธีมของคุณไม่ได้ ให้ลองสั่ง AI ช่วยหา hook หรือคำสั่งที่เหมาะกับธีมนั้น โดยบอกชื่อธีมและตำแหน่งที่อยากให้ Breadcrumb แสดงไปด้วย

ถ้า Breadcrumb แสดงแล้วแต่หน้าตาไม่สวย

ถ้า Breadcrumb แสดงออกมาแล้วหน้าตายังไม่เข้ากับดีไซน์ เราแก้ด้วย CSS ได้ โดยเขียน style ครอบ class .padvee-breadcrumbs ที่ตั้งไว้ในโค้ด เช่น ปรับขนาดฟอนต์ สี ระยะห่าง หรือหน้าตาของตัวคั่น จุดนี้ก็สั่ง AI ให้ช่วยเขียน CSS ได้เหมือนกัน แค่บอกว่าอยากได้หน้าตาแบบไหน

เรียกใช้ Breadcrumb เฉพาะหน้าด้วย shortcode

ถ้าไม่อยากให้ Breadcrumb แสดงทุกหน้าแบบอัตโนมัติ แต่อยากเรียกใช้เฉพาะหน้าที่ต้องการ Yoast มี shortcode ให้ใช้คือ

[wpseo_breadcrumb]

วางลงในหน้าหรือโพสต์ที่ต้องการ หรือใน element ที่รับ shortcode ได้ Breadcrumb ก็จะแสดงเฉพาะตรงนั้น วิธีนี้เหมาะกับ Landing Page หรือหน้าที่จัด layout เองเป็นพิเศษ

สรุป

Breadcrumb เป็นองค์ประกอบเล็กๆ บนหน้าเว็บ ที่ให้ผลคุ้มค่าทั้งกับผู้อ่านและ SEO แม้ธีมจะไม่มีมาให้ ก็สร้างเองได้ด้วย Yoast SEO บวกกับโค้ดสั้นๆ ผ่าน Code Snippets และถ้าติดตรงไหน ไม่ว่าจะเป็นการหา hook ของธีม หรือการแก้ CSS ให้สวย ก็ใช้ AI เป็นผู้ช่วยได้เต็มที่