ลองนึกภาพว่าคุณเดินเข้าห้างใหญ่ ๆ แถวหาดใหญ่ กดลิฟต์ขึ้นไปชั้น 4 แล้วเดินหลงอยู่กลางโซนที่ไม่รู้ว่าคืออะไร ไม่มีป้ายบอกว่าโซนนี้ชื่ออะไร ไม่มีลูกศรบอกทางกลับ สิ่งเดียวที่คุณทำได้คือเดินย้อนกลับไปที่ลิฟต์แล้วเริ่มใหม่ — หรือไม่ก็เดินออกจากห้างไปเลย
เว็บไซต์จำนวนมากทำแบบนั้นกับผู้ใช้ทุกวัน คนกดเข้ามาจาก Google ตรงหน้าบทความลึก ๆ หน้าหนึ่ง อ่านจบแล้วไม่รู้ว่าเว็บนี้มีอะไรอีก ไม่รู้ว่าหน้านี้อยู่ในหมวดไหน ก็กดปิดไป
Breadcrumbs คือป้ายบอกทางเล็ก ๆ นั้นแหละ มันใช้พื้นที่แค่บรรทัดเดียวใต้เมนู แต่แก้ปัญหาได้ทั้งฝั่งคนและฝั่ง Google พร้อมกัน และในบรรดางาน Technical SEO ทั้งหมด นี่คืองานที่ “ลงแรงน้อยที่สุดต่อผลลัพธ์ที่ได้” อันดับต้น ๆ ที่เรามักแนะนำลูกค้าให้ทำก่อนเสมอ
Breadcrumbs คืออะไร และทำไมถึงชื่อนี้
Breadcrumbs (เบรดครัมบ์) คือแถบนำทางรองที่แสดงตำแหน่งของหน้าปัจจุบันภายในลำดับชั้นของเว็บไซต์ โดยเรียงจากหน้าที่กว้างที่สุด (ปกติคือหน้าแรก) ไล่ลงมาถึงหน้าที่เจาะจงที่สุด (หน้าที่ผู้ใช้กำลังดูอยู่) คั่นด้วยสัญลักษณ์อย่าง › / หรือ >
หน้าตาแบบมาตรฐานคือ:
หน้าแรก › บริการ › รับทำ SEO › SEO สำหรับโรงแรม
ที่มาของชื่อมาจากนิทานเรื่อง Hansel and Gretel ที่เด็กสองพี่น้องโรยเศษขนมปังไว้ตามทางเดินในป่า เพื่อจะได้เดินย้อนกลับบ้านถูก — เว็บไซต์ยืมแนวคิดนี้มาตรง ๆ คือ “ทิ้งร่องรอยเส้นทางไว้ให้ผู้ใช้เดินย้อนกลับได้”
จุดสำคัญที่หลายคนเข้าใจผิด: breadcrumb ไม่ใช่ ประวัติการเข้าชม (browsing history) ของผู้ใช้ มันไม่ได้บอกว่า “คุณเพิ่งมาจากหน้าไหน” แต่บอกว่า “หน้านี้อยู่ตรงไหนในโครงสร้างเว็บ” ต่อให้ผู้ใช้กระโดดเข้ามาจาก Google ตรง ๆ breadcrumb ก็ต้องแสดงเส้นทางเดิมเสมอ
และเพราะมันสะท้อนโครงสร้าง breadcrumb ที่ดีจะเกิดขึ้นได้ก็ต่อเมื่อเว็บมีโครงสร้างที่ดีอยู่ก่อน ถ้าโครงสร้างเว็บของคุณยังมั่ว ๆ อยู่ แนะนำให้อ่าน โครงสร้างเว็บไซต์ที่ดีต่อ SEO ควบคู่ไปด้วย เพราะ breadcrumb เป็นแค่ “หน้าจอแสดงผล” ของโครงสร้างที่คุณวางไว้เท่านั้น
3 ประเภทของ Breadcrumbs ที่ต้องแยกให้ออก
หลายเว็บพังตั้งแต่ขั้นนี้ เพราะเลือกประเภทผิดกับลักษณะเว็บของตัวเอง
1. Location-based (ตามลำดับชั้น)
แบบที่พบบ่อยที่สุดและปลอดภัยที่สุด แสดงตำแหน่งของหน้าตามโครงสร้างจริงของเว็บ
หน้าแรก › บทความ › Technical SEO › Breadcrumbs คืออะไร
ข้อดีคือคงที่เสมอ ไม่ว่าผู้ใช้จะเข้ามาทางไหน ทำ schema ได้ง่าย และตรงกับสิ่งที่ Google อยากเห็นที่สุด เว็บบริษัท เว็บบริการ เว็บบล็อก ควรใช้แบบนี้เกือบ 100%
2. Attribute-based (ตามคุณสมบัติสินค้า)
ใช้กับ e-commerce เป็นหลัก แสดงตามคุณสมบัติที่ผู้ใช้เลือกกรอง
หน้าแรก › เสื้อผ้าผู้ชาย › เสื้อยืด › สีดำ › ไซซ์ L
เหมาะกับร้านค้าที่มีระบบ filter เยอะ ๆ แต่ต้องระวังเรื่อง URL ที่ซ้ำซ้อนจากการกรองหลายชั้น ควรใช้คู่กับ canonical tag เสมอ ไม่งั้นจะได้หน้าเกือบเหมือนกันเป็นร้อยหน้าให้ Google สับสน
3. Path-based (ตามเส้นทางที่ผู้ใช้เดินมา)
แสดงประวัติหน้าที่ผู้ใช้เพิ่งผ่านมา เช่น “กลับไปหน้าก่อนหน้า › กลับไปหน้าก่อนหน้านั้น”
ตรงไปตรงมาคือ แทบไม่ควรใช้ในปี 2026 เพราะซ้ำซ้อนกับปุ่ม Back ของเบราว์เซอร์ ไม่คงที่ ทำ schema ไม่ได้ (Google ต้องการเส้นทางที่คงที่) และมักทำให้ผู้ใช้สับสนมากกว่าช่วย
ตารางเปรียบเทียบ
| หัวข้อ | Location-based | Attribute-based | Path-based |
|---|---|---|---|
| อิงจาก | โครงสร้างเว็บ | คุณสมบัติสินค้า/ฟิลเตอร์ | ประวัติการคลิกของผู้ใช้ |
| คงที่ทุกครั้งไหม | คงที่เสมอ | คงที่ต่อชุดฟิลเตอร์ | ไม่คงที่ |
| ทำ Schema ได้ไหม | ได้ ดีที่สุด | ได้ แต่ต้องระวังซ้ำ | ไม่ควรทำ |
| เหมาะกับ | เว็บบริการ บล็อก องค์กร | e-commerce สินค้าเยอะ | แทบไม่มีกรณีที่เหมาะ |
| ความเสี่ยง | แทบไม่มี | URL ซ้ำ / crawl budget | ผู้ใช้สับสน |
| คำแนะนำของเรา | ใช้เลย | ใช้ได้ ถ้าคุมฟิลเตอร์ดี | หลีกเลี่ยง |
ถ้าเว็บคุณเป็นเว็บบริการหรือเว็บโรงแรมทั่วไป ตัดสินใจง่ายมาก: ใช้ location-based แล้วจบ
ประโยชน์ต่อ UX: ลดการกดออก เพิ่มหน้าที่ดูต่อ
เหตุผลอันดับหนึ่งที่ควรทำ breadcrumb ไม่ใช่ SEO แต่คือคน
หนึ่ง ผู้ใช้ที่มาจาก Google ไม่ได้เริ่มที่หน้าแรก ประมาณ 60-75% ของทราฟฟิก organic บนเว็บ SME ที่เราดูแลลงที่หน้าใน ไม่ใช่หน้าแรก คนเหล่านี้ไม่มีบริบทเลยว่าเว็บนี้ทำอะไร breadcrumb ให้บริบทนั้นภายในครึ่งวินาที
สอง มันให้ทางออกที่ไม่ใช่การปิดแท็บ ผู้ใช้อ่านบทความจบแล้วสนใจเรื่องใกล้เคียง การกด “Technical SEO” ใน breadcrumb ง่ายกว่าการไล่หาเมนูมาก เว็บที่เราเพิ่ม breadcrumb ให้ มักเห็น pages/session ขยับขึ้นประมาณ 8-15% ภายในเดือนแรก (ตัวเลขนี้เป็นค่าประมาณจากงานที่เราทำ ไม่ใช่ค่ามาตรฐานอุตสาหกรรม)
สาม บนมือถือมันสำคัญกว่าเดิม เมนูมือถือถูกซ่อนไว้ในแฮมเบอร์เกอร์ breadcrumb คือลิงก์นำทางเดียวที่ยังมองเห็นได้ทันที
สี่ ลดภาระความคิด ผู้ใช้ไม่ต้องเดาว่า “เว็บนี้จัดหมวดยังไง” มันบอกให้เห็นตรง ๆ ซึ่งส่งผลต่อความรู้สึกว่าเว็บนี้เป็นมืออาชีพ
ประโยชน์ต่อ SEO: 4 ข้อที่จับต้องได้
Google แสดง breadcrumb แทน URL ใน SERP
นี่คือประโยชน์ที่เห็นชัดที่สุด ตั้งแต่ Google ปรับหน้าผลการค้นหา ผลลัพธ์ที่มี BreadcrumbList schema จะแสดงเส้นทางแบบ southernwhale.com › บทความ › Technical SEO แทนที่จะเป็น URL ยาว ๆ ที่อ่านไม่รู้เรื่อง
ผลคือคนอ่านเข้าใจก่อนคลิกว่าจะเจออะไร ซึ่งช่วยเรื่อง CTR โดยเฉพาะกับ URL ที่ยาวหรือมีตัวเลข ถ้าอยากเข้าใจภาพรวมของ SERP feature อื่น ๆ ที่ทำได้ อ่านต่อที่ SERP Features คืออะไร
กระจาย link equity ลงไปยังหน้าหมวดหมู่
Breadcrumb คือ internal link ที่เกิดขึ้นอัตโนมัติทุกหน้า ถ้าคุณมีบทความ 200 หน้าในหมวด “Technical SEO” หน้าหมวดนั้นจะได้รับลิงก์ภายใน 200 ลิงก์ทันทีโดยไม่ต้องทำอะไรเพิ่ม ซึ่งเป็นวิธีสร้างความสำคัญให้หน้าหมวดที่เป็นธรรมชาติมาก ๆ เรื่องนี้เชื่อมกับหลักการใน Internal & External Linking โดยตรง
ช่วยให้บอตเข้าใจลำดับชั้นและคลานได้ทั่วถึง
Googlebot ใช้ลิงก์ในการเดินสำรวจเว็บ breadcrumb สร้างเส้นทางย้อนขึ้นจากหน้าลึกไปหาหน้าตื้นเสมอ ทำให้ไม่มีหน้าไหน “โดดเดี่ยว” และช่วยเรื่อง crawl efficiency โดยเฉพาะเว็บที่มีหน้าเยอะ
ให้บริบทเชิงความหมายกับหน้า
การที่หน้าหนึ่งอยู่ใต้ “Technical SEO” เป็นสัญญาณเชิงหัวข้อว่าหน้านี้เกี่ยวกับอะไร ซึ่งสอดคล้องกับแนวคิด topic cluster ที่เราเขียนไว้ใน Content Pillar และ Topic Cluster
BreadcrumbList Schema: โค้ดจริงพร้อมอธิบายทีละฟิลด์
Breadcrumb ที่แสดงบนหน้าเว็บอย่างเดียวยังไม่พอ ถ้าอยากให้ Google เอาไปแสดงใน SERP ต้องบอกด้วย structured data ชนิด BreadcrumbList
นี่คือโค้ด JSON-LD ตัวจริงที่ใช้ได้เลย วางไว้ใน <head> หรือท้าย <body> ก็ได้:
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "หน้าแรก",
"item": "https://southernwhale.com/"
},
{
"@type": "ListItem",
"position": 2,
"name": "บทความ",
"item": "https://southernwhale.com/blog/"
},
{
"@type": "ListItem",
"position": 3,
"name": "Technical SEO",
"item": "https://southernwhale.com/blog/category/technical-seo/"
},
{
"@type": "ListItem",
"position": 4,
"name": "Breadcrumbs คืออะไร"
}
]
}เวลาใส่ในหน้าเว็บจริง ให้ห่อด้วยแท็ก script ชนิด application/ld+json
อธิบายทีละฟิลด์
@context — บอกว่าเรากำลังใช้คำศัพท์จาก schema.org ค่านี้เป็น "https://schema.org" เสมอ ไม่ต้องคิดมาก
@type": "BreadcrumbList" — ประกาศว่าก้อนข้อมูลนี้คือชุด breadcrumb ถ้าพิมพ์ผิดเป็น Breadcrumb เฉย ๆ Google จะไม่รู้จัก
itemListElement — อาร์เรย์ที่เก็บทุกขั้นของเส้นทาง เรียงจากบนสุดลงล่างสุด ต้องเป็นอาร์เรย์เสมอแม้มีแค่สองขั้น
@type": "ListItem" — ทุกสมาชิกในอาร์เรย์ต้องเป็นชนิดนี้ ห้ามข้าม
position — ลำดับของขั้นนั้น เริ่มที่ 1 เสมอ ไม่ใช่ 0 และต้องเป็นเลขจำนวนเต็มเรียงติดกัน 1, 2, 3, 4 ห้ามข้ามเลข ห้ามซ้ำ นี่คือข้อผิดพลาดอันดับหนึ่งที่เราเจอเวลาไป audit เว็บลูกค้า
name — ป้ายข้อความที่จะแสดง ควรตรงกับข้อความที่ผู้ใช้เห็นบนหน้าเว็บจริง ไม่ต้องยัด keyword เกินจำเป็น ใช้ชื่อหมวดตามจริงพอ
item — URL แบบเต็ม (absolute URL รวม https:// และโดเมน) ของหน้านั้น ห้ามใช้ path สั้น ๆ อย่าง /blog/
หมายเหตุสำคัญเรื่องขั้นสุดท้าย: สังเกตว่า position: 4 ซึ่งเป็นหน้าปัจจุบัน ไม่มีฟิลด์ item นี่ถูกต้องแล้วตามแนวทางของ Google — หน้าที่ผู้ใช้อยู่ไม่ควรลิงก์ไปหาตัวเอง ถ้าจะใส่จริง ๆ ก็ใส่ URL ของหน้าตัวเองได้และไม่ผิดกติกา แต่การละไว้สะอาดกว่าและตรงกับ UX ที่ควรเป็น (ข้อความสุดท้ายบนหน้าเว็บก็ไม่ควรเป็นลิงก์เช่นกัน)
ถ้าหน้าหนึ่งมีหลายเส้นทาง
สินค้าชิ้นเดียวอาจอยู่ได้ทั้งใน “เสื้อผ้า › เสื้อยืด” และ “โปรโมชัน › ลดราคา” กรณีนี้ใส่ BreadcrumbList ได้หลายก้อนในหน้าเดียว Google จะเลือกอันที่เหมาะกับ query นั้นมาแสดง แต่อย่าใส่เกิน 2-3 เส้นทาง เพราะจะกลายเป็นสัญญาณสับสนมากกว่าช่วย
Microdata vs JSON-LD: เลือกอะไรดี
Schema เขียนได้หลายรูปแบบ ที่เจอบ่อยคือสองแบบนี้
Microdata คือการฝัง attribute ลงไปในแท็ก HTML ที่แสดงผลจริง เช่นใส่ itemscope itemtype itemprop ลงในลิสต์ breadcrumb โดยตรง ข้อดีคือข้อมูลผูกกับสิ่งที่แสดงจริงเสมอ ไม่มีทางไม่ตรงกัน ข้อเสียคือ HTML รกมาก แก้ยาก และเวลาเปลี่ยนดีไซน์ทีมักพัง
JSON-LD คือก้อน JSON แยกออกมาต่างหาก ไม่ยุ่งกับ HTML ที่แสดงผล ข้อดีคืออ่านง่าย แก้ง่าย generate จากฝั่งเซิร์ฟเวอร์ได้สะดวก และ Google แนะนำรูปแบบนี้อย่างเป็นทางการ ข้อเสียคือถ้าไม่ระวัง โค้ดกับสิ่งที่แสดงบนหน้าเว็บอาจไม่ตรงกัน
| ประเด็น | Microdata | JSON-LD |
|---|---|---|
| ตำแหน่งโค้ด | ฝังใน HTML | ก้อนแยกใน script |
| Google แนะนำ | รองรับ | แนะนำ |
| ความยากในการดูแล | สูง | ต่ำ |
| โอกาสไม่ตรงกับหน้าเว็บ | ต่ำมาก | มี ถ้าไม่ระวัง |
| เหมาะกับ | เว็บเก่าที่ทำไว้แล้ว | เว็บใหม่ทุกกรณี |
คำแนะนำ: ถ้าทำเว็บใหม่ ใช้ JSON-LD อย่างเดียว ถ้าเว็บเดิมมี microdata อยู่แล้วและทำงานดี ปล่อยไว้ได้ แต่อย่าใส่ทั้งสองแบบพร้อมกันในหน้าเดียว เพราะถ้าข้อมูลไม่ตรงกันจะกลายเป็นสัญญาณขัดแย้ง อยากเข้าใจ schema ชนิดอื่นเพิ่ม อ่านต่อที่ คู่มือ Schema Markup ฉบับสมบูรณ์
วิธีทำ Breadcrumbs ใน WordPress
ข่าวดีคือ WordPress แทบไม่ต้องเขียนโค้ดเลย
ด้วย Yoast SEO
- ไปที่ Yoast SEO → Settings → Advanced → Breadcrumbs แล้วเปิดใช้งาน
- ตั้งค่าตัวคั่น (แนะนำ
›) และข้อความหน้าแรก (เช่น “หน้าแรก”) - ตั้ง Taxonomy to show in breadcrumbs for content types ให้เป็นหมวดหมู่หลักที่คุณใช้จริง
- ธีมสมัยใหม่ส่วนใหญ่จะแสดงให้อัตโนมัติ ถ้าไม่แสดง ให้ใส่โค้ดเรียก breadcrumb ของ Yoast ในไฟล์
single.phpหรือheader.phpตรงตำแหน่งที่ต้องการ - Yoast จะใส่ BreadcrumbList schema ให้อัตโนมัติเมื่อเปิดฟีเจอร์นี้
ด้วย Rank Math
- ไปที่ Rank Math → General Settings → Breadcrumbs แล้วเปิด
- ตั้งค่า separator, ชื่อหน้าแรก, และเลือกว่าจะซ่อนขั้นสุดท้ายหรือไม่
- เปิดตัวเลือกที่ให้แสดงหมวดหมู่ของโพสต์ในเส้นทาง
- Rank Math ยิง schema ให้เองเช่นกัน
ทั้งสองตัวทำงานได้ดีพอ ๆ กันสำหรับงานนี้ ถ้ายังเลือกไม่ถูกว่าจะใช้ปลั๊กอินไหน เรามีบทเปรียบเทียบเต็ม ๆ ที่ Yoast SEO vs Rank Math
ข้อควรระวังสำหรับ WordPress: ถ้าธีมของคุณมี breadcrumb ในตัวอยู่แล้ว และคุณเปิดของปลั๊กอินด้วย จะได้ schema ซ้ำสองชุด ต้องปิดอันใดอันหนึ่ง ตรวจสอบด้วยการดู source code ว่ามีคำว่า BreadcrumbList กี่ครั้ง ควรมีชุดเดียว (เว้นแต่จงใจทำหลายเส้นทาง)
WooCommerce
WooCommerce มี breadcrumb ในตัวและปรับได้ผ่าน filter woocommerce_breadcrumb_defaults ถ้าคุณทำร้านค้า ควรตั้งให้เส้นทางตรงกับหมวดสินค้าหลักของสินค้านั้น ไม่ใช่ปล่อยเป็น “Shop” เฉย ๆ ทุกชิ้น รายละเอียดเพิ่มเติมที่ คู่มือ WooCommerce
วิธีทำในเว็บ Custom (Astro, Next.js, และอื่น ๆ)
สำหรับเว็บที่เขียนเอง หลักคิดมีสามชั้น
ชั้นที่ 1 — แหล่งข้อมูลเดียว สร้างฟังก์ชันหนึ่งตัวที่รับ path ปัจจุบันแล้วคืนอาร์เรย์ของขั้นตอน [{ name, url }] ห้ามให้ตำแหน่งไหนในโค้ดสร้าง breadcrumb เองแยกกัน เพราะนี่คือต้นเหตุที่ schema กับหน้าเว็บไม่ตรงกัน
ชั้นที่ 2 — คอมโพเนนต์แสดงผล เอาอาร์เรย์นั้นมาเรนเดอร์เป็นลิสต์ โดยขั้นสุดท้ายต้องเป็นข้อความธรรมดา ไม่ใช่ลิงก์ และควรใส่ aria-label="Breadcrumb" บนแท็ก nav เพื่อการเข้าถึงที่ดี
ชั้นที่ 3 — สร้าง JSON-LD จากอาร์เรย์เดียวกัน วนลูปอาร์เรย์เดิมเพื่อสร้าง itemListElement โดยตัด item ออกจากตัวสุดท้าย วิธีนี้รับประกันว่าโค้ดกับหน้าเว็บตรงกัน 100% ตลอดไป
ตัวอย่างตรรกะแบบย่อ:
function toBreadcrumbSchema(trail, origin) {
return {
"@context": "https://schema.org",
"@type": "BreadcrumbList",
itemListElement: trail.map((step, i) => {
const node = {
"@type": "ListItem",
position: i + 1,
name: step.name
};
if (i < trail.length - 1) node.item = origin + step.url;
return node;
})
};
}สังเกต position: i + 1 — นี่คือจุดที่คนพลาดบ่อยที่สุดเพราะอาร์เรย์เริ่มที่ 0 แต่ schema ต้องเริ่มที่ 1
ถ้าเว็บคุณเป็น SPA ที่เรนเดอร์ฝั่ง client ล้วน ๆ ต้องมั่นใจว่า JSON-LD ถูกใส่ตอนโหลดหน้าแรก ไม่ใช่ยัดเข้ามาทีหลังด้วย JavaScript หลังผู้ใช้โต้ตอบ เพราะบอตอาจไม่เห็น อ่านเรื่องนี้เพิ่มที่ JavaScript SEO
Breadcrumbs สำหรับเว็บหลายภาษา
นี่คือจุดที่เว็บโรงแรมและเว็บทัวร์ในภูเก็ต กระบี่ พังงา พลาดกันเยอะมาก
หลักการมีสองข้อ และต้องทำทั้งคู่:
ข้อ 1 — แปลป้ายข้อความ หน้าเวอร์ชันภาษาอังกฤษต้องแสดง Home › Rooms › Deluxe Sea View ไม่ใช่ หน้าแรก › ห้องพัก › Deluxe Sea View ทั้ง name ใน schema และข้อความบนหน้าเว็บต้องเป็นภาษาเดียวกับหน้านั้น
ข้อ 2 — ลิงก์ต้องชี้ไปยังหน้าในภาษาเดียวกัน ข้อนี้สำคัญกว่าและพลาดกันบ่อยกว่า ขั้น “Home” ในหน้าภาษาอังกฤษต้องชี้ไป /en/ ไม่ใช่ / ที่เป็นหน้าไทย ขั้น “Rooms” ต้องชี้ไป /en/rooms/ ไม่ใช่ /ห้องพัก/
ทำไมถึงสำคัญ? เพราะถ้าคุณลิงก์ข้ามภาษา คุณกำลังส่งสัญญาณให้ Google ว่าโครงสร้างภาษาอังกฤษเชื่อมกับหน้าไทย ทำให้ระบบ hreflang สับสน และผู้ใช้ต่างชาติที่กด Home แล้วเจอหน้าภาษาไทยจะออกจากเว็บทันที
เช็กลิสต์เว็บหลายภาษา:
- ทุกภาษามีชุด breadcrumb ของตัวเอง
- ป้ายข้อความแปลครบทุกขั้น รวมถึงชื่อหมวด
- ทุก URL ใน
itemอยู่ใน locale เดียวกับหน้านั้น - หน้าแรกของแต่ละภาษาชี้ไปที่ root ของภาษานั้น
- มี hreflang จับคู่หน้าเทียบเท่าครบทุกภาษา
- ไม่มีขั้นไหนที่ยังเป็นภาษาไทยหลงเหลือในเวอร์ชันอังกฤษ
เรื่อง hreflang และการวางโครงสร้างหลายภาษาให้ถูกตั้งแต่ต้น อ่านต่อที่ International SEO และ hreflang
ทดสอบและตรวจสอบ
ทำเสร็จแล้วต้องตรวจ อย่าเดา
Rich Results Test
เครื่องมือของ Google ที่ search.google.com/test/rich-results วาง URL หรือวางโค้ดตรง ๆ ก็ได้ สิ่งที่ต้องดู:
- ต้องขึ้นว่าตรวจพบ Breadcrumbs เป็นหนึ่งใน valid items
- เปิดดูรายละเอียดว่าจำนวนขั้นครบตามที่ตั้งใจ
- เช็กว่า
positionเรียง 1, 2, 3 ถูกต้อง - ถ้าเป็นเว็บที่ต้องล็อกอินหรือ staging ให้ใช้โหมด “Code” แทน “URL”
Schema Markup Validator
ที่ validator.schema.org ตัวนี้ตรวจความถูกต้องตาม spec ของ schema.org แบบเข้มกว่า ใช้จับ typo ในชื่อฟิลด์ได้ดี
Search Console
หลังจากปล่อยขึ้น production แล้ว ให้เข้า Google Search Console แล้วดูที่ Enhancements → Breadcrumbs รายงานนี้บอกว่ามีกี่หน้าที่ valid กี่หน้าที่มี error และ error คืออะไร
ข้อควรรู้: รายงานนี้ไม่ขึ้นทันที ต้องรอให้ Google คลานหน้าเหล่านั้นก่อน โดยทั่วไป 1-3 สัปดาห์สำหรับเว็บขนาดกลาง ถ้าอยากเร่ง ใช้ URL Inspection แล้วกด Request Indexing กับหน้าตัวอย่างสัก 3-5 หน้า
ตรวจด้วยตาเปล่า
เปิดหน้าเว็บ ดู view-source แล้วค้นคำว่า BreadcrumbList ควรเจอครั้งเดียว และข้อความใน name ต้องตรงกับที่ตาเห็นบนหน้าจอเป๊ะ ๆ
8 ข้อผิดพลาดที่พบบ่อยที่สุด
จากการ audit เว็บลูกค้า นี่คือรายการที่เจอซ้ำ ๆ เรียงตามความถี่
1. position เริ่มที่ 0 เกิดจากนักพัฒนาใช้ index ของอาร์เรย์ตรง ๆ Google จะมองว่า schema ไม่สมบูรณ์และไม่แสดงผล แก้ด้วยการ +1 เสมอ
2. ใส่หน้าปัจจุบันเป็นลิงก์ ทั้งบนหน้าเว็บและใน schema ขั้นสุดท้ายควรเป็นข้อความธรรมดา การลิงก์ไปหาตัวเองไม่มีประโยชน์ต่อผู้ใช้และทำให้ internal link รกโดยเปล่าประโยชน์
3. Schema ไม่ตรงกับที่แสดงจริง เช่น schema บอกว่ามี 4 ขั้น แต่หน้าเว็บแสดง 2 ขั้น หรือชื่อหมวดคนละชื่อ นี่ผิดแนวทาง structured data ของ Google ตรง ๆ และเป็นเหตุผลที่ทำให้เสียสิทธิ์ rich result ได้
4. Breadcrumb ไม่ตรงกับโครงสร้าง URL breadcrumb บอกว่า หน้าแรก › บริการ › SEO แต่ URL จริงคือ /seo-service/ ที่ไม่มีชั้น /services/ เลย ไม่ผิดกฎแต่สร้างความสับสน ทางที่ดีคือให้ URL กับ breadcrumb สะท้อนโครงสร้างเดียวกัน
5. ใช้ relative URL ใน item ต้องเป็น absolute URL เต็ม ๆ เสมอ "/blog/" ใช้ไม่ได้ ต้องเป็น "https://yourdomain.com/blog/"
6. มี BreadcrumbList ซ้ำหลายชุดโดยไม่ตั้งใจ มักเกิดจากธีมกับปลั๊กอินใส่ซ้อนกัน ตรวจง่าย ๆ ด้วยการค้นใน source code
7. ยัด keyword ในป้าย breadcrumb เห็นบ่อยมาก เช่น หน้าแรก › รับทำ SEO ราคาถูก อันดับ1 › ... ผู้ใช้อ่านแล้วรู้สึกแปลก และ Google ก็ไม่ได้ให้น้ำหนักเพิ่ม ใช้ชื่อหมวดตามจริงสั้น ๆ พอ
8. Breadcrumb ที่ลิงก์ไปหน้า 404 หรือหน้าที่ noindex เกิดขึ้นเมื่อลบหมวดหมู่ทิ้งแต่ลืมอัปเดต ตรวจด้วย crawler เป็นระยะ ถ้าเจอ 404 ให้จัดการตาม วิธีแก้ 404 Not Found
เช็กลิสต์ก่อนปล่อยขึ้นจริง
| ข้อ | สิ่งที่ต้องเช็ก | ผ่าน |
|---|---|---|
| 1 | เลือกประเภท breadcrumb ตรงกับชนิดเว็บ | ☐ |
| 2 | ทุกหน้าใน (ยกเว้นหน้าแรก) มี breadcrumb | ☐ |
| 3 | ขั้นสุดท้ายไม่ใช่ลิงก์ | ☐ |
| 4 | position เริ่มที่ 1 และเรียงต่อเนื่อง |
☐ |
| 5 | item เป็น absolute URL ทุกอัน |
☐ |
| 6 | ข้อความใน schema ตรงกับบนหน้าเว็บ | ☐ |
| 7 | มี BreadcrumbList ชุดเดียวต่อเส้นทาง | ☐ |
| 8 | ผ่าน Rich Results Test | ☐ |
| 9 | เว็บหลายภาษา: ป้ายแปลครบ + ลิงก์ตรง locale | ☐ |
| 10 | มี aria-label บนแท็ก nav |
☐ |
| 11 | แสดงผลดีบนมือถือ ไม่ล้นจอ | ☐ |
| 12 | ตรวจ Search Console หลังปล่อย 2-3 สัปดาห์ | ☐ |
คำถามที่พบบ่อย
หน้าแรกต้องมี breadcrumb ไหม? ไม่ต้อง เพราะไม่มีขั้นเหนือกว่าให้แสดง
Breadcrumb ควรอยู่ตรงไหน? ใต้เมนูหลัก เหนือ H1 ของหน้า เป็นตำแหน่งที่ผู้ใช้คุ้นเคยที่สุด อย่าเอาไปวางท้ายหน้า
ควรมีกี่ขั้น? 3-5 ขั้นกำลังดี ถ้าเกิน 5-6 ขั้นบ่อย ๆ แปลว่าโครงสร้างเว็บลึกเกินไป ควรกลับไปแก้ที่โครงสร้าง ไม่ใช่แก้ที่ breadcrumb
บนมือถือควรซ่อนไหม? ไม่ควรซ่อนทั้งหมด แต่ถ้าพื้นที่ไม่พอ ใช้วิธีย่อขั้นกลางเป็น … แล้วเก็บขั้นแรกกับขั้นสุดท้ายไว้ หรือให้เลื่อนแนวนอนได้ อย่าใช้ display: none เด็ดขาดเพราะเนื้อหาที่ซ่อนสนิทอาจถูกลดน้ำหนัก
ทำแล้ว Google จะแสดงใน SERP แน่นอนไหม? ไม่แน่นอน 100% Google ตัดสินใจเองว่าจะแสดงหรือไม่ในแต่ละ query สิ่งที่เราทำได้คือทำให้ถูกต้องเพื่อให้ “มีสิทธิ์” แสดง
Breadcrumb ช่วยอันดับโดยตรงไหม? ไม่ได้เป็น ranking factor โดยตรง แต่ช่วยผ่านทาง internal linking, การเข้าใจโครงสร้าง, CTR และพฤติกรรมผู้ใช้ — ซึ่งรวมกันแล้วมีผลจริง
ถ้าบทความหนึ่งอยู่หลายหมวด ควรเลือกอันไหน? เลือกหมวดหลักหมวดเดียวให้คงที่ ปลั๊กอิน SEO ส่วนใหญ่มีตัวเลือก “primary category” ให้ตั้งได้
สรุป: งานครึ่งวันที่คุ้มที่สุดในรายการ Technical SEO
Breadcrumbs คือแถบนำทางที่บอกตำแหน่งของหน้าปัจจุบันในโครงสร้างเว็บ ทำให้ผู้ใช้ที่มาจาก Google เข้าใจบริบททันที และเปิดทางให้เขาเดินต่อในเว็บแทนที่จะกดปิด
สิ่งที่ต้องจำถ้าจำได้แค่ 5 ข้อ:
- ใช้แบบ location-based เว้นแต่คุณทำ e-commerce ที่มีฟิลเตอร์เยอะจริง ๆ
- ใส่ BreadcrumbList schema แบบ JSON-LD ทุกหน้าใน
positionเริ่มที่ 1 และขั้นสุดท้ายไม่ต้องมีitem- สิ่งที่แสดงบนหน้าเว็บกับใน schema ต้องตรงกันเป๊ะ
- เว็บหลายภาษา — แปลป้ายและชี้ลิงก์ไปยัง locale เดียวกัน
สำหรับเว็บส่วนใหญ่ นี่คืองานครึ่งวันถึงหนึ่งวัน แต่ผลที่ได้อยู่กับเว็บไปตลอด และยิ่งเว็บมีหน้าเยอะ ผลก็ยิ่งทบต้น หลังทำเสร็จ แนะนำให้ไล่ เช็กลิสต์ Technical SEO ต่อเพื่อเก็บงานพื้นฐานอื่น ๆ ที่มักถูกมองข้ามพร้อมกัน
ที่ Southern Whale เราทำงาน Technical SEO ให้ธุรกิจในภาคใต้มาแล้วหลายสิบราย ตั้งแต่โรงแรมในภูเก็ตที่มี 4 ภาษา ไปจนถึงร้านค้าออนไลน์ในหาดใหญ่ที่มีสินค้าหลายพัน SKU — งานอย่าง breadcrumb, schema, และการวางโครงสร้างเว็บให้ Google เข้าใจ คือสิ่งที่เราจัดการให้จบตั้งแต่ต้น ไม่ต้องมานั่งแก้ทีหลัง ถ้าอยากให้เราตรวจเว็บของคุณและบอกตรง ๆ ว่าควรแก้อะไรก่อน ดูรายละเอียดบริการ SEO ของเรา หรือทักมาคุยกันได้เลย ปรึกษาครั้งแรกไม่มีค่าใช้จ่าย