Breadcrumbs did not help Hansel and Gretel but they can help your Website

Breadcrumbs are  a secondary navigation format that reveals the user’s location in a website. The term actually comes from the Hansel and Gretel fairy tale .... you know the one with the scary, cannibalistic witch and yet another evil stepmother? In the story, Hansel and Gretel drop breadcrumbs while walking in the woods to form a trail back to their home. Unfortunately for them, birds came along and ate their bread trail .... kind of like many WordPress themes by default hide the breadcumbs on a website!

I have recently researched the use of breadcrumbs on a website, as I rarely use them. They can be ugly and seem extraneous when there are not a lot of categories and sub pages/posts on a website.

However, what I have learned is that breadcrumbs, for the most part can be an excellent tool to use on  a website. They can really enhance the user experience by reducing the number of actions a website visitor needs to take in order to get to a higher-level page, and they improve the findability of website sections and pages. They are also an effective visual aid that indicates the location of the user within the website’s hierarchy, making it a great source of contextual information for landing pages.

There are three different types of breadcrumb links: Location, Attribute and Path. I am just going to talk about Location-Based Links here, as this is the most used and effective type of breadcrumb.

Benefits of Location-Based Links

1. Improved User Experience

   A location-based breadcrumb trail should begin with a link to the website’s home page and end with the current page.  This works very well on e-commerce sites. For example, a user might land on a product page and decide that product might not be a good match. In this case, the breadcrumb links allow the user to easily navigate up the site hierarchy to view more product options.

   This type of breadcrumb navigation enhances the usability, findability, accessibility, and credibility of a website for the user. Location-based breadcrumb links often reduce the number of actions a website visitor needs to take in order to get to a higher-level page. This is also very helpful since users do not always enter a website via the home page.

   Finally, breadcrumbs can reduce user anxiety about what to expect by showing a user the entire trail of a process.

2. Improves Findability of Your Website

   Peter Morville, one of the founding fathers of Information architecture for the World Wide Web, developed the user experience honeycomb that illustrates the seven main facets of great user experience. By definitiion, "Findability" means "We must strive to design navigable web sites and locatable objects, so users can find what they need." By helping users easily navigate and find what they are looking for, breadcrumbs help improve the findability of a website.

3. Provide Information Scent

   Combining user experience with findability, this article in SearchEngineLand describes Information Scent as being made up of informational and visual clues that:

   • Facilitate clear navigation (where can I go?)
   • Allow for quick orientation (where am I?) and
   • Communicate content value (should I click on this link?)

   If navigational labels are clear and consistent to users, location-based breadcrumb links can provide a powerful and enticing information scent to more content on your site before and after people arrive on your website.

4. Breadcrumbs Provide SEO Benefits

   Really? Yes! 

   Search engines like Google identify such secondary navigation trails and present better and accurate information about your pages in their search results.

   Also, the words used in a breadcrumb trail can be your site’s target keywords. These keywords in the breadcrumb navigation helps improve the keyword density of the page. The internal links on the breadcrumb navigation also give search engines more information about that page and the pages it is connected to.

   Moreover, Google started displaying breadcrumbs in its search results, and even though it can get this feature for sites that do not have breadcrumbs implemented, having a breadcrumb navigation should assist the search engine better in displaying the breadcrumbs in search.

   Both Genesis Framework themes and Yoast SEO Plugin have built in support for breadcrumbs and all you have to do is to enable and configure them.
   

Breadcrumb Link Dos And Don’ts by Shari Thurow

Breadcrumb Dos

• Begin a location-based breadcrumb trail with a link to the home page. End the breadcrumb trail with the current page.
• Use a simple separator between the levels of breadcrumb links. A forward slash (/), less-than sign (<), or a double less-than sign are all expected and acceptable.  The most commonly accepted and most recognizable symbol for separating hyperlinks in breadcrumb trails is the “greater than” symbol (>). Typically, the > sign is used to denote hierarchy, as in the format of Parent category > Child category.
• Ensure that your breadcrumb links look clickable and are clickable. For mobile devices, if you are using location-based breadcrumb links, ensure that your breadcrumb links look tappable and are tappable.
• Breadcrumb links should be placed above the web page’s h1-formatted heading to encourage usage (for user mental models and further site exploration).

Breadcrumb Don’ts

• Don’t use reverse breadcrumb-link text for your site’s (X)HTML title tag. Thoughtful titles should be written by humans, not software.
• Don’t use the breadcrumb-link structure for your URL’s structure. Remember URLs should be easy to type and easy to remember.
• Don’t make breadcrumb text size so small that users have a difficult time reading them. Remember, people look at breadcrumbs 30% of the time. If users determine that your content is too difficult to read, they might not look at content on the rest of your website.
• Ensure that breadcrumb links don’t dominate the page. They should not be formatted to distract site visitors from reading: (A) the content heading, and (B) global and local navigation.
• Don’t use breadcrumb links without supporting global and local (if used) navigation. Breadcrumb links are a supplemental, contextual type of navigation aid. They should not be the primary means of browsing a website.