Breadcrumb (Breadcrumbs) คืออะไร ช่วย SEO & AI Search ไหม ทำยังไงใน WordPress

Breadcrumb คืออะไร หน้าตาเป็นยังไง

Breadcrumb (breadcrumbs หรือ breadcrumb navigation อ่านว่า เบรดครัมบ์) คือแถบลิงก์ที่บอกตำแหน่งของหน้าในโครงสร้างเว็บ เรียงจากชั้นบนสุดลงมาถึงหน้าที่เปิดอยู่ เช่น หน้าแรก › รองเท้าวิ่ง › รองเท้าวิ่งผู้ชาย พูดง่ายๆ breadcrumbs คือเครื่องมือนำทางสำหรับคนที่เข้าเว็บจากผลค้นหาหรือลิงก์ภายนอกแล้วลงกลางเว็บเลย ไม่ได้เริ่มจากหน้าแรก แถบนี้ตอบคำถามว่า “ตอนนี้อยู่ตรงไหน” และพาย้อนขึ้นไปดูหมวดที่กว้างกว่าได้ในคลิกเดียว

ชื่อนี้มาจากนิทาน Hansel and Gretel ที่เด็กสองคนโรยเศษขนมปังไว้เป็นทางกลับบ้าน บนหน้าเว็บ breadcrumb มักอยู่ใต้เมนูหลักและเหนือหัวเรื่อง (H1) แต่ละชั้นเป็นลิงก์ คั่นด้วยเครื่องหมายอย่าง › หรือ / ส่วนชั้นสุดท้ายคือหน้าปัจจุบัน ซึ่งเป็นข้อความธรรมดาหรือเป็นลิงก์ก็ได้

Breadcrumb ไม่ได้มาแทนเมนูหลัก NN/g (Nielsen Norman Group หน่วยงานวิจัย UX) แนะนำมานานว่า breadcrumb เป็นตัวเสริมเมนูหลักเสมอ (บทความ Breadcrumbs: 11 Design Guidelines ทบทวนล่าสุด 1 ก.ย. 2026) เพราะแถบนี้บอกแค่เส้นทางขึ้นข้างบน ไม่ได้พาไปหมวดข้างเคียง

Breadcrumb มีกี่แบบ ใช้แบบไหนดี

Breadcrumb ที่พูดถึงกันมี 3 แบบ คือแบบลำดับชั้น แบบคุณสมบัติ และแบบประวัติการเข้าชม เว็บส่วนใหญ่ควรใช้แบบลำดับชั้น เพราะเป็นแบบที่ทั้ง NN/g และ Google อธิบายไว้ตรงกันว่า breadcrumb มีไว้บอกตำแหน่งในโครงสร้างเว็บ ไม่ใช่บันทึกว่าผู้ใช้เคยคลิกอะไรมาบ้าง

แบบ	หน้าตา	เหมาะกับ	ข้อสังเกต
ลำดับชั้น (hierarchy-based)	หน้าแรก › บทความ › SEO › ชื่อบทความ	เกือบทุกเว็บที่มีหมวด: บล็อก ร้านค้า เว็บเอกสาร เว็บองค์กร	แบบมาตรฐาน ใช้แบบนี้ถ้าไม่แน่ใจ
คุณสมบัติ (attribute-based)	รองเท้า › วิ่ง › ผู้ชาย › ไซซ์ 42	ร้านค้าออนไลน์ที่ให้กรองสินค้าตามคุณสมบัติ	ชั้นมาจากตัวกรอง ไม่ใช่หมวดจริง ระวังสร้าง URL ซ้ำจำนวนมาก
ประวัติการเข้าชม (history-based)	หน้าที่ผู้ใช้เพิ่งเปิดมาตามลำดับ	แทบไม่มีกรณีที่เหมาะ	NN/g แนะนำให้ breadcrumb แสดงลำดับชั้น ไม่ใช่ประวัติการเข้าชม งานพาย้อนกลับเป็นหน้าที่ของปุ่ม Back ของเบราว์เซอร์อยู่แล้ว

บทความไทยหลายหน้าที่ติดผลค้นหาคำนี้ยกแบบประวัติการเข้าชมเป็นทางเลือกปกติ ซึ่งไม่ตรงกับคำแนะนำของ NN/g ถ้าเว็บของคุณมีทั้งหมวดและตัวกรอง ให้ใช้แบบลำดับชั้นเป็นหลัก แล้วแสดงตัวกรองที่เลือกไว้แยกจากแถบ breadcrumb

Breadcrumb ช่วย SEO ไหม

Breadcrumb ช่วย SEO ในแบบที่ Google เขียนไว้ คือช่วยให้ผู้ใช้เข้าใจและสำรวจเว็บได้ดีขึ้น และช่วย Google จัดหมวดข้อมูลของหน้าในผลค้นหา (เอกสาร Breadcrumb structured data ปรับล่าสุด 8 ก.ย. 2026) แต่ไม่มีเอกสารของ Google ที่บอกว่า breadcrumb เป็นปัจจัยจัดอันดับ breadcrumb SEO จึงเป็นงานพื้นฐานที่ทำให้เว็บเข้าใจง่ายขึ้น ไม่ใช่ปุ่มดันอันดับ

ประโยชน์ที่จับต้องได้มี 3 ข้อ

