Βρίσκεσαι τρία επίπεδα βαθιά σε μια ιστοσελίδα. Θέλεις να γυρίσεις στην κατηγορία από την οποία ήρθες, όχι ως την αρχική σελίδα. Χωρίς πλοήγηση breadcrumb, είτε πατάς επανειλημμένα το κουμπί «πίσω» είτε ξεκινάς ξανά από την κορυφή. Τα breadcrumbs το λύνουν με ένα κλικ.
Τα breadcrumbs είναι ένα δευτερεύον στοιχείο πλοήγησης που δείχνει στους επισκέπτες τη διαδρομή από την αρχική σελίδα ως τη σελίδα που βλέπουν τώρα. Συνήθως εμφανίζονται κοντά στο πάνω μέρος της σελίδας ως οριζόντιο μονοπάτι από συνδέσμους, για παράδειγμα Αρχική, μετά Κατηγορία, μετά Υποκατηγορία, μετά Τρέχουσα σελίδα. Κάθε βήμα είναι σύνδεσμος που πηγαίνει τον επισκέπτη πίσω σε εκείνο το επίπεδο της ιστοσελίδας.
Το όνομα προέρχεται από το παραμύθι Χάνσελ και Γκρέτελ, όπου οι ήρωες άφηναν ψίχουλα στο δάσος για να βρουν τον δρόμο της επιστροφής. Σε μια ιστοσελίδα η ιδέα είναι η ίδια: ένα ορατό μονοπάτι που δείχνει πού βρίσκεσαι και σου δίνει τρόπο να γυρίσεις στα βήματά σου.
Ποιοι είναι οι διαφορετικοί τύποι πλοήγησης breadcrumb;
Υπάρχουν τρεις τύποι breadcrumbs, ο καθένας κατάλληλος για διαφορετικό είδος δομής ιστοσελίδας.
Τα breadcrumbs θέσης είναι ο πιο συνηθισμένος τύπος. Δείχνουν τη σταθερή θέση του επισκέπτη στην ιεραρχία της ιστοσελίδας, με βάση τον τρόπο που είναι δομημένη. Ένας επισκέπτης σε σελίδα προϊόντος μέσα σε μια κατηγορία θα έβλεπε κάτι σαν Αρχική, μετά Κατάστημα, μετά Όνομα κατηγορίας, μετά Όνομα προϊόντος. Η διαδρομή είναι η ίδια για κάθε επισκέπτη που φτάνει σε εκείνη τη σελίδα, γιατί αντικατοπτρίζει τη δομή της ιστοσελίδας και όχι το ταξίδι του επισκέπτη.
Τα breadcrumbs διαδρομής δείχνουν την πραγματική διαδρομή που ακολούθησε ο επισκέπτης για να φτάσει στην τρέχουσα σελίδα. Αλλάζουν ανάλογα με το πώς έφτασε. Είναι λιγότερο συνηθισμένα, γιατί μπορούν να μπερδέψουν: δύο επισκέπτες στην ίδια σελίδα μπορεί να βλέπουν διαφορετικά breadcrumbs, κάτι που υπονομεύει τον σκοπό της εμφάνισης της δομής. Οι περισσότερες ιστοσελίδες χρησιμοποιούν αντί γι' αυτά breadcrumbs θέσης.
Τα breadcrumbs χαρακτηριστικών χρησιμοποιούνται σε e-shop όπου τα προϊόντα μπορούν να ανήκουν σε πολλές κατηγορίες ή να φιλτράρονται με χαρακτηριστικά όπως χρώμα, μέγεθος ή μάρκα. Αντί να δείχνουν μία ιεραρχική διαδρομή, δείχνουν τα φίλτρα ή τα χαρακτηριστικά που έχουν εφαρμοστεί. Είναι εξειδικευμένος τύπος, που χρησιμοποιείται κυρίως σε καταλόγους προϊόντων.
Πότε χρειάζεται breadcrumbs μια ιστοσελίδα;
Τα breadcrumbs έχουν τη μεγαλύτερη αξία σε ιστοσελίδες με βαθιά ή σύνθετη δομή, όπου οι επισκέπτες μπορεί να προσγειωθούν αρκετά επίπεδα κάτω από την αρχική και να χρειάζονται τρόπο προσανατολισμού.
Τα e-shop με κατηγορίες και υποκατηγορίες προϊόντων ωφελούνται σημαντικά. Ένας επισκέπτης που φτάνει σε σελίδα προϊόντος από αποτέλεσμα αναζήτησης μπορεί να θέλει να δει παρόμοια προϊόντα στην ίδια κατηγορία. Τα breadcrumbs του δίνουν άμεση διαδρομή προς το επίπεδο της κατηγορίας, χωρίς να ξεκινά ξανά από την αρχική.
Ωφελούνται και οι βάσεις γνώσεων, οι σελίδες τεκμηρίωσης και οι ιστοσελίδες με πολύ περιεχόμενο και πολλές θεματικές κατηγορίες. Ένας επισκέπτης που διαβάζει ένα συγκεκριμένο άρθρο και θέλει να δει τι άλλο καλύπτεται στην ίδια θεματική περιοχή μπορεί να ακολουθήσει το breadcrumb πίσω στην κατηγορία, αντί να ψάξει ξανά.
Μια απλή επαγγελματική ιστοσελίδα πέντε σελίδων με επίπεδη δομή δεν χρειάζεται breadcrumbs. Αν δεν υπάρχει ουσιαστική ιεραρχία για πλοήγηση, το στοιχείο προσθέτει οπτικό θόρυβο χωρίς να εξυπηρετεί κανέναν σκοπό. Το άρθρο τι είναι η δομή ιστοσελίδας εξηγεί την ιεραρχία που αντικατοπτρίζουν τα breadcrumbs. Το άρθρο τι είναι η πλοήγηση ιστοσελίδας καλύπτει ολόκληρο το σύστημα πλοήγησης και πού χωράνε μέσα του τα breadcrumbs.
Πώς επηρεάζουν τα breadcrumbs την εμπειρία χρήστη;
Τα breadcrumbs μειώνουν την προσπάθεια που χρειάζεται για να κινηθείς σε μια ιστοσελίδα με πολλά επίπεδα. Δίνουν στους επισκέπτες τρία πράγματα ταυτόχρονα: επιβεβαίωση του πού βρίσκονται τώρα, έναν ορατό χάρτη του πώς είναι δομημένη η σελίδα και μια συντόμευση για να γυρίσουν σε οποιοδήποτε επίπεδο της ιεραρχίας.
Χωρίς breadcrumbs σε μια βαθιά ιστοσελίδα, οι επισκέπτες που θέλουν να εξερευνήσουν μια κατηγορία πρέπει είτε να πατούν επανειλημμένα το κουμπί «πίσω», είτε να πάνε στο κύριο μενού και να ξεκινήσουν ξανά, είτε να χρησιμοποιήσουν την αναζήτηση. Και τα τρία απαιτούν περισσότερη προσπάθεια από ένα μόνο κλικ σε breadcrumb. Η μείωση αυτής της τριβής κρατά τους επισκέπτες περισσότερο στη σελίδα και αυξάνει την πιθανότητα να βρουν αυτό που ήρθαν να βρουν.
Τα breadcrumbs μειώνουν επίσης τον εκνευρισμό των επισκεπτών που προσγειώνονται βαθιά μέσα σε μια ιστοσελίδα από μια μηχανή αναζήτησης. Μπορεί να μη γνωρίζουν καθόλου τη δομή της ιστοσελίδας όταν φτάνουν. Τα breadcrumbs τους δίνουν άμεσο πλαίσιο: βλέπουν με μια ματιά ότι κοιτούν ένα συγκεκριμένο προϊόν μέσα σε μια συγκεκριμένη κατηγορία σε έναν συγκεκριμένο τύπο ιστοσελίδας. Αυτός ο προσανατολισμός μετράει για την εμπιστοσύνη και για τη συνέχιση της περιήγησης.
Πώς επηρεάζουν τα breadcrumbs το SEO;
Τα breadcrumbs επηρεάζουν το SEO με δύο ξεχωριστούς τρόπους: μέσα από σήματα δομής της ιστοσελίδας και μέσα από τον τρόπο που εμφανίζουν τα αποτελέσματα οι μηχανές αναζήτησης.
Όταν τα breadcrumbs υλοποιούνται σωστά με σήμανση δομημένων δεδομένων, οι μηχανές αναζήτησης μπορούν να διαβάσουν και να καταλάβουν την ιεραρχία της ιστοσελίδας από τα μονοπάτια των breadcrumbs. Αυτό βοηθά στη σάρωση και στην κατανόηση του πώς σχετίζονται οι σελίδες μεταξύ τους. Οι σελίδες που τοποθετούνται καθαρά μέσα σε μια καλά ορισμένη ιεραρχία τείνουν να γίνονται κατανοητές και να καταχωρίζονται με μεγαλύτερη ακρίβεια από σελίδες σε επίπεδες ή ασαφείς δομές.
Το δεύτερο αποτέλεσμα φαίνεται στα αποτελέσματα αναζήτησης. Όταν τα breadcrumbs περιλαμβάνουν δομημένα δεδομένα, οι μηχανές αναζήτησης μπορεί να εμφανίζουν το μονοπάτι των breadcrumbs αντί για ολόκληρο το URL κάτω από τον τίτλο της σελίδας στα αποτελέσματα. Ένα αποτέλεσμα που δείχνει Αρχική, μετά Κατηγορία, μετά Προϊόν γίνεται πιο εύκολα κατανοητό με μια ματιά από ένα μακρύ URL με παραμέτρους. Αυτή η καλύτερη αναγνωσιμότητα μπορεί να αυξήσει το ποσοστό κλικ (CTR) από τα αποτελέσματα αναζήτησης.
Τα breadcrumbs συμβάλλουν και στους εσωτερικούς συνδέσμους. Κάθε σύνδεσμος breadcrumb είναι εσωτερικός σύνδεσμος που περνά αυθεντία προς τα πάνω στην ιεραρχία, ενισχύοντας τη σημασία των σελίδων κατηγορίας και των κεντρικών σελίδων. Για μεγάλες ιστοσελίδες, αυτό είναι ουσιαστικό δομικό όφελος για το SEO. Το άρθρο τι είναι το SEO καλύπτει ευρύτερα πώς συνδέονται οι εσωτερικοί σύνδεσμοι και η δομή της ιστοσελίδας με την απόδοση στις αναζητήσεις.
Τι είναι τα δομημένα δεδομένα για breadcrumbs;
Τα δομημένα δεδομένα είναι κώδικας που προστίθεται σε μια σελίδα και βοηθά τις μηχανές αναζήτησης να καταλάβουν συγκεκριμένα στοιχεία της σελίδας σε τυποποιημένη μορφή. Τα δομημένα δεδομένα των breadcrumbs λένε στις μηχανές αναζήτησης το όνομα και το URL κάθε βήματος του μονοπατιού, με μορφή που υποστηρίζεται επίσημα από τις μηχανές αναζήτησης.
Χωρίς δομημένα δεδομένα, μια μηχανή αναζήτησης βλέπει το κείμενο των breadcrumbs στη σελίδα αλλά πρέπει να συμπεράνει τι σημαίνει. Με δομημένα δεδομένα, η πληροφορία είναι ρητή: αυτό είναι breadcrumb, αυτό είναι το πρώτο βήμα με αυτό το όνομα και αυτό το URL, αυτό είναι το δεύτερο βήμα και ούτω καθεξής. Οι μηχανές αναζήτησης το χρησιμοποιούν για να χτίσουν την εμφάνιση των breadcrumbs στα αποτελέσματα και για να καταλάβουν πιο αξιόπιστα την ιεραρχία της ιστοσελίδας.
Οι περισσότεροι σύγχρονοι δημιουργοί ιστοσελίδων και πλατφόρμες CMS δημιουργούν αυτόματα δομημένα δεδομένα breadcrumb όταν ενεργοποιούνται τα breadcrumbs. Αν χτίζεις ή διαχειρίζεσαι μια ιστοσελίδα χειροκίνητα, αξίζει τον κόπο να προσθέσεις αυτή τη σήμανση σε κάθε ιστοσελίδα με ουσιαστικό ιεραρχικό περιεχόμενο.
Πώς χειρίζεται το WEMASY την πλοήγηση breadcrumb
Ο δημιουργός ιστοσελίδων του WEMASY υποστηρίζει πλοήγηση breadcrumb για ιστοσελίδες με ιεραρχική δομή περιεχομένου. Όταν ενεργοποιηθούν, τα breadcrumbs δημιουργούνται αυτόματα με βάση την κατηγορία της σελίδας και τη θέση της στη δομή της ιστοσελίδας, μαζί με τη σήμανση δομημένων δεδομένων που χρησιμοποιούν οι μηχανές αναζήτησης για να τα εμφανίζουν στα αποτελέσματα.
Δες τι περιλαμβάνεται στον δημιουργό ιστοσελίδων του WEMASY ή δες τα πακέτα στη σελίδα τιμών.
Συχνές ερωτήσεις
Αντικαθιστούν τα breadcrumbs το κύριο μενού πλοήγησης;
Όχι. Τα breadcrumbs και το κύριο μενού εξυπηρετούν διαφορετικούς σκοπούς. Το κύριο μενού επιτρέπει στους επισκέπτες να πηδήξουν σε οποιαδήποτε ενότητα της ιστοσελίδας από οποιαδήποτε σελίδα. Τα breadcrumbs δείχνουν πού βρίσκεται η τρέχουσα σελίδα στην ιεραρχία και επιτρέπουν στους επισκέπτες να γυρίσουν πίσω σε αυτή τη συγκεκριμένη διαδρομή. Σε μια καλά σχεδιασμένη ιστοσελίδα υπάρχουν και τα δύο στοιχεία και δουλεύουν μαζί. Τα breadcrumbs είναι δευτερεύον επίπεδο πλοήγησης, όχι αντικατάσταση του κύριου μενού. Με τον δημιουργό ιστοσελίδων του WEMASY, μπορείς να το ρυθμίσεις απευθείας στην ιστοσελίδα σου.
Πού πρέπει να εμφανίζονται τα breadcrumbs σε μια σελίδα;
Τα breadcrumbs εμφανίζονται συνήθως κοντά στο πάνω μέρος της σελίδας, κάτω από τη γραμμή του κύριου μενού και πάνω από τον τίτλο της σελίδας. Αυτή η θέση τα βάζει εκεί που οι επισκέπτες περιμένουν να βρουν ενδείξεις προσανατολισμού και πριν αρχίσει το κύριο περιεχόμενο. Πρέπει να ξεχωρίζουν οπτικά αλλά να μην κυριαρχούν: αρκετά μικρά για να μην εμποδίζουν το κύριο περιεχόμενο, αρκετά μεγάλα για να διαβάζονται και να πατιούνται άνετα στο κινητό.
Πρέπει τα breadcrumbs να περιλαμβάνουν την τρέχουσα σελίδα;
Εξαρτάται από τη σύμβαση που ακολουθείς. Κάποιες υλοποιήσεις breadcrumbs περιλαμβάνουν την τρέχουσα σελίδα ως τελευταίο στοιχείο του μονοπατιού, εμφανισμένη ως απλό κείμενο και όχι ως σύνδεσμο. Άλλες τελειώνουν το μονοπάτι στο γονικό επίπεδο, αφού ο σύνδεσμος προς τη σελίδα που ήδη βλέπεις δεν εξυπηρετεί τίποτα. Και οι δύο προσεγγίσεις είναι συνηθισμένες και αποδεκτές. Πιο σημαντικό είναι αν το μονοπάτι δείχνει καθαρά τη διαδρομή από την αρχική σελίδα ως το σημείο όπου βρίσκεται τώρα ο επισκέπτης.
Βοηθούν τα breadcrumbs στο κινητό;
Ναι, αλλά πρέπει να υλοποιηθούν προσεκτικά. Σε μικρή οθόνη, ένα μακρύ μονοπάτι breadcrumbs μπορεί να σπάσει σε πολλές γραμμές ή να ξεχειλίσει από το πλαίσιο. Συνηθισμένες λύσεις είναι να κόβονται τα ενδιάμεσα βήματα με αποσιωπητικά, να μαζεύονται όλα εκτός από τον άμεσο γονέα ή να εμφανίζεται μόνο ο σύνδεσμος ένα επίπεδο πάνω στο κινητό. Ο στόχος είναι να διατηρηθεί το όφελος του προσανατολισμού χωρίς να κυριαρχεί το μονοπάτι στην οθόνη. Ένα breadcrumb που δουλεύει άσχημα στο κινητό είναι χειρότερο από το να μην υπάρχει καθόλου.
Είναι τα breadcrumbs παράγοντας κατάταξης;
Όχι άμεσα. Οι μηχανές αναζήτησης δεν κατατάσσουν ψηλότερα τις σελίδες απλώς επειδή έχουν breadcrumbs. Το όφελος για το SEO έρχεται έμμεσα: τα breadcrumbs με δομημένα δεδομένα βοηθούν τις μηχανές αναζήτησης να καταλάβουν με μεγαλύτερη ακρίβεια τη δομή της ιστοσελίδας, οι σύνδεσμοι breadcrumb συμβάλλουν στην αυθεντία των εσωτερικών συνδέσμων και η εμφάνιση των breadcrumbs στα αποτελέσματα αναζήτησης μπορεί να βελτιώσει το ποσοστό κλικ. Είναι πραγματικά οφέλη που αξίζει να έχεις, αλλά δουλεύουν βελτιώνοντας τη δομή και την ευχρηστία και δεν είναι άμεσο σήμα κατάταξης.