Τι είναι τα breadcrumbs και γιατί τα χρειάζεται κάθε site (ειδικά τα eshop)

Σου έχει τύχει να μπεις σε ένα μεγάλο eshop, να ψάχνεις ένα προϊόν και ξαφνικά να χάνεις τον προσανατολισμό σου; Πάτησες δύο κατηγορίες, μπήκες σε ένα προϊόν, επέστρεψες, ξαναμπήκες αλλού και κάποια στιγμή ένιωσες χαμένος. Αρχικά, αυτό συμβαίνει σε όλους μας.

Αυτό ακριβώς το πρόβλημα λύνουν τα breadcrumbs. Μιλάμε για ένα μικρό, διακριτικό στοιχείο πλοήγησης που δείχνει στον επισκέπτη το σημείο που έχει φτάσει μέσα στο site σου και τον βοηθά να γυρίσει πίσω χωρίς να χάσει τον δρόμο του. Γι’ αυτό, σε eshop με πολλές κατηγορίες προσφέρουν κάτι παραπάνω από ευκολία. Τα θεωρώ σχεδόν απαραίτητα.

Σε αυτό το άρθρο θα δούμε τι είναι τα breadcrumbs, ποιοι τύποι υπάρχουν και γιατί κάνουν τόσο μεγάλη διαφορά σε ένα eshop. Επίσης, θα δούμε πώς βοηθούν το SEO σου και πώς μπορείς να τα βάλεις σωστά στο δικό σου site. Τέλος, θα σου δείξω τα πιο συχνά λάθη που βλέπω σε ιστοσελίδες πελατών μου, ώστε να τα αποφύγεις.

Τι είναι τα breadcrumbs

Τα breadcrumbs, ή στα ελληνικά «ψίχουλα πλοήγησης», λειτουργούν ως δευτερεύουσα γραμμή πλοήγησης που ο χρήστης βλέπει συνήθως κάτω από το κεντρικό μενού και πάνω από τον τίτλο της σελίδας. Επίσης, δείχνουν τη διαδρομή του χρήστη μέσα στο site, από την αρχική σελίδα μέχρι τη σελίδα που βλέπει εκείνη τη στιγμή.

Παράδειγμα από eshop ρούχων:

Αρχική > Γυναικεία > Φορέματα > Καλοκαιρινά > Floral midi dress

Παράδειγμα από eshop ηλεκτρονικών:

Αρχική > Υπολογιστές > Gaming PC > Intel i5 16GB 500GB SSD RTX 4060

Με ένα κλικ σε οποιοδήποτε από αυτά τα στοιχεία, ο επισκέπτης γυρνά στο αντίστοιχο επίπεδο του site. Με άλλα λόγια, λειτουργούν σαν χάρτης που δείχνει το τωρινό σημείο σου και τον δρόμο της επιστροφής.

Το όνομα το δανειστήκαμε από το παραμύθι του Χάνσελ και της Γκρέτελ, που έριχναν ψίχουλα στο δάσος για να βρουν τον δρόμο της επιστροφής. Ωστόσο, τα breadcrumbs στο web δουλεύουν λίγο διαφορετικά από το παραμύθι. Δεν δείχνουν τη χρονολογική διαδρομή του χρήστη, δείχνουν τη δομή του site.

Αν θέλεις να εμβαθύνεις στην αρχή και την εξέλιξη της έννοιας, μπορείς να δεις το αντίστοιχο άρθρο της Wikipedia (στα Αγγλικά).

Γιατί είναι τόσο σημαντικά τα breadcrumbs

Για να σου πω την αλήθεια, πολλοί ιδιοκτήτες site δεν δίνουν ιδιαίτερη σημασία σε αυτά τα στοιχεία. Τα θεωρούν «μικρή λεπτομέρεια». Ωστόσο, η εμπειρία και τα δεδομένα δείχνουν κάτι άλλο. Συγκεκριμένα, ας τα πάρουμε ένα ένα.

1. Κάνουν εύκολη την περιήγηση του επισκέπτη

Αρχικά, αυτό αποτελεί το πρώτο και πιο προφανές όφελος. Ο επισκέπτης βλέπει αμέσως σε ποιο σημείο του site έχει φτάσει και ξέρει πού να πάει αν θέλει κάτι παρόμοιο. Έτσι, δεν πατά το back του browser ξανά και ξανά, ούτε σκαλίζει το μενού από την αρχή.