1. เป็นลิงก์ภายในที่ชี้ขึ้นไปหาหน้าหมวดจากทุกหน้าลูก: หน้าหมวดได้ลิงก์จากทุกบทความในหมวดโดยอัตโนมัติ และ Googlebot (บอทเก็บข้อมูลของ Google) ไล่จากหน้าลึกขึ้นไปหาหน้าหมวดได้ หลักการลิงก์ภายในทั้งหมดอยู่ในบทความ Internal Link คืออะไร
2. บอกบริบทของหน้า: ชื่อหมวดในแถบบอกทั้งคนและ Google ว่าหน้านี้เป็นส่วนหนึ่งของเรื่องอะไร
3. ผลค้นหาบนเดสก์ท็อปอ่านง่ายขึ้น: เมื่อมี markup Google มักแสดงชื่อหมวดแทน path ของ URL (รายละเอียดในหัวข้อถัดไป)

ข้อมูลเบื้องต้นของเราชี้ว่า breadcrumb ไม่ใช่เงื่อนไขของการติดอันดับ ในหน้าไทย 23 หน้าที่ติดหน้าแรก Google ของ 4 คำค้นเชิงพาณิชย์ มี 12 หน้าที่ไม่มีทั้งแถบที่มองเห็นและ markup (ผลเบื้องต้น 16 ต.ค. 2026 ดูวิธีเก็บข้อมูล) คำกล่าวที่ว่า breadcrumb “ลด bounce rate” หรือ “ดันอันดับ” ซึ่งเห็นในบทความไทยหลายหน้าและในคำตอบของ AI ยังไม่มีเอกสารของ Google หรือข้อมูลที่เราพบรองรับ

The Art of SEO (ฉบับที่ 4, 2023) บทที่ 5 และ 7 มอง breadcrumb เป็นวิธีที่ชัดที่สุดในการบอกผู้ใช้ว่าอยู่ตรงไหนของหมวด และช่วยเสริมลิงก์ภายในแบบลำดับชั้น ส่วนที่หนังสือมองว่า breadcrumb เป็นที่ใส่ anchor text (ข้อความที่เป็นลิงก์) ที่มีคีย์เวิร์ด ควรอ่านใหม่เป็น “ตั้งชื่อหมวดให้ชัดและตรงกับที่คนเรียก” ไม่ใช่ยัดคีย์เวิร์ดลงในแถบ

Google แสดง breadcrumb ในผลค้นหายังไง (2026)

Google แสดง breadcrumb ในผลค้นหาเฉพาะบนเดสก์ท็อป ส่วนบนมือถือแสดงแค่โดเมนตั้งแต่ 23 ม.ค. 2025 โพสต์ Simplifying the visible URL element on mobile search results ใน Search Central Blog บอกว่า Google เลิกแสดง breadcrumb ในผลค้นหาบนมือถือทุกภาษาและทุกประเทศ ส่วนบนเดสก์ท็อปยังแสดงโดเมนพร้อม breadcrumb และเอกสาร BreadcrumbList ระบุว่าฟีเจอร์นี้ใช้ได้บนเดสก์ท็อป

โพสต์เดียวกันบอกชัดว่าเจ้าของเว็บไม่ต้องทำอะไร markup ของ breadcrumb ยังใช้บนเดสก์ท็อป รายงาน Breadcrumbs ใน Search Console ยังทำงานต่อ และ Rich Results Test (เครื่องมือฟรีของ Google ที่ตรวจ structured data) ยังตรวจได้เหมือนเดิม ดังนั้นคำแนะนำ “ทำ breadcrumb ให้ลิงก์ใน Google สวยขึ้น” ที่ยังเห็นในบทความไทยและ AI Overview จึงถูกแค่ครึ่งเดียว คือถูกบนเดสก์ท็อป

เราเช็กของจริงในวันเขียนบทความ (16 ต.ค. 2026) ผลค้นหาคำ “breadcrumb คือ” บนมือถือ Android ทุกผลแสดงแค่โดเมน ส่วนผลค้นหาบนเดสก์ท็อป (คำ “breadcrumbs คือ” และ 4 คำค้นที่เราสำรวจ) ยังแสดงแบบ โดเมน › หมวด › … และในหน้าไทยที่ติดหน้าแรกซึ่งเราสำรวจ หน้าที่มี BreadcrumbList 7 ใน 9 หน้าได้ชื่อจาก markup ในผลค้นหาเดสก์ท็อป ส่วนหน้าที่ไม่มี markup 13 ใน 14 หน้าถูกแสดงเป็น path ของ URL เช่นชื่อโฟลเดอร์ภาษาอังกฤษ (ผลเบื้องต้น n เล็ก ดูตารางเต็ม)

สำหรับเว็บไทย ข้อนี้มีความหมายมากกว่าที่เห็น ถ้าไม่มี markup ผลค้นหาบนเดสก์ท็อปจะแสดงชื่อโฟลเดอร์ใน URL ซึ่งมักเป็น slug (ส่วนท้ายของ URL) ภาษาอังกฤษหรือคำไทยที่ถูกแปลงจาก URL แต่ถ้ามี markup Google มักแสดงชื่อหมวดภาษาไทยที่คนอ่านเข้าใจทันที ส่วนประกอบอื่นของหน้าผลค้นหา เช่น AI Overview, People Also Ask และความต่างระหว่างมือถือกับเดสก์ท็อป อ่านต่อได้ที่ SERP คืออะไร

