Breadcrumb คืออะไร? ทำความรู้จักฟังก์ชันเล็ก ๆ ที่ช่วยให้เว็บไซต์ใช้งานง่ายขึ้น!

Breadcrumb (เบรดครัมบ์) คือ เส้นทางนำทาง หรือ ระบบแสดงตำแหน่งของหน้าเว็บ ที่ปรากฏอยู่บนหน้าเว็บไซต์ของเรา ช่วยให้ผู้ใช้งานรู้ว่าตอนนี้กำลังอยู่ตรงไหนของโครงสร้างเว็บไซต์ โดยไล่จากหน้าหลัก (Homepage) ไปจนถึงหน้าปัจจุบันที่เรากำลังดูอยู่ ณ ตอนนี้ และสามารถย้อนกลับไปหน้าก่อนหน้าได้ง่าย ๆ

เปรียบเหมือนกับการที่เราเดินเข้าไปในป่าแล้วโรยขนมปังไว้เป็นทางเดิน (อย่างกับในนิทานหนูน้อยหมวกแดง หรือ Hansel and Gretel นั่นแหละค่ะ) เพื่อให้เราสามารถย้อนกลับมาทางเดิมได้นั่นเอง 

ลองนึกภาพว่าเรากำลังเข้าเว็บไซต์ช้อปปิ้งออนไลน์ เราอาจจะเริ่มต้นที่หน้าแรก จากนั้นก็คลิกเข้าไปที่ “เสื้อผ้าแฟชั่นผู้หญิง” แล้วก็เลือก “เดรส” แล้วก็ไปที่ “เดรสสั้นเหนือเข่า” ต่อ หน้า Breadcrumb ก็จะแสดงออกมาประมาณนี้ค่ะ

หน้าแรก > เสื้อผ้าแฟชั่นผู้หญิง > เดรส > เดรสสั้นเหนือเข่า

เห็นไหมคะว่ามันช่วยให้เราเข้าใจได้ทันทีว่าตอนนี้เราอยู่ตรงไหนของเว็บไซต์ และถ้าหากเราอยากกลับไปดู “เดรส” ทั้งหมด เราก็แค่คลิกที่คำว่า “เดรส” ใน Breadcrumb ได้เลย ไม่ต้องไปกดปุ่มย้อนกลับหลาย ๆ ครั้งให้เสียเวลา

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

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

Breadcrumb ช่วยให้ผู้ใช้งานสามารถนำทางกลับไปยังหมวดหมู่ย่อยหรือหมวดหมู่หลักได้อย่างรวดเร็ว ไม่ต้องเสียเวลาคลิกปุ่ม “ย้อนกลับ” หลาย ๆ ครั้ง โดยเฉพาะในเว็บไซต์ที่มีหลายระดับชั้นของเนื้อหา อย่างเช่น เว็บไซต์ข่าว เว็บไซต์ E-commerce หรือเว็บไซต์ที่มีสินค้าและบริการจำนวนมาก

เมื่อผู้ใช้งานรู้สึกว่าเว็บไซต์ของเราใช้งานง่าย ไม่ต้องคลำหาทางไปเอง โอกาสที่ผู้ใช้งานจะออกจากเว็บไซต์ไปอย่างรวดเร็ว (Bounce Rate) ก็จะลดลงค่ะ และจะใช้เวลาอยู่บนเว็บไซต์ของเรานานขึ้น ดูเนื้อหาอื่น ๆ มากขึ้น ซึ่งเป็นสัญญาณที่ดีสำหรับเว็บไซต์ของเรา!

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

และบางครั้ง Google อาจจะแสดง Breadcrumb ในผลการค้นหาด้วย ซึ่งจะทำให้ Snippet ของเราดูน่าสนใจและช่วยเพิ่มอัตราการคลิก (Click-Through Rate – CTR) ได้อีกด้วยนะคะ

ตัวอย่างในผลการค้นหาของ Google 

[ชื่อเว็บไซต์] > หมวดหมู่หลัก > หมวดหมู่ย่อย > ชื่อหน้าปัจจุบัน

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

