Breadcrumbs: คืออะไรและวิธีนำไปใช้

Breadcrumbs คืออะไร

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

วิธีนำ breadcrumbs ไปใช้

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

มองเห็นได้

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

Home > Computers > HP > Envy ด้วยวิธีนี้ เรากำลังบอกผู้ใช้ว่าสินค้าที่กำลังดูตกอยู่ในหมวดคอมพิวเตอร์และยังสังกัดตระกูลคอมพิวเตอร์ HP ในแง่ของการนำทาง ฟีเจอร์นี้สำคัญมากเพราะหากผู้ใช้ต้องการดูโมเดล HP เพิ่มเติมหรือเรียกดูคอมพิวเตอร์ต่อ จะอยู่ห่างคลิกเดียว

ปราศจากฟีเจอร์นี้ การนำทางจะยากกว่ามากและโอกาสที่ผู้ใช้จะออกจากเว็บไซต์สูงกว่ามาก

โค้ด

ในขณะที่ตัวเลือกก่อนหน้าให้เราเพิ่ม breadcrumbs สำหรับผู้ใช้ ตัวเลือกนี้จะบอกเสิร์ชเอนจินว่าคอนเทนต์ของเราถูกจัดหมวดหมู่อย่างไร สำคัญมากที่การใช้งานนี้ต้องทำถูกต้องเพราะ Google ไม่เข้าใจ breadcrumbs ที่มองเห็นได้เท่านั้น

ด้านล่าง คุณสามารถเห็น ตัวอย่างการใช้งาน Breadcrumbs โดยใช้ส่วนสคริปต์ JSON-LD

<script type="application/ld+json"> { "@context": "https://schema.org", "@type": "BreadcrumbList", "itemListElement": [{ "@type": "ListItem", "position": 1, "name": "Books", "item": "https://example.com/books" },{ "@type": "ListItem", "position": 2, "name": "Authors", "item": "https://example.com/books/authors" },{ "@type": "ListItem", "position": 3, "name": "Ann Leckie", "item": "https://example.com/books/authors/annleckie" },{ "@type": "ListItem", "position": 4, "name": "Ancillary Justice", "item": "https://example.com/books/authors/ancillaryjustice" }] } </script> โค้ดข้างต้นบอกเราว่าหนังสือ "Ancillary Justice" เขียนโดยผู้แต่ง Ann Leckie และเป็นหนังสือ

Books > Authors > Ann Leckie > Ancillary Justice

หากเราสร้างเว็บไซต์ด้วยการพัฒนาแบบกำหนดเองหรือภาษาหลักบางภาษา เราจะต้องดำเนินการใช้งานด้วยมือ อย่างไรก็ตาม หากเราใช้ Wordpress เรามีปลั๊กอินหลายตัวที่จะช่วยเรากับการใช้งานนี้

• ›Rank Math
• ›Yoast SEO

ตรวจสอบการใช้งาน

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

แม้กระนั้น เรามีเครื่องมือ Google และส่วนขยาย Chrome ที่จะทำให้ชีวิตของเราง่ายขึ้นมาก

เครื่องมือ Google Structured Data

ใช้ เครื่องมือ Google เราสามารถตรวจสอบ structured data ของเราผ่าน URL หรือในระดับโค้ดหากเราป้อนส่วนโดยตรง

เครื่องมือ Google Structured Data

หากเราป้อน URL Google จะคืนการวิเคราะห์ด้วย structured data ทั้งหมดที่ตรวจพบ

ตัวอย่างการวิเคราะห์ URL ในเครื่องมือ structured data ของ Google

หากในทางกลับกัน เราต้องการทดสอบโค้ด JSON-LD Breadcrumb ก่อนนำไปใช้ เราสามารถใช้เครื่องมือ "code fragment" ซึ่งจะให้ผลลัพธ์ต่อไปนี้

เครื่องมือตรวจสอบส่วนโค้ดสำหรับ structured data

Structured Data Testing Tool (ส่วนขยาย Google Chrome)

หากแทนที่จะเข้าชมเครื่องมือ Google เราต้องการตรวจสอบ structured data Breadcrumb (และอื่น ๆ) โดยตรงจากเบราว์เซอร์ เราสามารถใช้ส่วนขยาย "Structured Data Testing Tool" ซึ่งจะแสดง structured data ที่ตรวจพบทั้งหมดและข้อผิดพลาดใด ๆ

ส่วนขยาย Chrome เพื่อตรวจสอบ Structured Data ด้วยตัวอย่างบทความ SEO Alive

ติดตาม breadcrumbs ใน Google Search Console

ท้ายสุด เมื่อเราทำการใช้งานและตรวจสอบเสร็จ ที่เหลือคือการติดตามกิจกรรมใน Google Search Console ซึ่งจะให้เราติดตามรายวันและตรวจพบความผิดปกติใด ๆ

การแสดงรายงาน breadcrumbs ใน Search Console (เปิดตัวเดือนกันยายน 2019)

เพื่อสรุป เราต้องการถามคุณ อะไรคือข้อผิดพลาดที่พบบ่อยที่สุดที่คุณพบเมื่อนำไปใช้

เราต้องการรวบรวมและเผยแพร่ในบทความนี้เพื่อช่วยผู้เชี่ยวชาญ SEO อื่น ๆ

ขอบคุณมากและอย่าลืมแชร์ความคิดเห็นของคุณ

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

• ›เอกสาร Google เรื่อง Breadcrumbs