BreadcrumbList schema คืออะไร: ขั้นต่ำที่ Google ต้องการ

BreadcrumbList คือ structured data ประเภทหนึ่งจาก schema.org ที่บอก Google ว่า breadcrumb ของหน้านี้มีกี่ชั้น แต่ละชั้นชื่ออะไร และลิงก์ไปที่ไหน breadcrumb schema ใช้กับทุกหน้าที่มีแถบ breadcrumb ให้คนเห็น และควรสร้างจากข้อมูลชุดเดียวกับแถบนั้น หลักพื้นฐานของ structured data และรูปแบบ JSON-LD (รูปแบบโค้ดที่ Google แนะนำ) อธิบายไว้แล้วใน Schema Markup คืออะไร ส่วนนี้สรุปเฉพาะกติกาของ BreadcrumbList

กติกา	Google กำหนดไว้ว่า
จำนวนรายการ	BreadcrumbList ต้องมี ListItem อย่างน้อย 2 รายการ
ข้อมูลในแต่ละรายการ	name (ชื่อที่แสดง) · position (ลำดับเป็นจำนวนเต็ม เริ่มที่ 1) · item (URL ของชั้นนั้น)
รายการสุดท้าย	ไม่ใส่ item ได้ Google จะใช้ URL ของหน้านั้นแทน
หน้าแรกและหน้าปัจจุบัน	ไม่บังคับให้มีในเส้นทาง
ลำดับชั้น	แนะนำให้สะท้อนเส้นทางที่ผู้ใช้ทั่วไปเดินมาถึงหน้านั้น แทนการลอกโครงสร้าง URL
หลายเส้นทาง	หน้าเดียวมีหลาย BreadcrumbList ได้ ถ้าเข้าถึงหน้านั้นได้จากหลายหมวดจริง
รูปแบบเก่า	markup แบบ data-vocabulary.org ไม่ได้รับการแสดงผลพิเศษแล้วตั้งแต่ 29 ม.ค. 2021 ให้ใช้ schema.org
สิ่งที่ markup ได้	ทำ markup เฉพาะเนื้อหาที่ผู้อ่านมองเห็นบนหน้า (General structured data guidelines ปรับล่าสุด 10 ก.ค. 2026)

ตัวอย่าง JSON-LD ด้านล่างเป็นหน้าสินค้าของเว็บสมมุติ example.com มี 3 ชั้น ชื่อภาษาไทยตรงกับแถบที่คนเห็น และรายการสุดท้ายไม่ใส่ URL

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "หน้าแรก",
      "item": "https://example.com/"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "รองเท้าวิ่ง",
      "item": "https://example.com/running-shoes/"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "รองเท้าวิ่งผู้ชาย"
    }
  ]
}
</script>

Google แนะนำให้ตรวจ markup ตามลำดับนี้ ซึ่ง The Art of SEO บทที่ 10 ก็พูดถึงรายงาน Breadcrumbs และ URL Inspection เป็นเครื่องมือตรวจ structured data เช่นกัน

1. ใส่ URL หรือโค้ดลงใน Rich Results Test แก้ error ที่ขึ้นจนผ่าน
2. ปล่อยขึ้นจริงก่อนไม่กี่หน้า แล้วใช้ URL Inspection ใน Search Console ดูว่า Google เห็นหน้าแบบเดียวกับที่เราตั้งใจไหม
3. เมื่อผ่านแล้วค่อยปล่อยทั้งเว็บ
4. เฝ้าดูรายงาน Breadcrumbs ในหมวด Enhancements ของ Google Search Console หลังจากนั้น

Breadcrumb ต้องตรงกับ URL ไหม

Breadcrumb ไม่จำเป็นต้องตรงกับ URL Google แนะนำให้วาง breadcrumb ตามเส้นทางที่ผู้ใช้ทั่วไปเดินมาถึงหน้านั้น แทนการลอกโครงสร้าง URL (เอกสาร BreadcrumbList 8 ก.ย. 2026) ข้อนี้สำคัญกับเว็บ WordPress จำนวนมากที่ตั้ง URL แบบแบน คือมีแค่ชื่อบทความต่อจากโดเมน เพราะถ้ายึด URL เป็นหลัก แถบจะเหลือแค่ หน้าแรก › ชื่อบทความ และไม่บอกอะไรเกี่ยวกับหมวดเลย

AI SEO For Dummies บทที่ 11 แนะนำอีกแบบ คือให้ breadcrumb สะท้อนลำดับชั้นจริงของเว็บและตรงกับโครงสร้าง URL และใน checklist ตรวจเว็บของบทเดียวกันก็คาดหวังให้หน้าลึกมี breadcrumb ที่ตรงกับ URL สองแนวนี้ไม่ได้ขัดกันเสมอไป

