ตั้งค่า Breadcrumb ใน WordPress ให้ถูกต้องตั้งแต่ต้น

Breadcrumb คืออะไร และทำไมต้องมี?

Breadcrumb (เบรดครัมบ์) คือแถบนำทางเล็กๆ ที่แสดงเส้นทางของหน้าปัจจุบันตั้งแต่หน้าแรกจนถึงหน้าที่กำลังดูอยู่ เช่น หน้าแรก › บทความ › WordPress › ตั้งค่า Breadcrumb

ประโยชน์หลักๆ ของ Breadcrumb มี 2 อย่าง คือ

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

เว็บไซต์ที่มีหลายหมวดหมู่ เช่น ร้านค้าออนไลน์ บล็อก หรือเว็บข่าว ควรมี Breadcrumb ทุกหน้าเพื่อประสบการณ์ผู้ใช้ที่ดีที่สุด

วิธีเพิ่ม Breadcrumb ด้วย Plugin Yoast SEO (แนะนำสำหรับมือใหม่)

ถ้าคุณใช้ Yoast SEO อยู่แล้ว Plugin นี้มีฟีเจอร์ Breadcrumb ในตัว ไม่ต้องติดตั้งอะไรเพิ่ม ทำตามขั้นตอนนี้

ไปที่ WordPress Dashboard › Yoast SEO › Settings
คลิกแท็บ Breadcrumbs ในเมนูซ้าย
เปิดสวิตช์ "Enable breadcrumbs for your theme"
ตั้งค่า Separator (ตัวคั่น) เช่น › หรือ / ตามที่ชอบ
กรอก Breadcrumb for the Homepage เป็น "หน้าแรก" หรือ "Home"
คลิก Save Changes

จากนั้นต้องไปเพิ่ม Code เพื่อแสดง Breadcrumb ในธีม โดยเปิดไฟล์ header.php หรือ single.php ของธีม แล้วใส่ Code นี้ตรงที่ต้องการแสดง

<?php
if ( function_exists('yoast_breadcrumb') ) {
  yoast_breadcrumb( '<p id="breadcrumbs">', '</p>' );
}
?>

Tip: ถ้าไม่อยากแก้ไขไฟล์ธีมโดยตรง ให้สร้าง Child Theme ก่อน เพื่อป้องกันการสูญหายของ Code เมื่อธีมอัปเดต

วิธีเพิ่ม Breadcrumb ด้วย Plugin Rank Math SEO

Rank Math SEO เป็น Plugin SEO อีกตัวที่ได้รับความนิยมและมี Breadcrumb ในตัวเช่นกัน

ไปที่ Rank Math › Titles & Meta
เลือก Breadcrumbs ในเมนูด้านซ้าย
เปิด Enable Breadcrumbs
กำหนด Separator และ Home Label ตามต้องการ
คลิก Save Changes

จากนั้นเพิ่ม Code ในธีมที่ต้องการแสดง Breadcrumb

<?php
if ( function_exists('rank_math_the_breadcrumbs') ) {
  rank_math_the_breadcrumbs();
}
?>

ใช้ Plugin Breadcrumb NavXT สำหรับการปรับแต่งขั้นสูง

ถ้าต้องการปรับแต่ง Breadcrumb ได้มากกว่า เช่น เว็บหลายภาษา หรือต้องการรูปแบบพิเศษ แนะนำ Breadcrumb NavXT

ไปที่ Plugins › Add New
ค้นหา "Breadcrumb NavXT" แล้วคลิก Install Now
คลิก Activate
ไปที่ Settings › Breadcrumb NavXT เพื่อตั้งค่า
กำหนด Home Breadcrumb Template, Separator, และค่าต่างๆ

จากนั้นเพิ่ม Code ในธีม

<?php
if ( function_exists('bcn_display') ) {
  bcn_display();
}
?>

Tip: Breadcrumb NavXT รองรับ Custom Post Type และ Taxonomy พิเศษได้ดีมาก เหมาะสำหรับเว็บที่มีโครงสร้างซับซ้อน

เพิ่ม Schema Markup ให้ Breadcrumb ด้วย JSON-LD

การเพิ่ม Schema Markup ประเภท BreadcrumbList จะช่วยให้ Google แสดง Breadcrumb ใน Search Result ได้ ซึ่ง Plugin SEO ส่วนใหญ่จะทำให้อัตโนมัติแล้ว แต่ถ้าต้องการทำเอง สามารถเพิ่ม JSON-LD นี้ใน <head> ของหน้า

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "หน้าแรก",
      "item": "https://yoursite.com/"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "WordPress",
      "item": "https://yoursite.com/category/wordpress/"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "ตั้งค่า Breadcrumb",
      "item": "https://yoursite.com/wordpress-breadcrumbs/"
    }
  ]
}
</script>

Plugin Yoast SEO และ Rank Math จะสร้าง JSON-LD นี้ให้อัตโนมัติ ดังนั้นไม่จำเป็นต้องเพิ่มเองถ้าใช้ Plugin เหล่านั้น

ปรับสไตล์ Breadcrumb ด้วย CSS

หลังจาก Breadcrumb แสดงบนเว็บแล้ว คุณสามารถปรับหน้าตาได้ด้วย CSS เพิ่มใน WordPress Customizer › Additional CSS หรือใน style.css ของ Child Theme

/* สไตล์พื้นฐานสำหรับ Breadcrumb */
#breadcrumbs {
  font-size: 0.875rem;
  color: #6b7280;
  margin-bottom: 1rem;
  padding: 0.5rem 0;
}

#breadcrumbs a {
  color: #16a34a;
  text-decoration: none;
}

