หลายคนเห็นแถบข้อความเล็ก ๆ แบบ "หน้าแรก > บริการ > รับทำ SEO" อยู่ใต้เมนูของเว็บไซต์จนชินตา แต่ไม่เคยคิดว่ามันมีผลอะไรกับ SEO มากกว่าการบอกตำแหน่งให้คนอ่าน สิ่งนี้เรียกว่า Breadcrumb หรือเส้นทางนำทาง (Breadcrumb Navigation) ซึ่งทำหน้าที่สองอย่างพร้อมกันคือบอกมนุษย์ว่ากำลังอยู่ตรงไหนของเว็บ และบอก Google ว่าหน้านี้อยู่ในหมวดไหน เชื่อมกับหน้าไหนบ้างตามลำดับชั้น
ปัญหาคือเว็บจำนวนมากใส่ breadcrumb แบบมองข้ามรายละเอียด เช่น ใส่แต่ตัวที่มองเห็นโดยไม่มี schema กำกับ หรือใส่ schema แต่ข้อมูลไม่ตรงกับสิ่งที่แสดงจริงบนหน้าจอ ทำให้พลาดโอกาสได้ rich snippet ใน SERP และเสียแรงส่งจาก internal link ที่ควรจะได้ บทความนี้จะไล่ตั้งแต่นิยาม ประเภท ผลต่อ SEO วิธีใส่ BreadcrumbList schema ให้ถูกตามที่ Google อ่านได้ ไปจนถึงข้อผิดพลาดที่เจอบ่อยที่สุดในเว็บไทย
Breadcrumb คืออะไร ต่างจากเมนูหลักยังไง
Breadcrumb คือแถบลิงก์สั้น ๆ ที่แสดงลำดับชั้นของหน้าปัจจุบันเทียบกับหน้าแรก เช่น หน้าแรก > บล็อก > ชื่อบทความ โดยแต่ละคำในแถบนี้เป็นลิงก์กลับไปยังหน้าแม่ในลำดับนั้น ๆ ได้จริง ไม่ใช่แค่ข้อความตกแต่ง ชื่อ Breadcrumb มาจากนิทานเด็กที่โรยเศษขนมปังไว้ตามทางเพื่อเดินย้อนกลับได้ ซึ่งอธิบายหน้าที่ของมันได้ตรงที่สุด
จุดที่ต่างจากเมนูหลักคือเมนูบอก ทางเลือกทั้งหมดที่ไปได้จากตำแหน่งปัจจุบัน ส่วน breadcrumb บอกแค่ เส้นทางที่พามาถึงหน้านี้ เท่านั้น เมนูจึงเปลี่ยนหน้าตาตามการออกแบบเว็บ แต่ breadcrumb จะเปลี่ยนเนื้อหาตามตำแหน่งของหน้าที่กำลังเปิดอยู่เสมอ และมักวางอยู่เหนือหัวข้อหลักของหน้า ใต้เมนูบนสุด
สำหรับเว็บที่มีหลายหมวดหมู่ซ้อนกันหลายชั้น เช่น เว็บอีคอมเมิร์ซหรือบล็อกที่แบ่งหมวดละเอียด breadcrumb คือกลไกที่ทำให้คนไม่หลงทาง และเป็นหนึ่งในสัญญาณที่ยืนยันว่าเว็บมีโครงสร้างที่วางแผนมาอย่างดี ไม่ใช่กองหน้าที่เชื่อมกันมั่ว ๆ
Breadcrumb มีกี่แบบ เลือกใช้แบบไหนให้เหมาะกับเว็บ
Breadcrumb แบ่งหลัก ๆ ได้ 3 แบบตามที่มาของเส้นทาง คือแบบอิงตำแหน่งในโครงสร้าง แบบอิงคุณสมบัติของสินค้า และแบบอิงประวัติการคลิกของผู้ใช้แต่ละคน เว็บส่วนใหญ่ไม่จำเป็นต้องเลือกแบบเดียว บางเว็บใช้สองแบบผสมกันตามชนิดของหน้า
ตารางด้านล่างเทียบทั้งสามแบบให้เห็นวิธีทำงานและข้อควรระวังของแต่ละแบบ สำหรับเว็บบริการหรือบล็อกทั่วไปแบบ Location-based คือตัวเลือกที่เหมาะและใช้ง่ายที่สุด
| ประเภท | วิธีทำงาน | ข้อดี | ข้อควรระวัง |
|---|---|---|---|
| Location-based (อิงตำแหน่งในโครงสร้าง) | แสดงเส้นทางตามหมวดหมู่ที่หน้านั้นสังกัดอยู่ในผังเว็บ ไม่ว่าจะคลิกเข้ามาทางไหน | แสดงผลเหมือนกันทุกครั้ง เข้าใจง่าย ตรงกับ URL structure และ sitemap | ต้องผูกกับโครงสร้างหมวดหมู่จริง ถ้าหน้าไม่มีหมวดชัดเจนจะกำหนดเส้นทางลำบาก |
| Attribute-based (อิงคุณสมบัติสินค้า) | ใช้กับหน้าสินค้าอีคอมเมิร์ซ แสดงเส้นทางตามคุณสมบัติ เช่น ยี่ห้อ > ประเภท > รุ่น | ยืดหยุ่นกับสินค้าที่จัดหมวดได้หลายมิติ ช่วยผู้ใช้กรองต่อได้ง่าย | สินค้าชิ้นเดียวอาจมีหลายเส้นทางที่ถูกต้องพร้อมกัน ต้องเลือกเส้นทางหลักให้ชัดเจน |
| Path-based / History-based (อิงประวัติการคลิก) | แสดงเส้นทางตามที่ผู้ใช้แต่ละคนคลิกผ่านมาจริง เปลี่ยนไปตามพฤติกรรมแต่ละคน | ตรงกับพฤติกรรมจริงของผู้ใช้คนนั้น เหมาะกับเว็บแอปที่มีการค้นหาซับซ้อน | ไม่คงที่ ไม่เหมาะทำ schema ให้ Google อ่าน และสร้างความสับสนถ้าคนละคนเห็นคนละเส้นทาง |
Breadcrumb ช่วย SEO ยังไงบ้าง
Breadcrumb ช่วย SEO ผ่านสามช่องทางหลักคือ ส่งสัญญาณโครงสร้างเว็บให้ Google ชัดขึ้น สร้าง internal link เพิ่มแบบมีบริบท และเพิ่มโอกาสได้ rich snippet ในหน้าผลการค้นหาซึ่งช่วยดึงคนคลิกได้มากขึ้น
ในมุมโครงสร้าง breadcrumb ทำหน้าที่เป็น internal link ที่เกิดขึ้นอัตโนมัติทุกหน้า ไม่ต้องรอให้คนเขียนบทความไปแปะลิงก์เอง ทุกหน้าที่มี breadcrumb จะมีลิงก์กลับไปหน้าหมวดและหน้าแรกเสมอ ซึ่งช่วยลดโอกาสเกิดหน้าที่ไม่มีเส้นทางเชื่อมโยงในเว็บเลย เรื่องนี้เกี่ยวโยงตรงกับปัญหาหน้ากำพร้าที่ไม่มี internal link ชี้มา เพราะ breadcrumb คือหนึ่งในกลไกป้องกันไม่ให้หน้าลึก ๆ หลุดออกจากโครงสร้างไปโดยไม่รู้ตัว
ในหน้าผลการค้นหา ถ้า Google ตรวจสอบแล้วว่าข้อมูล breadcrumb ที่ใส่ไว้ถูกต้องและตรงกับหน้าจริง อาจนำไปแสดงแทน URL เต็มในผลค้นหา เช่นแสดงเป็น "seono1.co.th > บล็อก > breadcrumb คืออะไร" แทนที่จะโชว์ URL ยาว ๆ ช่วยให้ผู้ใช้เข้าใจตำแหน่งของหน้านั้นในเว็บก่อนคลิกด้วยซ้ำ ซึ่งเป็นปัจจัยเสริม CTR ที่หลายเว็บมองข้าม
BreadcrumbList Schema คืออะไร ใส่ยังไงให้ถูก
BreadcrumbList Schema คือโครงสร้างข้อมูลรูปแบบ JSON-LD ที่บอก Google อย่างชัดเจนว่าลำดับเส้นทางของหน้านี้คืออะไร แยกออกจากแถบ breadcrumb ที่มองเห็นบนหน้าเว็บ แต่ต้องสื่อความหมายตรงกันเป๊ะ การมีแถบ breadcrumb ให้คนเห็นอย่างเดียวโดยไม่มี schema กำกับ Google ก็ยังพอเข้าใจโครงสร้างได้บ้างจากลิงก์ แต่จะไม่มีสิทธิ์ขึ้น rich snippet ในผลการค้นหา
schema ต้องตรงกับสิ่งที่แสดงจริงบนหน้าเว็บเป๊ะ ไม่ใช่แค่มีให้ครบ รูปแบบ JSON-LD มาตรฐานที่ Google รองรับใช้ type `BreadcrumbList` ประกอบด้วยรายการ `itemListElement` แต่ละชิ้นระบุ `position`, `name` และ `item` ซึ่งเป็น URL ของหน้าในลำดับนั้น เรียงจากหน้าแรกไปจนถึงหน้าปัจจุบัน โดยหน้าสุดท้ายอาจไม่ต้องใส่ URL ก็ได้เพราะเป็นหน้าที่กำลังแสดงอยู่แล้ว
กฎสำคัญที่สุด: schema ต้องตรงกับสิ่งที่ผู้ใช้เห็นจริง
Google ระบุชัดเจนว่า breadcrumb ใน schema ต้องสะท้อนเส้นทางที่แสดงจริงบนหน้าเว็บ ห้ามใส่ schema เพื่อยัดคีย์เวิร์ดหรือสร้างเส้นทางที่ไม่มีอยู่จริงเพื่อหวังผลอันดับ เพราะถือเป็นการทำ structured data ที่บิดเบือน (misleading markup) ซึ่งอาจทำให้หน้านั้นถูกตัดสิทธิ์แสดง rich result ไปเลย
วิธีตรวจง่าย ๆ คือเปิดหน้าเว็บจริง อ่านแถบ breadcrumb ที่มองเห็น แล้วเทียบกับค่าที่อยู่ใน `itemListElement` ทีละตำแหน่ง ชื่อ ลำดับ และจำนวนขั้นต้องตรงกันทุกจุด ถ้าหน้าจอแสดง 3 ระดับ schema ก็ต้องมี 3 ระดับเช่นกัน
วางตำแหน่ง Breadcrumb ตรงไหนถึงจะถูกหลัก UX และ SEO
ตำแหน่งที่ถูกต้องคือวางไว้เหนือหัวข้อหลัก (H1) ของหน้า ใต้เมนูนำทางบนสุด เพราะเป็นจุดที่สายตาผู้ใช้ไล่ผ่านก่อนเริ่มอ่านเนื้อหา และตรงกับที่ Google คาดหวังในการตีความโครงสร้างหน้า
ข้อควรระวังคือไม่ควรวาง breadcrumb ไว้ท้ายหน้าหรือซ่อนในเมนูแฮมเบอร์เกอร์บนมือถือ เพราะแม้จะยังมีลิงก์อยู่ในโค้ด แต่ทำให้ผู้ใช้จริงแทบไม่เห็นและไม่ได้ใช้ประโยชน์จากมันเลย ซึ่งขัดกับเจตนาของ breadcrumb ที่ควรช่วยให้คนตัดสินใจเดินทางต่อได้ทันทีที่เข้าหน้า
อีกจุดที่มักถูกมองข้ามคือความสม่ำเสมอ breadcrumb ควรมีหน้าตาและตำแหน่งเดียวกันทุกหน้าทั่วทั้งเว็บ ไม่ใช่มีในหน้าบทความแต่หายไปในหน้าบริการ เพราะความไม่สม่ำเสมอแบบนี้ทำให้ผู้ใช้และบอทตีความโครงสร้างเว็บไม่ตรงกันในแต่ละส่วน
ข้อผิดพลาดที่พบบ่อยเวลาทำ Breadcrumb
ข้อผิดพลาดส่วนใหญ่ไม่ได้เกิดจากไม่รู้ว่าต้องมี breadcrumb แต่เกิดจากรายละเอียดเล็ก ๆ ที่ปล่อยผ่านตอนพัฒนาเว็บ ด้านล่างคือรายการที่เจอซ้ำ ๆ เวลาตรวจ technical SEO ของเว็บไทย
- Schema กับหน้าจอไม่ตรงกัน เช่น เปลี่ยนชื่อหมวดหมู่บนหน้าเว็บแล้วลืมอัปเดตค่าใน JSON-LD ทำให้สองฝั่งไม่ตรงกัน
- ลิงก์ในแถบ breadcrumb ชี้ไปหน้าที่ลบไปแล้วหรือเปลี่ยน URL แล้ว กลายเป็นลิงก์เสียที่ไม่มีใครสังเกต
- ใส่ breadcrumb ซ้ำสองชุดในหน้าเดียว เช่น ทั้งจากธีมเว็บและจากปลั๊กอิน SEO พร้อมกัน ทำให้ schema ซ้อนกันและ Google อาจไม่เลือกใช้ชุดไหนเลย
- ทำ breadcrumb บนหน้าแรกด้วย ทั้งที่หน้าแรกไม่มีหน้าแม่ให้ย้อนกลับ กลายเป็นเส้นทางที่วนซ้ำตัวเองไม่มีความหมาย
- ใช้ชื่อในแถบ breadcrumb ที่ต่างจาก H1 หรือชื่อเมนูของหน้านั้นโดยไม่มีเหตุผล ทำให้ผู้ใช้สับสนว่ากำลังอยู่หน้าเดียวกันหรือเปล่า
ทำ Breadcrumb บน WordPress กับ Next.js ต่างกันยังไง
บน WordPress ปลั๊กอิน SEO ส่วนใหญ่อย่าง Yoast หรือ Rank Math มีฟีเจอร์สร้าง breadcrumb พร้อม schema ให้อัตโนมัติ งานหลักของคนดูแลเว็บคือเปิดใช้ฟีเจอร์นี้ วางโค้ดแสดงผลในตำแหน่งที่ถูกต้องของธีม แล้วตรวจว่าไม่มีระบบอื่นสร้าง breadcrumb ซ้ำซ้อนกันเอง
ส่วนเว็บที่พัฒนาเองด้วย framework อย่าง Next.js ต้องเขียนคอมโพเนนต์ breadcrumb เองโดยดึงลำดับหมวดหมู่จากโครงสร้างเส้นทาง (route) ของแอปมาแสดงผล แล้วสร้าง `BreadcrumbList` schema คู่กันด้วยโค้ดชุดเดียวกัน เพื่อการันตีว่าทั้งสองฝั่งจะไม่มีวันไม่ตรงกัน วิธีนี้ทำงานยากกว่าตอนตั้งค่าครั้งแรก แต่ลดความเสี่ยงเรื่อง schema เพี้ยนได้มากกว่าการแก้สองจุดแยกกันแบบ WordPress
ไม่ว่าจะใช้แพลตฟอร์มไหน หลักการตรวจสอบก่อนปล่อยขึ้นเว็บเหมือนกันคือดูว่า breadcrumb เชื่อมกับการวางลิงก์ภายในของทั้งเว็บ อย่างสมเหตุสมผล และผ่านเกณฑ์พื้นฐานตามหลักการตรวจ Technical SEO ก่อนถือว่าใช้งานได้จริง
คำถามที่พบบ่อย
01Breadcrumb จำเป็นสำหรับทุกเว็บไหม+
เว็บที่มีมากกว่า 1 ระดับหมวดหมู่ เช่น บล็อกที่แบ่งหมวด หรือเว็บอีคอมเมิร์ซ ควรมี breadcrumb เสมอ ส่วนเว็บหน้าเดียวหรือเว็บที่มีแค่หน้าแรกกับไม่กี่หน้าย่อยแบบไม่ซ้อนหมวดหมู่ อาจไม่จำเป็นเท่าเว็บที่มีโครงสร้างลึกหลายชั้น
02ไม่ใส่ BreadcrumbList schema แต่มีแถบ breadcrumb ให้คนเห็น จะเสีย SEO ไหม+
ไม่ได้ทำให้เสียคะแนนโดยตรง เพราะ Google ยังอ่านลิงก์ในแถบนั้นเป็น internal link ปกติได้ แต่จะพลาดโอกาสได้ rich snippet แสดงเส้นทางในหน้าผลการค้นหา ซึ่งช่วยเรื่อง CTR ทางอ้อม การใส่ schema ควบคู่ไปด้วยจึงคุ้มค่ากว่าเสมอ
03Breadcrumb ควรมีกี่ระดับถึงจะพอดี+
ไม่มีตัวเลขตายตัว แต่ส่วนใหญ่ 2-4 ระดับกำลังพอดี เช่น หน้าแรก > หมวดหมู่ > หน้าปัจจุบัน ถ้าโครงสร้างเว็บลึกเกิน 4-5 ชั้นจริง ๆ ควรกลับไปพิจารณาการจัดหมวดหมู่ใหม่ด้วย เพราะโครงสร้างที่ลึกเกินไปมักเป็นปัญหาการวางผังเว็บมากกว่าปัญหาของ breadcrumb เอง
04หน้าแรกควรมี Breadcrumb ไหม+
ไม่จำเป็น เพราะหน้าแรกเป็นจุดเริ่มต้นของทุกเส้นทางอยู่แล้ว ไม่มีหน้าแม่ให้ย้อนกลับไปอีก การใส่ breadcrumb บนหน้าแรกที่ชี้กลับมาหาตัวเองจึงไม่มีประโยชน์และอาจทำให้ schema ดูแปลก
05Breadcrumb กับ Sitelinks ที่ Google แสดงใต้ผลค้นหาต่างกันยังไง+
Breadcrumb ที่แสดงในผลค้นหาคือเส้นทางของหน้าเดียวที่กำลังแสดงผล ส่วน Sitelinks คือลิงก์ไปหลายหน้าย่อยที่ Google เลือกแสดงเพิ่มใต้ผลลัพธ์หลักของเว็บ ทั้งสองมาจากการวิเคราะห์โครงสร้างเว็บเหมือนกัน แต่ทำหน้าที่ต่างกัน และ Sitelinks ไม่สามารถกำหนดเองผ่าน schema ได้โดยตรงเหมือน breadcrumb