• เว็บที่ URL ตามหมวดอยู่แล้ว เช่น /running-shoes/men/ แถบที่ตาม URL กับแถบที่ตามเส้นทางผู้ใช้จะออกมาเหมือนกัน ทำตามแนวไหนก็ได้ผลเดียวกัน
• เว็บที่ URL แบน หรือ URL มีโฟลเดอร์ที่ไม่มีหน้าจริง ให้ยึดเส้นทางผู้ใช้ตาม Google เช่น ใช้หมวดหลัก (primary category) ของบทความเป็นชั้นกลาง และอย่าใส่ชั้นที่กดแล้วไม่มีหน้ารองรับ
• หน้าที่อยู่ได้หลายหมวด เช่น สินค้าที่อยู่ทั้งหมวดรองเท้าวิ่งและหมวดสินค้าลดราคา Google อนุญาตให้มีหลายเส้นทาง แต่เราแนะนำให้แถบที่คนเห็นมีเส้นทางหลักเส้นเดียวเพื่อไม่ให้สับสน

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

เว็บแบบไหนควรมี breadcrumb แบบไหนไม่จำเป็น

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

ควรมี breadcrumb	ไม่จำเป็น	ข้อควรระวัง
ร้านค้าออนไลน์ที่มีหมวดและหมวดย่อย	Landing page หน้าเดียว	ไม่ใช้ breadcrumb แทนเมนูหลัก
บล็อกหรือเว็บสื่อที่แบ่งหมวดบทความ	เว็บบริษัทเล็กที่มี 5–10 หน้าในชั้นเดียว	ทุกชั้นในแถบต้องมีหน้าจริงที่เปิดได้
เว็บเอกสาร ศูนย์ช่วยเหลือ คู่มือสินค้า	หน้าแรกของเว็บ (ไม่มีชั้นที่สูงกว่า)	อย่าทำ markup ถ้าไม่มีแถบให้คนเห็น
เว็บธนาคาร ประกัน หรือองค์กรที่มีผลิตภัณฑ์เป็นกลุ่ม	หน้าชำระเงินหรือหน้าที่ตั้งใจให้ทำแค่อย่างเดียว	ชื่อชั้นควรสั้นและตรงกับชื่อเมนู

The Art of SEO บทที่ 14 ยกให้ breadcrumb เป็นหนึ่งในองค์ประกอบที่ทดสอบได้ใน SEO testing โดยเปลี่ยนทีละอย่าง แล้วรอดูผลก่อนเปลี่ยนอย่างถัดไป ถ้าเว็บใหญ่ของคุณยังไม่แน่ใจว่าคุ้มไหม การทดลองกับหมวดหนึ่งก่อนเป็นทางที่ปลอดภัยกว่าเปลี่ยนทั้งเว็บพร้อมกัน

ทำ breadcrumb ใน WordPress: Rank Math, Yoast และธีม

Breadcrumb ใน WordPress ทำได้ง่ายที่สุดผ่านปลั๊กอิน SEO ที่ใช้อยู่แล้ว เพราะปลั๊กอินสร้างทั้งแถบที่มองเห็นและ BreadcrumbList จากข้อมูลชุดเดียวกัน ทำให้ชื่อในแถบกับใน markup ตรงกันโดยอัตโนมัติ ขั้นตอนมี 2 ส่วนเสมอ คือเปิดใช้ในหน้าตั้งค่า แล้วสั่งให้แถบแสดงบนหน้าเว็บ ด้านล่างอ้างตามเอกสารของปลั๊กอินแต่ละตัว ซึ่งหน้าตาเมนูอาจเปลี่ยนตามเวอร์ชัน

Rank Math breadcrumb

1. เปิด Advanced Mode ของ Rank Math ก่อน ถ้ายังไม่เห็นเมนู Breadcrumbs
2. ไปที่ Rank Math SEO › General Settings › Breadcrumbs แล้วเปิดใช้ ตั้งตัวคั่น ชื่อหน้าแรก และตัวเลือกอื่นตามต้องการ
3. แสดงแถบบนหน้าเว็บด้วยวิธีใดวิธีหนึ่ง: shortcode ฟังก์ชัน PHP rank_math_the_breadcrumbs() ในไฟล์ธีม หรือวิดเจ็ต Breadcrumbs ใน Elementor (เอกสาร Rank Math ระบุว่าต้องใช้ Elementor Pro คู่กับ Rank Math PRO)

หน้าความรู้ (KB) เรื่อง Breadcrumbs ของ Rank Math ปรับล่าสุด 30 มิ.ย. 2023 ชื่อเมนูในเวอร์ชันที่คุณใช้อาจต่างไปเล็กน้อย

Yoast breadcrumb

1. ไปที่ Yoast SEO › Settings › Advanced › Breadcrumbs แล้วเปิด “Enable breadcrumbs for your theme”
2. แสดงแถบด้วยโค้ดในไฟล์ธีม (ฟังก์ชัน yoast_breadcrumb()) บล็อก Yoast Breadcrumbs ใน block editor หรือ shortcode ตามที่เอกสาร Yoast อธิบาย

เอกสาร Yoast (ปรับล่าสุด 24 ก.พ. 2026) ใช้ path นี้ ถ้าบทความหรือคำตอบ AI บอกให้ไปที่ SEO › Search Appearance › Breadcrumbs ของ Yoast หรือ Titles & Meta › Breadcrumbs ของ Rank Math แปลว่าข้อมูลนั้นอ้างหน้าตาเมนูรุ่นเก่า

ธีม WooCommerce และ page builder