#breadcrumbs a:hover {
  text-decoration: underline;
}

/* เพิ่มเส้นคั่นระหว่าง link */
#breadcrumbs span.breadcrumb_last {
  color: #374151;
  font-weight: 500;
}

ตรวจสอบว่า Breadcrumb ทำงานถูกต้อง

หลังติดตั้งและตั้งค่าแล้ว ให้ตรวจสอบว่า Breadcrumb แสดงผลและ Schema Markup ถูกต้องด้วยเครื่องมือเหล่านี้

# 1. ตรวจสอบ Schema Markup ด้วย Google Rich Results Test
# เปิด: https://search.google.com/test/rich-results
# ใส่ URL หน้าที่มี Breadcrumb แล้วคลิก Test URL

# 2. ตรวจสอบ JSON-LD ใน Page Source
# กด Ctrl+U เพื่อดู Source Code ค้นหา "BreadcrumbList"

# 3. ใช้ Google Search Console
# ไปที่ Enhancements › Breadcrumbs
# ดูว่ามี Error หรือ Warning ไหม

# 4. ทดสอบบน Mobile ด้วย Chrome DevTools
# กด F12 › Toggle Device Toolbar
# ตรวจดู Breadcrumb แสดงถูกต้องบน Mobile หรือไม่

# 5. ตรวจสอบ Yoast SEO Breadcrumb ทำงาน
# เปิดหน้าบทความ กด Ctrl+F ค้นหา "breadcrumbs"
# ควรเห็น <p id="breadcrumbs"> ใน Source

Tip: ถ้า Google Search Console แสดงข้อผิดพลาด Breadcrumb มักเกิดจาก Schema Markup ไม่ถูกต้อง ลองใช้ Rich Results Test เพื่อหาจุดที่ผิด

แก้ปัญหาที่พบบ่อย

Error: "Breadcrumb ไม่แสดงบนหน้าเว็บ"

ปัญหานี้มักเกิดจาก Code ที่เพิ่มในธีมไม่ถูกตำแหน่ง หรือธีมไม่รองรับ ให้ตรวจสอบ

ดูว่าวาง Code ใน single.php, page.php หรือ Template Part ที่เหมาะสมแล้วหรือยัง
ลองใช้ Shortcode (ถ้า Plugin รองรับ) เพิ่มใน Widget หรือ Block แทน
ตรวจว่า Plugin SEO เปิดใช้งาน Breadcrumb แล้ว

Error: "Breadcrumb แสดงซ้ำสองชั้น"

ปัญหานี้เกิดเมื่อธีมมี Breadcrumb ในตัว และคุณเพิ่ม Plugin Breadcrumb ไปอีก แก้ไขโดย

เปิด Appearance › Theme Options หรือ Customizer ดูว่ามีตัวเลือก Breadcrumb ให้ปิดได้ไหม
ถ้าธีมมี Built-in Breadcrumb ให้ปิดฟีเจอร์ใน Plugin แทน

Error: "Google ไม่แสดง Breadcrumb ใน Search Result"

Google อาจใช้เวลาสักพักก่อนแสดง Breadcrumb ใน Search Result ตรวจสอบดังนี้

ยืนยันว่า Schema Markup ผ่าน Rich Results Test แล้ว
ส่ง Sitemap ใน Google Search Console เพื่อให้ Google ค้นพบเร็วขึ้น
รอประมาณ 2–4 สัปดาห์ให้ Google อัปเดต Index

Error: "Breadcrumb ไม่แสดงหมวดหมู่ที่ถูกต้อง"

ปัญหานี้เกิดเมื่อ Post อยู่ในหลาย Category Yoast SEO จะเลือก Category หลักตาม Primary Category ที่ตั้งไว้

ใน Edit Post เลือก Primary Category ในแผง Yoast SEO ด้านขวา
หรือตั้งค่าใน Yoast SEO › Settings › Breadcrumbs › Primary Category

Error: "Breadcrumb แสดง URL แทนชื่อ Category"

ให้ตรวจสอบ Permalink ของ Category ว่าถูกต้องหรือไม่ โดยไปที่ Posts › Categories แล้วดูว่าแต่ละ Category มีชื่อและ Slug ที่เหมาะสม

คำถามที่พบบ่อย (FAQ)

Q: ต้องเขียน Code เพื่อใช้ Breadcrumb ไหม?

A: ถ้าธีมรองรับ Breadcrumb จาก Plugin SEO โดยตรง เช่น ธีมสมัยใหม่หลายตัว อาจไม่ต้องเขียน Code เลย แต่ถ้าธีมไม่ได้รองรับ ก็ต้องเพิ่ม Code ไม่กี่บรรทัดในไฟล์ Template ของธีม ซึ่งทำได้ง่ายมาก

Q: Breadcrumb มีผลต่อ SEO มากแค่ไหน?

A: Breadcrumb ช่วย SEO ทางอ้อม โดย Google ใช้ข้อมูล Schema BreadcrumbList เพื่อแสดงเส้นทางใน Search Result ซึ่งทำให้ CTR (Click-Through Rate) สูงขึ้น เนื่องจากผู้ใช้เห็นว่าหน้านั้นอยู่ในหมวดหมู่อะไรได้เลยก่อนคลิก

Q: ใช้ Plugin Breadcrumb NavXT กับ Yoast SEO ร่วมกันได้ไหม?

A: ได้ แต่ควรเปิดใช้ Breadcrumb จากแหล่งเดียว เพื่อป้องกันปัญหา Breadcrumb ซ้ำซ้อน ถ้าต้องการใช้ Breadcrumb NavXT ให้ปิดฟีเจอร์ Breadcrumb ใน Yoast SEO หรือกลับกัน