Breadcrumbs ช่วยให้ Google เข้าใจโครงสร้างไซต์และช่วยผู้ใช้ทราบ “ฉันอยู่ที่ไหน” พร้อมทางกลับในคลิกเดียว ให้ทำ HTML/ARIA ชัด, ใส่ JSON-LD แบบ BreadcrumbList, ใช้ลิงก์ภายในมีบริบท และให้ผลกับ CTR/UX โดยไม่รบกวนความเร็วหน้า

Breadcrumbs Navigation สำหรับ SEO + UX (พร้อมโค้ดและสคีมา)

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

เลือกรูปแบบ Breadcrumbs ให้ “ตรงงาน”

โค้ดตัวอย่าง: HTML/ARIA + JSON-LD

<!-- HTML / ARIA -->
<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li><a href="/">Home</a></li>
    <li><a href="/blog/">Blog</a></li>
    <li><a href="/blog/seo/">SEO</a></li>
    <li aria-current="page">Breadcrumbs Navigation SEO + UX</li>
  </ol>
</nav>

<!-- JSON-LD: BreadcrumbList -->
<script type="application/ld+json">
{
  "@context":"https://schema.org",
  "@type":"BreadcrumbList",
  "itemListElement":[
    {"@type":"ListItem","position":1,"name":"Home","item":"https://www.visionxbrain.com/"},
    {"@type":"ListItem","position":2,"name":"Blog","item":"https://www.visionxbrain.com/blog/"},
    {"@type":"ListItem","position":3,"name":"SEO","item":"https://www.visionxbrain.com/blog/seo/"},
    {"@type":"ListItem","position":4,"name":"Breadcrumbs Navigation SEO + UX","item":"https://www.visionxbrain.com/blog/blog-breadcrumbs-navigation-seo-ux"}
  ]
}
</script>

เช็กลิสต์คุณภาพ (ทำครบ ติดง่าย ใช้งานดี)

• สอดคล้อง IA จริง: ลำดับ crumb ต้องตรงโครง URL/หน้า
• ชัดสำหรับ Screen Reader: ใช้ nav aria-label="breadcrumb", ใส่ aria-current="page" ที่ crumb สุดท้าย
• ลิงก์ภายในมีบริบท: ชื่อ crumb เป็น คำธรรมชาติ ที่ตรง intent ไม่ยัดคีย์เวิร์ด
• สคีมาถูกชนิด: ใช้ BreadcrumbList เท่านั้น (ไม่ต้องทำซ้ำหลายฟอร์แมต)
• ไม่รบกวนความเร็ว: CSS/JS เบา ๆ; ไม่ต้องใช้ไลบรารีหนักสำหรับเพียง breadcrumb

ติดตามคลิก Breadcrumb ด้วย GA4 (ตัวอย่าง)

<script>
document.querySelectorAll('nav[aria-label="breadcrumb"] a')?.forEach(a => {
  a.addEventListener('click', () => {
    gtag('event','breadcrumb_click',{link_text:a.textContent, link_url:a.href});
  });
});
</script>

อ้างอิงภายนอก (มาตรฐาน/แนวทางที่เชื่อถือได้)

• Google Search Central — Breadcrumb structured data: developers.google.com
• Schema.org — BreadcrumbList: schema.org
• W3C WAI Tutorials — Breadcrumbs pattern: w3.org
• Google — Core Web Vitals overview: web.dev

บริการที่เกี่ยวข้อง (Internal Links)

• ปรับปรุงเว็บให้เร็ว/คอนเวิร์ตสูง
• ออกแบบ/พัฒนา Webflow
• บริการ UX/UI Design
• บริการทั้งหมด

อ่านต่อ (บทความที่เกี่ยวข้อง)

• UX/UI บน Webflow ที่คอนเวิร์ต
• ออกแบบ Footer ให้มีประโยชน์จริง
• ตัวอย่าง CTA ที่คลิกดี

FAQ (People Also Ask)

Breadcrumbs จำเป็นกับทุกเว็บไหม?
ไม่จำเป็นเสมอไป แต่เหมาะกับเว็บที่มีลำดับชั้นชัด (บริการหลายระดับ/อีคอมเมิร์ซ/บล็อกหลายหมวด) เพื่อช่วยทั้งผู้ใช้และการทำความเข้าใจโครงสร้างโดย Google

ต้องใช้ทั้ง HTML และ JSON-LD ไหม?
แนะนำให้มีทั้งสอง: HTML/ARIA เพื่อการเข้าถึง/ใช้งานจริง และ JSON-LD เพื่อช่วยระบบค้นหาอ่านโครงสร้างได้แม่นยำ

Breadcrumbs กระทบความเร็วหน้าไหม?
ไม่ควร หากใช้โค้ดเรียบง่าย ไม่โหลดไลบรารีหนัก และบีบให้เรนเดอร์เร็ว (หลีกเลี่ยง JS ไม่จำเป็น)

เกี่ยวกับผู้เขียน

Vision X Brain Team — ทีม Website/SEO/CRO & Webflow สำหรับธุรกิจไทย ออกแบบ IA, ลิงก์ภายใน และสคีมาที่ช่วยให้ค้นหาเข้าใจ พร้อมทำ UX ที่พาไปสู่คอนเวิร์ชัน วัดผลได้จริง

อัปเดตล่าสุด: 24 Aug 2025