ธีม ปลั๊กอินร้านค้า และ page builder บางตัวมี breadcrumb ของตัวเองอยู่แล้ว ปัญหาที่พบบ่อยคือเปิดทั้งของธีมและของปลั๊กอิน SEO พร้อมกัน หน้าเดียวจึงมีแถบสองแถบ หรือมี BreadcrumbList สองชุดที่ชื่อไม่ตรงกัน ให้เลือกแหล่งเดียวเป็นเจ้าของ breadcrumb ทั้งแถบและ markup แล้วปิดอีกแหล่ง จากนั้นตรวจด้วย Rich Results Test ว่าเหลือ BreadcrumbList ชุดเดียวที่ตรงกับแถบ

Breadcrumb UX และ accessibility: ทำให้ทุกคนใช้ได้

Breadcrumb ที่ดีต่อผู้ใช้ต้องใช้งานได้ทั้งกับคนที่มองเห็นจอและคนที่ใช้โปรแกรมอ่านหน้าจอ (screen reader) W3C ซึ่งเป็นองค์กรกำหนดมาตรฐานเว็บ วางรูปแบบ breadcrumb ไว้ใน WAI-ARIA Authoring Practices Guide (APG) ว่าแถบควรอยู่ใน navigation landmark (ส่วนนำทางที่โปรแกรมอ่านหน้าจอกระโดดไปหาได้) ที่มีชื่อกำกับ และลิงก์ของหน้าปัจจุบันควรมี aria-current="page"

<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="https://example.com/">หน้าแรก</a></li>
    <li><a href="https://example.com/running-shoes/">รองเท้าวิ่ง</a></li>
    <li><a href="https://example.com/running-shoes/men/" aria-current="page">รองเท้าวิ่งผู้ชาย</a></li>
  </ol>
</nav>

• <nav aria-label="Breadcrumb">: ทำให้ส่วนนี้เป็นส่วนนำทางที่มีชื่อ คนใช้ screen reader รู้ว่านี่คือ breadcrumb ไม่ใช่เมนูหลัก
• <ol>: รายการแบบมีลำดับ บอกว่าชั้นเรียงจากบนลงล่าง ตัวคั่นอย่าง › ควรใส่ด้วย CSS เพื่อไม่ให้ถูกอ่านออกเสียงทุกชั้น
• aria-current="page": บอกว่ารายการสุดท้ายคือหน้าที่เปิดอยู่ ถ้ารายการสุดท้ายเป็นข้อความธรรมดาที่ไม่ใช่ลิงก์ APG บอกว่าไม่ต้องใส่ก็ได้

ฝั่งหน้าตา NN/g แนะนำให้ breadcrumb บนมือถือไม่เล็กจนกดยาก และไม่ตัดขึ้นหลายบรรทัดจนกินพื้นที่เหนือเนื้อหา ทางแก้ที่ใช้กันคือย่อชื่อชั้นให้สั้น หรือแสดงเฉพาะชั้นที่อยู่เหนือหน้าปัจจุบันหนึ่งชั้นบนจอเล็ก ส่วนลิงก์ทุกชั้นต้องเป็นแท็ก <a href> จริงใน HTML ซึ่ง AI SEO For Dummies บทที่ 10–11 ย้ำว่าบอทหลายตัวอ่านเฉพาะลิงก์ที่อยู่ใน HTML ไม่ได้รัน JavaScript

ส่วนนี้เป็นจุดที่เว็บไทยทำได้น้อยที่สุดในข้อมูลของเรา ในหน้าไทยหน้าแรก Google ที่มีแถบ breadcrumb ให้เห็น 11 หน้า มีแค่ 3 หน้าที่วางแถบใน <nav> ที่มีชื่อกำกับ และ 2 หน้าที่ใส่ aria-current (ผลเบื้องต้น 16 ต.ค. 2026)

ข้อผิดพลาดที่พบบ่อย และวิธีเช็กใน 5 นาที

ข้อผิดพลาดของ breadcrumb ที่พบบ่อยที่สุดคือ markup ไม่ตรงกับสิ่งที่คนเห็น ในหน้าไทยที่เราสำรวจซึ่งใช้ JSON-LD 6 หน้า มี 2 หน้าที่ชื่อใน schema ไม่ตรงกับแถบที่มองเห็น เช่น schema เขียนชื่อหมวดหนึ่ง แต่แถบบนหน้าแสดงอีกชื่อ และผลค้นหาบนเดสก์ท็อปแสดงชื่อจาก schema ทำให้คนเห็นชื่อในผลค้นหาไม่ตรงกับหน้าที่คลิกเข้าไป

1. ชื่อใน markup ไม่ตรงกับแถบที่มองเห็น: มักเกิดเมื่อธีมกับปลั๊กอินสร้างคนละชุด
2. มี markup แต่ไม่มีแถบให้คนเห็น: ขัดกับกติกาที่ให้ markup เฉพาะเนื้อหาที่มองเห็น
3. ลอก URL ที่ไม่สวยมาเป็นชั้น: เช่น ชั้นชื่อ “product-cat” หรือโฟลเดอร์ที่ไม่มีหน้าจริง
4. ชั้นในแถบไม่ใช่ลิงก์: ทำเป็นข้อความหรือ <span> ทั้งแถบ คนกดย้อนขึ้นไปไม่ได้ และบอทไม่ได้ลิงก์
5. ลิงก์ชั้นบนพาไปหน้าที่ redirect, 404 หรือ noindex: ทุกชั้นควรเป็นหน้าที่ตอบ 200 และเปิดให้ index
6. แถบซ้ำสองชุด: ของธีมกับของปลั๊กอิน
7. หมวดผิด: บทความอยู่หลายหมวดแล้วแถบเลือกหมวดที่ไม่ใช่หมวดหลัก
8. ยังใช้ data-vocabulary.org: Google ไม่แสดงผลพิเศษให้ตั้งแต่ 29 ม.ค. 2021

