Breadcrumbs: מה הם ואיך ליישם אותם

מה הם Breadcrumbs?

Breadcrumbs הם תכונה שמטרתה לשפר את ניווט המשתמש ולציין באופן ברור, הן למנועי חיפוש והן למשתמשים, את ההיררכיה של הדפים. בדרך זו, המשתמש יכול לבקר במהירות הן בדף הסופי והן בקטגוריות שאליהן שייך הדף הזה.

דרכים ליישם breadcrumbs

מבחינת יישום, יש לנו כיום שתי אפשרויות: האפשרות הנראית למשתמשים ואפשרות הקוד. במציאות, שתיהן צריכות תמיד להיות מיושמות יחד ולא בנפרד.

נראה

באפשרות הנראית, האתר מיישם את ה-breadcrumbs בראש כל דף כך שהמשתמש המבקר בדף יודע בדיוק היכן הוא נמצא. לדוגמה, אם אנחנו מסתכלים על דף מוצר של אתר ecommerce (מחשב HP Envy), ב-breadcrumbs נראה את הבא:

בית > מחשבים > HP > Envy בדרך זו, אנחנו אומרים למשתמש שהמוצר שהוא רואה נופל בקטגוריית המחשבים וגם שייך למשפחת מחשבי HP. מבחינת ניווט, התכונה הזו מאוד חשובה מכיוון שאם המשתמש היה רוצה לראות עוד דגמי HP או להמשיך לגלוש במחשבים, זה היה מרחק לחיצה אחת.

ללא התכונה הזו, ניווט הופך להיות הרבה יותר קשה והסיכויים שהמשתמש יעזוב את האתר הרבה יותר גבוהים.

קוד

בעוד שהאפשרות הקודמת אפשרה לנו להוסיף breadcrumbs למשתמש, האפשרות הזו תספר למנועי חיפוש איך התוכן שלנו מסווג. חשוב מאוד שהיישום הזה ייעשה נכון מכיוון ש-Google לא מבין breadcrumbs שהם רק נראים.

למטה, אתה יכול לראות דוגמה ליישום Breadcrumbs באמצעות שבר script 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, יש לנו מספר plugins זמינים שיעזרו לנו עם היישום הזה:

• ›Rank Math
• ›Yoast SEO

אימות היישום

ברגע שהיישום נעשה, הדבר החשוב ביותר יהיה לאמת שהוא נעשה נכון. בעוד שאימות היישום ה-"נראה" יהיה מאוד פשוט מאחר שנצטרך רק לבדוק שכל האלמנטים מקושרים נכון ועובדים היטב, לאימות יישום הקוד נצטרך קצת יותר מאמץ.

אפילו כך, יש לרשותנו כלי Google והרחבת Chrome שיקלו על חיינו הרבה.

כלי הנתונים המובנים של Google:

באמצעות כלי Google, אנחנו יכולים לאמת את הנתונים המובנים שלנו או דרך URL או ברמת הקוד אם נכניס את השבר ישירות.

כלי הנתונים המובנים של Google

אם נכניס URL, Google יחזיר את הניתוח עם כל הנתונים המובנים שזוהו.

דוגמה לניתוח URL בכלי הנתונים המובנים של Google.

אם, מצד שני, אנחנו רוצים קודם לבדוק את קוד JSON-LD של Breadcrumb לפני יישומו, אנחנו יכולים להשתמש בכלי "code fragment", אשר ייתן לנו את התוצאה הבאה:

כלי אימות שבר קוד עבור נתונים מובנים.

Structured Data Testing Tool (הרחבת Google Chrome)

אם במקום לבקר בכלי Google, אנחנו רוצים לאמת את הנתונים המובנים של Breadcrumb (ואחרים) ישירות מהדפדפן, אנחנו יכולים להשתמש בהרחבת "Structured Data Testing Tool", שתראה לנו את כל הנתונים המובנים שזוהו וכן כל שגיאה.

הרחבת Chrome לאימות Structured Data עם דוגמה של מאמר SEO Alive.

מעקב אחר breadcrumbs ב-Google Search Console

לבסוף, ברגע שעשינו את היישום והאימות, כל מה שנשאר הוא לעקוב אחר הפעילות ב-Google Search Console, שיאפשר לנו לעקוב אחריו יומית ולזהות חריגות.

הצגה של דוח breadcrumbs ב-Search Console (הושק בספטמבר 2019).

לסיום, נרצה לשאול אותך: מהן השגיאות הנפוצות ביותר שנתקלת בהן ביישום שלהם?

נרצה להרכיב אוסף ולפרסם אותו במאמר הזה כדי לעזור לאנשי SEO אחרים.

תודה רבה ואל תשכח לשתף את התגובות שלך!

הפניות

• ›תיעוד Google על Breadcrumbs