Έρευνα της Nielsen Norman Group, που μελετά την εμπειρία χρήστη εδώ και δεκαετίες, αναφέρει ότι τα breadcrumbs προσφέρουν «προσανατολισμό με μηδενικό κόστος αλληλεπίδρασης». Με άλλα λόγια, ο χρήστης καταλαβαίνει τη θέση του με μια ματιά, χωρίς καμία επιπλέον ενέργεια.

Δες την επίσημη ανάλυση: Nielsen Norman Group – Breadcrumb Navigation

2. Βοηθούν στην ευκολη αναζήτηση και ανακάλυψη προϊόντων

Επιπλέον, σε ένα eshop με εκατοντάδες ή χιλιάδες κωδικούς, ο επισκέπτης σπάνια ξέρει εξαρχής τι ακριβώς ψάχνει. Συνήθως μπαίνει σε μια κατηγορία, βλέπει κάτι, μετά θέλει να γυρίσει και να συγκρίνει. Τα breadcrumbs του δίνουν αυτή την ευχέρεια. Με ένα κλικ γυρνά στην κατηγορία και με δεύτερο κλικ σε ένα πιο γενικό επίπεδο.

Πρακτικά, αν κάποιος βλέπει το προϊόν «Sneakers Nike Air Max 90» και δεν του αρέσει, με τα breadcrumbs μπορεί να γυρίσει με ένα κλικ στην κατηγορία «Sneakers» και να δει άλλα μοντέλα. Άρα, χωρίς breadcrumbs, πιθανότατα θα κλείσει την καρτέλα.

3. Μειώνουν το ποσοστό εγκατάλειψης

Όταν ο επισκέπτης χάνει τον προσανατολισμό του στο site, θα φύγει. Το πράγμα είναι τόσο απλό. Παράλληλα, έρευνες για το ηλεκτρονικό εμπόριο δείχνουν ότι το 88% των online αγοραστών δεν επιστρέφει σε site όπου είχε κακή εμπειρία πλοήγησης. Τα breadcrumbs μειώνουν αυτό το πρόβλημα γιατί δίνουν στον χρήστη μια ξεκάθαρη «έξοδο διαφυγής».

Σκέψου το έτσι: μοιάζει με τεράστιο πολυκατάστημα χωρίς ταμπέλα για τον όροφο ή τον δρόμο προς την είσοδο. Τελικά, θα κάνεις δυο τρεις γύρους και θα φύγεις.

4. Ενισχύουν σημαντικά το SEO

Η Google αγαπάει τα δομημένα sites. Όταν εντοπίζει breadcrumbs στις σελίδες σου, καταλαβαίνει καλύτερα την ιεραρχία και τη σχέση μεταξύ των κατηγοριών. Επιπλέον, αν τα βάλεις σωστά με δομημένα δεδομένα (structured data), η Google μπορεί να τα εμφανίσει και στα ίδια τα αποτελέσματα αναζήτησης αντί για την απλή διεύθυνση URL.

Αυτό αλλάζει εντελώς την εικόνα του snippet στη Google. Αντί να βλέπει κάποιος ένα μακρύ url, βλέπει μια καθαρή διαδρομή τύπου «athanasiadis.website > seo > breadcrumbs». Έτσι, το αποτέλεσμα δείχνει πιο φιλικό, πιο αξιόπιστο και πιο κατανοητό. Διαφορετικές μελέτες αναφέρουν αύξηση CTR ακόμα και κατά 8% με 30%, ανάλογα την περίπτωση.

Για τους πιο τεχνικούς, εδώ είναι ο επίσημος οδηγός της Google: developers.google.com/search/docs/appearance/structured-data/breadcrumb

5. Δυναμώνουν την εσωτερική σύνδεση (internal linking)

Κάθε στοιχείο σε ένα breadcrumb λειτουργεί ως εσωτερικός σύνδεσμος. Όταν έχεις εκατοντάδες προϊόντα, κάθε σελίδα προϊόντος έχει 3 ή 4 breadcrumb links που οδηγούν προς τις κατηγορίες. Πολλαπλασιάζοντας τα, βγάζεις χιλιάδες εσωτερικούς συνδέσμους που ενισχύουν την αυθεντία των κατηγοριών στα μάτια της Google. Επομένως, κάνεις μια από τις πιο αθόρυβες αλλά αποτελεσματικές κινήσεις SEO.

Τύποι breadcrumbs

Αρχικά, δεν έχουν όλα τα breadcrumbs την ίδια μορφή. Υπάρχουν τρεις βασικοί τύποι και ο καθένας ταιριάζει σε διαφορετική περίπτωση.