ชื่อชั้นสุดท้ายไม่จำเป็นต้องเหมือน title tag ของหน้า แถบมีไว้บอกตำแหน่ง ส่วน title tag มีไว้เป็นหัวข้อในผลค้นหา วิธีเขียน title tag อยู่ในบทความ Title Tag คืออะไร

วิธีเช็ก breadcrumb ของเว็บตัวเองใน 5 นาที ทำตามลำดับนี้กับหน้าตัวอย่าง 2–3 หน้าจากคนละหมวด

1. เปิดหน้าดูด้วยตา (1 นาที): มีแถบไหม ทุกชั้นกดได้ไหม ชั้นบนพาไปหน้าที่ถูกไหม
2. view-source (1 นาที): ค้นคำ BreadcrumbList ว่ามีกี่ชุด และชื่อตรงกับแถบไหม ค้นคำ data-vocabulary ด้วย
3. Rich Results Test (1 นาที): ใส่ URL ดูว่า Breadcrumbs ผ่านและไม่มี error
4. Search Console › Breadcrumbs (1 นาที): ดูจำนวนรายการที่ผ่านและที่มีปัญหา
5. URL Inspection (1 นาที): ดูว่า Google อ่าน breadcrumb ของหน้านั้นได้ตามที่ตั้งใจ

ถ้าอยากตรวจเว็บทั้งเว็บ ไม่ใช่แค่ breadcrumb รายการตรวจทั้งหมดอยู่ใน SEO Audit คืออะไร และภาพรวมงานเทคนิคอยู่ใน Technical SEO คืออะไร

ผลเบื้องต้น: เว็บไทยหน้าแรก Google ทำ breadcrumb กันแค่ไหน

ผลเบื้องต้นของ The Missing Piece คือ หน้าไทยที่ติดหน้าแรก Google ประมาณครึ่งหนึ่งไม่มี breadcrumb เลย แต่หน้าที่มี markup ส่วนใหญ่ได้ชื่อหมวดของตัวเองในผลค้นหาบนเดสก์ท็อป เราเปิดหน้าไทยที่ติด 10 อันดับแรกบนเดสก์ท็อปของ 4 คำค้นเชิงพาณิชย์ คือ ประกันรถยนต์ชั้น 1, รองเท้าวิ่งผู้ชาย, ครีมกันแดดหน้า และสินเชื่อบ้าน เมื่อ 16 ต.ค. 2026 อ่านได้ 23 หน้า ข้อมูลชุดนี้เล็ก จึงใส่ช่วงความเชื่อมั่นไว้ทุกตัว

สิ่งที่เช็ก	ผล	ช่วงความเชื่อมั่น 95%
มีแถบ breadcrumb ให้เห็น	11 / 23 หน้า (48%)	29–67%
มี BreadcrumbList ใน HTML (JSON-LD 6 หน้า, microdata 3 หน้า)	9 / 23 หน้า (39%)	22–59%
ไม่มีทั้งแถบและ markup	12 / 23 หน้า (52%)	33–71%
มี markup แต่ไม่มีแถบให้เห็น	0 / 9 หน้า	0–30%
ชื่อใน JSON-LD ไม่ตรงกับแถบที่เห็น	2 / 6 หน้า	10–70%
แถบอยู่ใน <nav> ที่มีชื่อกำกับ	3 / 11 แถบ (27%)	10–57%
ใส่ aria-current="page" ที่หน้าปัจจุบัน	2 / 11 แถบ (18%)	5–48%
ผลค้นหาเดสก์ท็อปแสดงชื่อจาก markup (หน้าที่มี markup)	7 / 9 หน้า (78%)	45–94%
ผลค้นหาเดสก์ท็อปแสดง path ของ URL (หน้าที่ไม่มี markup)	13 / 14 หน้า (93%)	69–99%

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

เคสจริง: breadcrumb ของเว็บ The Missing Piece

เว็บ The Missing Piece ใช้ URL แบบแบน คือชื่อบทความต่อจากโดเมนเลย แต่ breadcrumb ของบทความตามหมวดหลัก เช่น หน้าแรก › SEO › ชื่อบทความ ซึ่งเป็นแนวทาง “ตามเส้นทางผู้ใช้ ไม่ตาม URL” ของ Google ตรงๆ เมื่อ 6 ต.ค. 2026 เราตรวจโครงสร้างเว็บ (IA audit) ทั้งเว็บ และพบว่า breadcrumb ของบทความตรงกับหมวดหลักครบทุกหน้า แต่มี breadcrumb 3 จุดที่ต้องแก้ ตอนนี้แก้ครบทั้ง 3 จุดแล้ว (จุดสุดท้ายเสร็จ 11 ต.ค. 2026 และเราเปิดเช็กบนเว็บจริงอีกครั้งเมื่อ 16 ต.ค. 2026)