“Breadcrumb แม้จะเป็นเพียงองค์ประกอบเล็ก ๆ บนหน้าเว็บไซต์ แต่ก็มีบทบาทสำคัญอย่างยิ่งในการช่วยให้ผู้ใช้งานท่องเว็บไซต์ได้อย่างราบรื่น ไม่หลงทาง และเข้าใจโครงสร้างของเว็บไซต์ได้ดีขึ้น” – อภิเดช กระแสสินธ์ (คุณเต้) SEO & Analytics Expert บริษัท SGE ADVERTISING

หลัก ๆ แล้ว Breadcrumb ที่เราเห็นกันบ่อย ๆ จะมีอยู่ 3 ประเภท ดังนี้ค่ะ

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

หน้าแรก > หมวดหมู่หลัก > หมวดหมู่ย่อย > หน้าปัจจุบัน

เหมาะสำหรับเว็บไซต์ที่มีโครงสร้างแบบลำดับชั้นที่ชัดเจนค่ะ

Breadcrumb ประเภทนี้จะบอกเราว่าเราเข้ามาถึงหน้านี้ได้อย่างไร โดยอิงจากคุณสมบัติหรือการกรองที่เราเลือกค่ะ อย่างเช่น ในเว็บไซต์ E-commerce เมื่อเราค้นหาสินค้าแล้วทำการกรองตามราคา, สี, หรือขนาด Breadcrumb อาจจะแสดงผลดังนี้

หน้าแรก > เสื้อผ้าแฟชั่นผู้หญิง > เดรส > ชุดเดรสยาว > หน้าสินค้าปัจจุบัน

ประเภทนี้มักใช้ในเว็บไซต์ E-commerce ที่มีการกรองสินค้าเยอะ ๆ นั่นเองค่ะ

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

หน้าแรก > หน้าที่ 1 > หน้าที่ 2 > หน้าที่ 3 > หน้าปัจจุบัน

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

จริง ๆ แล้ว Breadcrumb ไม่จำเป็นต้องมีในทุก ๆ เว็บไซต์ก็ได้นะคะ แต่โดยทั่วไปแล้วเว็บไซต์ที่ควรมี Breadcrumb มีดังนี้

• เว็บไซต์ E-commerce ชัดเจนเลยค่ะทุกคน เพราะว่ามีสินค้าและหมวดหมู่เยอะแยะมากมาย
• เว็บไซต์ข่าว/บล็อก เพราะเป็นเว็บที่มีการจัดหมวดหมู่ข่าวสาร หรือบทความ
• เว็บไซต์ที่มีโครงสร้างลึก มีหลายระดับชั้นของหน้าเว็บ
• เว็บไซต์ที่มีข้อมูลเยอะ เช่น เว็บไซต์หน่วยงานราชการ หรือห้องสมุดออนไลน์ค่ะ

ถ้าเว็บไซต์ของเรามีเพียงไม่กี่หน้า หรือเป็นเว็บไซต์ One Page ดังนั้น Breadcrumb ก็อาจจะไม่จำเป็นเท่าไหร่ก็ได้ค่ะ

แม้ว่า Breadcrumb จะมีประโยชน์มากมาย แต่ก็มีข้อควรระวังเล็กน้อยค่ะ จะมีอะไรบ้างไปดูกันเลย

• อย่าใช้แทน Navigation Bar หลัก Breadcrumb คือตัวช่วยนำทาง ไม่ใช่แถบเมนูหลักของเว็บไซต์ค่ะ
• ตำแหน่งต้องชัดเจน ควรวาง Breadcrumb ไว้ที่ตำแหน่งที่เห็นได้ชัดเจน มักจะอยู่ใต้ Navigation Bar หรืออยู่เหนือ Title ของหน้าเว็บ
• ใช้คั่นด้วยสัญลักษณ์ที่เข้าใจง่าย โดยทั่วไปนิยมใช้ > หรือ / เป็นตัวคั่นค่ะ
• ลิงก์ต้องคลิกได้ แต่ละส่วนใน Breadcrumb ควรจะเป็นลิงก์ที่คลิกได้ ยกเว้นส่วนสุดท้ายที่เป็นหน้าปัจจุบันค่ะ
• อย่าให้ยาวเกินไป ถ้า Breadcrumb ยาวเกินไป อาจจะดูรกตาและไม่สวยงามได้ค่ะ

