What is Breadcrumb? Why are they important for SEO?
What is breadcrumb navigation?
The breadcrumb navigation, breadcrumbs or breadcrumbs navigation or the Ariadne path is a secondary navigation scheme, which has prevailed in 2007 at the latest. This path is used by the user for orientation and navigation of your website. The breadcrumb navigation is usually structured in a page hierarchy and shows the logical path from the start page through categories to the final target page. "Breadcrumbs" is based on the fairy tale by the Brothers Grimm "Hänsel and Gretel", in which the two of them find their way back to the forest using breadcrumbs. "Ariadne's path" is from Greek mythology, in which Ariadne gave Theseus a ball of yarn to find his way out of the labyrinth of Daedalus.
Examples of breadcrumbs
The breadcrumb is often displayed in different ways, be it through larger characters >, arrows or graphically. Typographic or graphic elements are also used, e.g. ">>" or "|"
Breadcrumbs using larger ">" characters:
Home > Shoes > Men's Shoes > Shoe name XYZ
Breadcrumbs using arrows:
Home → Shoes → Men's shoes → Shoe name XYZ
Graphic representation of a breadcrumb:
The integration usually takes place above the fold , i.e. in the visible area of a website, and is integrated discreetly using the font, size and color so as not to distract from the actual navigation.
When should a breadcrumb be used?
The larger and more complex a website is, the more likely it is to integrate a breadcrumb. The integration of a breadcrumb can also achieve better indexing by search engine crawlers and the user ultimately benefits from better orientation. A guideline can be to start thinking about three levels.
What types of breadcrumbs are there?
A distinction is usually made between three different types:
- Path (click path): Your own click path, which could also be implemented using the browser's forward/back button.
- Location-Based: Shows the current position in the website's hierarchy, mostly for websites with at least 2 levels, where the user is located.
- Attributes (categories): In shops, for example, often the category or search/personalization functions. The integration is usually more complex.
How do I embed a breadcrumb?
- CMS : Content management systems, such as WordPress, Typo3 offer the possibility of integrating a breadcrumb in the backend. If this function does not exist, there are also plug-ins for this. Optionally, structured data or microdata should be used to support the integration so that search engines can read them accordingly.
- PHP/Javascript: By embedding code, a function can be defined in PHP or Javascript - whereby dynamic websites can also receive a breadcrumb.
- HTML: Manually, through links , these are combined in a div and determined by relative paths. The design of the breadcrumb is defined using CSS.
Breadcrumb and importance for SEO
In addition to better usability for your users, search engines understand the breadcrumb links on your website and crawl them. The breadcrumb navigation is sometimes also displayed in the Google Serps in the URL line as rich snippets . Therefore, in your search engine optimization (SEO), mark this navigation in the source text semantically using microdata, RDFa or JSON-LD.