1. หน้าแนวคิด (Frameworks) ขาดชั้นกลาง: เดิมแถบเป็น หน้าแรก › ชื่อแนวคิด เราเพิ่มชั้น “แนวคิด (Frameworks)” ที่ลิงก์ไปหน้ารวมแนวคิด ให้หน้าลูกชี้กลับหาหน้าแม่ได้
2. หน้ารวมตามประเภทบทความ แถบที่เห็นกับ schema ไม่ตรงกัน: แถบที่มองเห็นมีชั้นที่ไม่มีหน้าจริงรองรับ แต่ schema ไม่มีชั้นนั้น เราแก้ให้สองฝั่งตรงกัน
3. หน้าโปรไฟล์ผู้เขียน schema มีแค่หน้าแรก: เราเพิ่มชื่อผู้เขียนเป็นชั้นสุดท้าย ให้ breadcrumb ครบ 2 รายการตามกติกาและบอกได้ว่าหน้านี้เป็นของใคร

บทเรียนจากเคสนี้คือ “ผ่าน” ในเครื่องมือตรวจไม่ได้แปลว่า “ถูก” รายงาน Breadcrumbs ใน Search Console ของเรา (ข้อมูลถึง 5 ต.ค. 2026) แสดงรายการที่ถูกต้อง (Valid) 17 รายการ แต่เครื่องมือแบบนี้ตรวจรูปแบบของโค้ดเป็นหลัก ชั้นที่ขาดหายหรือชื่อที่ไม่ตรงกับแถบที่คนเห็นต้องใช้คนเปิดดูเทียบเอง เราจึงเจอ 3 จุดนี้จากการไล่ดูทีละหน้า ไม่ใช่จากรายงาน ภาพรายงานนี้อยู่ในบทความ Schema Markup คืออะไร ถ้าเป็นไปได้ ให้แก้ที่ต้นทางเดียวที่สร้างทั้งแถบและ schema เช่น การตั้งค่า breadcrumb ของปลั๊กอิน SEO สองฝั่งจะได้เปลี่ยนตามกัน

Breadcrumb กับ AI Search

ยังไม่มีหลักฐานว่า AI Search ใช้ breadcrumb หรือ BreadcrumbList โดยตรงในการเลือกแหล่งอ้างอิง เราไม่พบเอกสารทางการของ Google, OpenAI หรือ Perplexity ที่บอกว่าใช้ข้อมูลนี้ และเอกสาร AI features and your website ของ Google (ปรับล่าสุด 10 ธ.ค. 2025) บอกว่าไม่ต้องเพิ่ม structured data แบบพิเศษใดๆ เพื่อให้ปรากฏใน AI Overviews หรือ AI Mode ตัวเลขสถิติที่อ้างว่า BreadcrumbList เพิ่มโอกาสถูก AI อ้างอิง ซึ่งพบได้ในบางบทความต่างประเทศ เราหารายงานต้นฉบับไม่พบ จึงไม่นำมาใช้

ประโยชน์ทางอ้อมยังมีอยู่ breadcrumb ที่เป็นลิงก์ <a href> จริงใน HTML ช่วยให้บอททุกตัว ทั้งของ Google และของ AI ไล่จากหน้าลึกขึ้นไปหาหน้าหมวด และเห็นว่าหน้าไหนอยู่กลุ่มเดียวกัน AI SEO For Dummies บทที่ 13 อธิบายว่าการครอบคลุมหัวข้อให้ลึกเป็นกลุ่มช่วยให้เว็บดูเป็นผู้รู้ในหัวข้อนั้น ในมุมของเรา breadcrumb เป็นเครื่องมือเล็กๆ ที่ทำให้กลุ่มนั้นมองเห็นได้ ข้อถกเถียงว่า schema โดยรวมช่วยเรื่อง AI ไหม เราสรุปข้อมูลไว้แล้วใน Schema Markup คืออะไร และภาพรวมการเตรียมเว็บให้พร้อมสำหรับ AI อยู่ใน AI-Ready Website

เรื่องที่ AI Overview ใช้ตัดสินว่าจะอ้างเว็บไหนอ่านต่อได้ที่ AI Overviews คืออะไร ถ้าอยากเรียน SEO ทีละขั้นต่อจากนี้ เริ่มได้ที่ เรียน SEO ฟรีทีละขั้น หรือย้อนไปดูภาพรวมที่ SEO คืออะไร

บทความนี้เขียนโดยทีม The Missing Piece จากเอกสารทางการของ Google, มาตรฐานของ W3C และ schema.org, งานวิจัย UX ของ NN/g, เอกสารของปลั๊กอิน และข้อมูลที่เราเก็บเองจากเว็บไทยและเว็บของเรา

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

แหล่งอ้างอิง