Αν με ρωτήσεις, για τις περισσότερες ελληνικές μικρομεσαίες επιχειρήσεις προτείνω τα ιεραρχικά breadcrumbs. Παραμένουν σταθερά, τα συντηρείς εύκολα και τα προτιμά και η Google.

Ωστόσο, τα path-based breadcrumbs, που δείχνουν το πραγματικό μονοπάτι του χρήστη, σπάνια βοηθούν. Διπλασιάζουν τη λειτουργία του κουμπιού «πίσω» του browser και πολλές φορές μπερδεύουν αντί να βοηθούν.

Αντίθετα, τα attribute-based breadcrumbs βοηθούν πολύ σε μεγαλύτερα eshop με πολλά φίλτρα. Για παράδειγμα, το Skroutz ή το Myntra τα χρησιμοποιούν μαζί με τα ιεραρχικά.

Γιατί στα eshop είναι ακόμη πιο κρίσιμα

Συγκεκριμένα, ένα blog μπορεί να έχει 50 ή 100 άρθρα οργανωμένα σε λίγες κατηγορίες. Ένα eshop συνήθως έχει εκατοντάδες ή και χιλιάδες προϊόντα, σε δομή τριών ή τεσσάρων επιπέδων. Εκεί τα breadcrumbs δεν προσφέρουν πολυτέλεια, προσφέρουν ανάγκη.

Σκέψου ένα eshop με ρούχα. Έχει κατηγορίες: Γυναικεία, Ανδρικά, Παιδικά. Κάθε μία έχει υποκατηγορίες: Μπλούζες, Παντελόνια, Φούστες. Κάθε υποκατηγορία έχει τα προϊόντα της. Μπορεί ένας πελάτης να μπει από το Google σε ένα συγκεκριμένο προϊόν, π.χ. ένα μπλε φόρεμα. Χωρίς breadcrumbs, δεν καταλαβαίνει τη θέση του. Με breadcrumbs, βλέπει «Αρχική > Γυναικεία > Φορέματα > Μπλε midi» και ξέρει αμέσως ότι μπορεί να πατήσει «Φορέματα» για να δει τα υπόλοιπα.

Μου έχει τύχει σε site πελάτη μου που πούλαγε ηλεκτρικά εργαλεία, να βάλουμε breadcrumbs σε όλα τα προϊόντα, και μέσα σε δύο μήνες ο μέσος χρόνος επίσκεψης ανέβηκε σημαντικά. Βέβαια έφτιαξα και άλλες διορθώσεις, αλλα ηταν σαφές ότι ο κόσμος περιηγούνταν πιο εύκολα.

Παράλληλα, μια πρόσφατη μελέτη από το SearchPilot έδειξε ότι όταν ένα site επανέφερε τα ορατά breadcrumbs στις σελίδες προϊόντων του (σε mobile), το site αύξησε στατιστικά σημαντικά την οργανική του κίνηση κατά περίπου 5%. Μικρό νούμερο; Όχι, αν σκεφτείς ότι μιλάμε για χιλιάδες επισκέψεις τον μήνα.

Η Baymard Institute, που ανήκει στα πιο έγκυρα ερευνητικά κέντρα για το ecommerce UX, αναφέρει ότι το 68% των κορυφαίων διεθνών eshops έχει προβληματική ή ανύπαρκτη υλοποίηση breadcrumbs. Άρα, αν εσύ τα βάλεις σωστά, παίρνεις αμέσως προβάδισμα.

Πηγή: Baymard Institute – E-Commerce Sites Need 2 Types of Breadcrumbs

Πού μπαίνουν τα breadcrumbs

Συνήθως, τα breadcrumbs μπαίνουν λίγο πάνω από τον τίτλο της σελίδας ή πάνω από τη λίστα προϊόντων. Ο επισκέπτης κοιτά εκεί μόλις φτάσει σε μια σελίδα, οπότε αυτό το σημείο λειτουργεί φυσικά.

Μερικοί κανόνες που πρέπει να ξέρεις:

• Αρχικά, ο χρήστης τα διαβάζει πάντα από αριστερά προς τα δεξιά. Αριστερά βάλε την Αρχική και δεξιά την τρέχουσα σελίδα.
• Επίσης, κράτησε όλα τα στοιχεία ενεργούς συνδέσμους (clickable), εκτός από το τελευταίο.
• Επιπλέον, κράτησε το τελευταίο στοιχείο χωρίς σύνδεσμο και κάν’ το οπτικά διαφορετικό, π.χ. έντονο ή πιο σκούρο.
• Παράλληλα, βάλε ένα διαχωριστικό σύμβολο, συνήθως το «>», το «/» ή ένα βελάκι.
• Σε κινητά, φρόντισε να δείχνουν καθαρά αλλά να μην πιάνουν πολύ χώρο. Συχνά κόβουμε τα μεσαία στοιχεία αν η ιεραρχία είναι πολύ βαθιά.
• Τέλος, κράτησέ τα διακριτικά σχεδιαστικά. Όχι μεγάλα γράμματα, όχι έντονα χρώματα. Λειτουργούν ως βοηθητικό στοιχείο, όχι ως κεντρικό.

Για τους πιο σχεδιαστικά προσανατολισμένους, δες τις 11 οδηγίες σχεδιασμού: Nielsen Norman Group – Breadcrumbs Design Guidelines

Πώς θα τα βάλεις στο δικό σου site (WordPress)

Αν το site σου τρέχει σε WordPress, που παραμένει το πιο διαδεδομένο σύστημα, υλοποιείς τα breadcrumbs σχετικά απλά. Επιπλέον, στις περισσότερες περιπτώσεις δουλεύεις χωρίς προγραμματιστή.

Βήματα:

1. Αρχικά, εγκατέστησε ένα SEO plugin. Συνήθως χρησιμοποιώ το Yoast SEO ή το Rank Math. Και τα δύο έχουν ενσωματωμένη υποστήριξη για breadcrumbs.
2. Στη συνέχεια, ενεργοποίησε τη λειτουργία breadcrumbs μέσα στις ρυθμίσεις του plugin. Στο Yoast: Settings > Advanced > Breadcrumbs.
3. Επιπλέον, το plugin παράγει αυτόματα και τα δομημένα δεδομένα (JSON-LD schema) που θέλει η Google.
4. Έπειτα, δοκίμασε αν τα βλέπεις σωστά στις σελίδες σου. Πολλά σύγχρονα themes (όπως τα Astra, GeneratePress, Hello) τα δείχνουν αυτόματα. Σε άλλα θέλει μια μικρή προσθήκη κώδικα στο template.
5. Τέλος, επαλήθευσε το αποτέλεσμα με το εργαλείο της Google. Δες αν η Google τα αναγνωρίζει σωστά.

Το εργαλείο επαλήθευσης: Google Rich Results Test

Αν το eshop σου τρέχει σε WooCommerce, συνήθως έχει ήδη ιεραρχικά breadcrumbs. Ωστόσο, έλεγξε πώς τα βλέπει ο επισκέπτης και αν θέλουν styling για να ταιριάζουν με το design σου.

Αν έχεις αμφιβολία για το πώς να ανεβάσεις άρθρα και να ρυθμίσεις περιεχόμενο στο WordPress, δες και το παλαιότερο άρθρο μου: Πώς ανεβάζεις άρθρα στο site – οδηγός WordPress βήμα-βήμα.

Λάθη που πρέπει να αποφύγεις

Έχω δει πολλά λάθη σε breadcrumbs σε site πελατών, ειδικά όταν αυτά φτιάχτηκαν χρόνια πριν χωρίς προγραμματισμό. Συγκεκριμένα, πρόσεξε τα παρακάτω:

• Αρχικά, απόφυγε breadcrumbs χωρίς clickable στοιχεία. Αν ο επισκέπτης δεν μπορεί να πατήσει επάνω τους, δεν εξυπηρετούν σε τίποτα.
• Επίσης, κράτησε τη διαδρομή ίδια με τη δομή του menu. Αν το menu λέει «Ανδρικά Ρούχα» και τα breadcrumbs λένε «Αντρικά», ο χρήστης χάνει τον προσανατολισμό του.
• Επιπλέον, μην ξεχνάς τα δομημένα δεδομένα. Χωρίς JSON-LD, η Google δεν τα «βλέπει» στα αποτελέσματα αναζήτησης.
• Παράλληλα, μην τα βάζεις μόνο σε κάποιες σελίδες. Κράτησέ τα σε όλες τις σελίδες προϊόντων και κατηγοριών, με συνέπεια.
• Ακόμη, απόφυγε πολύ μακριά ονόματα. Αν η τελευταία ονομασία έχει μεγάλο όνομα προϊόντος, σε κινητά «σπάει» η εμφάνιση. Κάνε τα σύντομα όπου βοηθά.
• Τέλος, διόρθωσε παραμετροποιήσεις που δείχνουν «sample-page» ή «uncategorized». Ο developer κάνει συχνά αυτό το λάθος και το βλέπω συνεχώς. Φρόντισε να δείχνουν καθαρά οι κατηγορίες.