ไปดูกันเลยค่ะว่าคนทำเว็บไซต์ เค้าสร้าง Breadcrumb ให้กับเว็บของตัวเองได้ยังไง 

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

การจะสร้าง Breadcrumb ให้แสดงบนเว็บนั้น เราต้องใช้โค้ด 2 หลัก ๆ ดังนี้ค่ะ

• HTML (โครงสร้าง) เป็นเหมือนโครงที่บอกว่า Breadcrumb ของเราจะมีข้อความอะไรบ้าง และแต่ละอันจะลิงก์ไปที่ไหน
• CSS (ตกแต่ง) เป็นเหมือนเสื้อผ้าที่ทำให้ Breadcrumb ของเราดูสวยงาม อ่านง่าย เช่น กำหนดสี ขนาดตัวอักษร หรือสัญลักษณ์คั่นต่าง ๆ

จากโค้ดนี้ เราก็จะเห็นเป็น หน้าแรก > สินค้าทั้งหมด > รองเท้าแฟชั่น บนหน้าเว็บนั่นเองค่ะ จากนั้นก็ใช้ CSS ตกแต่งเพิ่มเติมตามต้องการ เช่น สี ขนาด หรือรูปแบบตัวอักษร ให้สวยงามตามสไตล์เว็บของเรา

ส่วนนี้สำคัญมาก ๆ สำหรับคนอยากให้เว็บติด Google เลยล่ะค่ะ! การใช้ Schema Markup (หรือที่เรียกว่า Structured Data) คือการใส่ “คำอธิบายพิเศษ” ลงไปในโค้ด Breadcrumb ของเรา เพื่อให้ Google และ Search Engine อื่น ๆ เข้าใจโครงสร้างของ Breadcrumb เราได้ดียิ่งขึ้นไปอีก

Google ก็จะรู้ว่าลิงก์ต่าง ๆ ใน Breadcrumb ของเรามีความสัมพันธ์กันยังไง และบางที Google ก็จะเอา Breadcrumb ของเราไปแสดงบน SERP หรือผลการค้นหาด้วยค่ะ ทำให้ Snippet ของเว็บเราดูน่าสนใจและน่าคลิกมากขึ้น!

ตัวอย่าง Schema Markup

เราก็จะเห็นเป็น หน้าแรก > สินค้าทั้งหมด > รองเท้าแฟชั่น การใส่โค้ดนี้จะช่วยบอก Google ว่า “นี่คือ Breadcrumb นะ และแต่ละส่วนมันคืออะไร” ทำให้เว็บเราดูเป็นมิตรกับ Search Engine มากขึ้นไปอีกค่ะ

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

ถ้าเจอจุดไหนที่ไม่โอเค ก็กลับไปแก้ไขปรับปรุงให้ดีขึ้นเรื่อย ๆ การทดลองใช้งานจริงจะช่วยให้เราเห็นปัญหาและทำให้ Breadcrumb ของเราสมบูรณ์แบบที่สุดนั่นเองค่ะ

สรุปง่าย ๆ คือ การทำ Breadcrumb ก็คือการ วางแผนดีๆ > เขียนโค้ดให้มันแสดง > บอก Google ให้เข้าใจ > แล้วก็ทดสอบและปรับแก้ให้มันเป๊ะ! แค่นี้เว็บของเราก็น่าใช้งานขึ้นเยอะแล้วล่ะค่ะ! และนี่ก็เป็นหนึ่งในการทำ SEO On-Page ปรับปรุงเว็บไซต์ของเราให้ดีขึ้นนั่นเองค่ะ

หวังว่าบทความนี้จะทำให้ทุกคนเข้าใจว่า Breadcrumb คืออะไร และทำไมมันถึงสำคัญนะคะ ถ้าคุณผู้อ่านมีเว็บไซต์เป็นของตัวเอง ลองนำไปปรับใช้ดูนะคะ เพราะการลงทุนกับการทำ Breadcrumb ไม่ใช่แค่การอำนวยความสะดวกให้ผู้ใช้งานเท่านั้น แต่ยังเป็นการลงทุนเพื่อ ประสบการณ์ผู้ใช้งานที่ดี (User Experience) และ SEO ที่แข็งแกร่ง ซึ่งจะส่งผลดีต่อเว็บไซต์ของเราในระยะยาวอย่างแน่นอน

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