• Google Search Central, Breadcrumb (BreadcrumbList) structured data (last updated 2026-09-08: ใช้ได้บนเดสก์ท็อป, ช่วยผู้ใช้และจัดหมวดในผลค้นหา, แนะนำเส้นทางผู้ใช้ทั่วไปแทนการลอก URL, หน้าแรกและหน้าปัจจุบันไม่บังคับ, อย่างน้อย 2 ListItem, name/position/item, item ของรายการสุดท้ายไม่บังคับ, หลายเส้นทางได้, data-vocabulary.org ไม่ได้รับผลพิเศษแล้ว, ขั้นตอนตรวจ)
• Google Search Central Blog, Simplifying the visible URL element on mobile search results (Caitlin Dorsey, 23 ม.ค. 2025: เลิกแสดง breadcrumb บนมือถือทุกภาษาและประเทศ, เดสก์ท็อปยังแสดง, ไม่ต้องทำอะไร, รายงาน Search Console และ Rich Results Test ยังใช้ได้)
• Google Search Central, Documentation updates (รายการ 22 ม.ค. 2025: เพิ่มส่วน feature availability ว่า breadcrumb ใช้บนเดสก์ท็อป · รายการ 30 ต.ค. 2020: data-vocabulary.org ไม่ได้รับผลพิเศษตั้งแต่ 29 ม.ค. 2021)
• Google Search Central, General structured data guidelines (last updated 2026-07-10: ไม่ทำ markup กับเนื้อหาที่ผู้อ่านมองไม่เห็น)
• Google Search Central, AI features and your website (last updated 2025-12-10: ไม่ต้องมี structured data พิเศษเพื่อปรากฏใน AI Overviews หรือ AI Mode)
• schema.org, BreadcrumbList (ตรวจ 16 ต.ค. 2026: ItemList ของหน้าที่ลิงก์กัน มักจบที่หน้าปัจจุบัน, position เป็นจำนวนเต็มเริ่มที่ 1)
• W3C WAI, ARIA Authoring Practices Guide: Breadcrumb Pattern (ตรวจ 16 ต.ค. 2026: navigation landmark ที่มีชื่อกำกับ, aria-current=”page” ที่หน้าปัจจุบัน ไม่ต้องใส่ถ้าไม่ใช่ลิงก์)
• Nielsen Norman Group, Breadcrumbs: 11 Design Guidelines for Desktop and Mobile (ทบทวนล่าสุด 1 ก.ย. 2026: แสดงลำดับชั้นไม่ใช่ประวัติการเข้าชม, เสริมเมนูหลักไม่ใช่แทน, บนมือถือไม่เล็กและไม่ตัดหลายบรรทัด)
• Rank Math, How to Enable Breadcrumbs on Your Website (ปรับล่าสุด 30 มิ.ย. 2023 หน้าตาเมนูอาจเปลี่ยน: General Settings › Breadcrumbs, Advanced Mode, shortcode, ฟังก์ชัน PHP, วิดเจ็ตใน Elementor ที่ต้องใช้ Elementor Pro คู่กับ Rank Math PRO)
• Yoast, How to implement Yoast SEO breadcrumbs (ปรับล่าสุด 24 ก.พ. 2026: Settings › Advanced › Breadcrumbs, วิธีแสดงแถบ)
• Yoast Developer, Schema piece: Breadcrumb (ไม่ระบุวันที่ ตรวจ 16 ต.ค. 2026: ส่วน breadcrumb ถูกออกให้ทุกหน้าสาธารณะที่มี WebPage ที่ถูกต้อง)
• ข้อมูลของ The Missing Piece: ผลเบื้องต้นการสำรวจ breadcrumb ของหน้าไทยที่ติด 10 อันดับแรกบนเดสก์ท็อป 4 คำค้นเชิงพาณิชย์ อ่านได้ 23 หน้า (16 ต.ค. 2026 หน้าละ 1 ครั้ง HTML ดิบ ไม่ระบุชื่อเว็บ) · การสังเกตผลค้นหาคำ “breadcrumb คือ” บนมือถือ Android และ “breadcrumbs คือ” บนเดสก์ท็อป รวมถึง AI Overview บนมือถือ คำละ 1 ครั้ง (16 ต.ค. 2026) · คำตอบของ OpenAI ผ่าน API (ChatGPT) รุ่น gpt-4.1-mini เปิดค้นเว็บ ประเทศไทย 1 คำถาม (16 ต.ค. 2026, n=1) · การตรวจโครงสร้างเว็บ The Missing Piece (6 ต.ค. 2026)
• Nathan Gotch, AI SEO For Dummies (Wiley, 2026), บทที่ 10 (ลิงก์ต้องเป็น anchor จริงใน HTML ที่บอทอ่านได้โดยไม่รัน JavaScript) · บทที่ 11 (breadcrumb สะท้อนลำดับชั้นจริงและตรงกับโครงสร้าง URL ซึ่งต่างจากคำแนะนำของ Google เรื่องเส้นทางผู้ใช้ เราอธิบายไว้ในหัวข้อ URL) · บทที่ 13 (ความครอบคลุมของหัวข้อเป็นกลุ่ม)
• Eric Enge, Stephan Spencer, Jessie Stricchiola, The Art of SEO, 4th ed. (O’Reilly, 2023), บทที่ 5 (breadcrumb เป็นวิธีบอกตำแหน่งในหมวดที่ชัดที่สุด) · บทที่ 7 (breadcrumb เสริมลิงก์ภายในแบบลำดับชั้น และเป็น schema ที่ Google รองรับ) · บทที่ 10 (รายงาน Breadcrumbs และ URL Inspection ใน Search Console · รายการรายงานอื่นในบทนี้ เช่น FAQ, How-to, Sitelinks search box ล้าสมัยแล้ว) · บทที่ 14 (breadcrumb เป็นองค์ประกอบที่ทดสอบได้) · การมอง breadcrumb เป็นที่ใส่ anchor ที่มีคีย์เวิร์ด และการแสดงผลในผลค้นหาก่อนปี 2025 ล้าสมัยแล้ว