Παραδείγματα από γνωστά ελληνικά sites

Για να δεις τι εννοούμε στην πράξη, δες πώς τα έχουν στήσει μερικά από τα μεγαλύτερα ελληνικά eshop. Επίσης, μπες και παρατήρησε την υλοποίησή τους.

• plaisio.gr – Αρχικά, έχει ξεκάθαρη ιεραρχική διαδρομή σε όλα τα προϊόντα και επιπλέον στοιχεία φιλτραρίσματος.
• public.gr – Επίσης, κρατά καθαρή και διακριτική εμφάνιση, ταιριαστή με το συνολικό design.
• dims.gr – Επιπλέον, προσφέρει πολύ καλή ιεραρχική προσέγγιση και βοηθά σημαντικά λόγω της τεράστιας ποικιλίας προϊόντων.
• tilematikidirect.gr – Τέλος, κρατά συνεπή και ευδιάκριτα breadcrumbs σε όλη τη διαδρομή πλοήγησης.

Παρατήρησε ότι όλα κρατούν τα breadcrumbs μικρά, σε γκρι ή μπλε χρώμα, χωρίς να τραβούν την προσοχή από το ίδιο το προϊόν. Αυτό είναι το ζητούμενο.

Επίλογος

Τα breadcrumbs μοιάζουν μικρό στοιχείο, αλλά κάνουν μεγάλη διαφορά. Βοηθούν τον επισκέπτη να κρατήσει τον προσανατολισμό του. Δίνουν δομή στο site σου. Στέλνουν θετικό σήμα στη Google. Επιπλέον, ειδικά αν διατηρείς ένα eshop, μπορούν να σου φέρουν περισσότερες πωλήσεις γιατί κρατάνε τον κόσμο μέσα στο site και του δίνουν την ευκαιρία να ανακαλύψει επιπλέον προϊόντα.

Αν το δικό σου site δεν τα έχει ακόμα, ή τα έχει με προβλήματα, αξίζει να ασχοληθείς. Μιλάμε για μία από τις πιο εύκολες αλλαγές που μπορείς να κάνεις και έχουν άμεσο αποτέλεσμα, τόσο στην εμπειρία χρήστη όσο και στο SEO.

Δοκίμασε να μπεις στο site σου και να ακολουθήσεις μια διαδρομή σαν να ήσουν επισκέπτης. Βρίσκεις εύκολα τη θέση σου; Μπορείς να γυρίσεις πίσω με ένα κλικ; Αν η απάντηση δεν δίνει ξεκάθαρο ναι, τότε έφτασε η ώρα να ενεργοποιήσεις ή να βελτιώσεις τα breadcrumbs.

Ίσως σε ενδιαφέρουν επίσης

• Πώς να πετύχεις αύξηση επισκεψιμότητας στο site – οδηγός με πρακτικές συμβουλές
• Τι είναι το SEO – πώς να βελτιώσεις την παρουσία σου στη Google
• Χρησιμοποίησε ξεκάθαρη πλοήγηση με απλό μενού
• Τι είναι τα φιλικά URL και γιατί είναι τόσο σημαντικά για ένα website
• SEO για αρχάριους – 13 βήματα για καλύτερη προβολή
• 10 σημαντικά στοιχεία που πρέπει να έχει κάθε ιστοσελίδα

Λίγα λόγια για εμένα

Με λένε Δημήτρη Αθανασιάδη και δουλεύω με την κατασκευή ιστοσελίδων, eshop και SEO. Δουλεύω καθημερινά με μικρομεσαίες ελληνικές επιχειρήσεις, βοηθώντας τες να αποκτήσουν ψηφιακή παρουσία που πραγματικά αποδίδει. Δεν πουλάω «μαγικά πακέτα», δίνω πρακτικές λύσεις που δουλεύουν.

Αν διαβάζοντας αυτό το άρθρο σκέφτηκες ότι το δικό σου site ίσως να μην έχει σωστά στημένα τα breadcrumbs ή έχει γενικότερα προβλήματα πλοήγησης και SEO, στείλε μου το url του και θα σου κάνω μια πρώτη αξιολόγηση χωρίς κόστος. Καμιά φορά μικρές αλλαγές φέρνουν μεγάλα αποτελέσματα.

Επικοινώνησε μαζί μου: athanasiadis.website/contact