{"id":9167,"date":"2021-11-26T06:50:38","date_gmt":"2021-11-26T06:50:38","guid":{"rendered":"https:\/\/colibriwp.com\/blog\/?p=9167"},"modified":"2021-10-28T07:35:38","modified_gmt":"2021-10-28T07:35:38","slug":"wordpress-breadcrumbs","status":"publish","type":"post","link":"https:\/\/colibriwp.com\/blog\/wordpress-breadcrumbs\/","title":{"rendered":"The Fundamental Guide to Adding WordPress Breadcrumbs"},"content":{"rendered":"

Want to reduce bounce rates, improve website navigation, boost SEO, and offer amazing user experiences? Of course you do!<\/span><\/p>\n

But if you\u2019re not using breadcrumbs as part of your website, you\u2019re missing out on a great opportunity. Breadcrumbs enhance site navigation by helping users to travel through your web pages more easily (via a trail of \u2018breadcrumbs\u2019).\u00a0<\/span><\/p>\n

Chances are you\u2019ve encountered breadcrumbs many times. They often appear just below a site\u2019s navigation menu.\"website<\/span><\/p>\n

Source: dedoles.se<\/em><\/p>\n

Today, we\u2019re going to be sharing our top tips and tricks to help you add WordPress breadcrumbs to your site and start improving those user experiences.\u00a0<\/span><\/p>\n

 <\/p>\n

What Are Breadcrumbs?<\/span><\/h2>\n

Forget golden and crispy, freshly toasted, or panko. Those breadcrumbs may be oh-so-delicious, but that\u2019s not what we\u2019re here to talk about today. No, we\u2019re here to discuss <\/span>online breadcrumbs<\/span><\/i>, an altogether more functional (and less edible) morsel.\u00a0<\/span><\/p>\n

A breadcrumb is essentially a navigation link. Breadcrumbs are connected to create a text pathway through a website\u2019s pages. They track where a user is on a website in relation to the homepage and are usually located at the top, just below the navigation bar.\u00a0<\/span><\/p>\n

Breadcrumbs <\/span>improve your site\u2019s user experience<\/span><\/a> (UX) by making it easier for users to backtrack on their navigation. They also support SEO rankings by helping search engines navigate through your web pages and link structures (more on this later).\u00a0<\/span><\/p>\n

 <\/p>\n

Understanding How the Different Breadcrumbs Work<\/span><\/h2>\n

Breadcrumbs can be applied to a website for a variety of reasons. For websites built in WordPress, for example, there are three types of breadcrumb that can be incorporated into a site\u2019s navigation. These are hierarchy-based, attribute-based, and history-based.\u00a0<\/span><\/p>\n

Hierarchy-based breadcrumbs<\/span><\/h3>\n

These are your classic breadcrumbs. Hierarchy-based breadcrumbs show website users where they are in your site\u2019s overall structure in relation to the homepage. This allows visitors to easily navigate through categories and find related products.\u00a0<\/span><\/p>\n

Attribute-based breadcrumbs<\/span><\/h3>\n

These breadcrumbs are most often found as part of eCommerce sites. Attribute-based breadcrumbs list the attributes a user has searched for to reach the product or page they\u2019re viewing.\u00a0<\/span><\/p>\n

For example, imagine you\u2019re navigating through an online fashion store. Sometimes, you may be asked to refine your search in terms of product attributes (e.g. fit, style, color, size). The attributes you pick will make up your breadcrumb trail.\u00a0<\/span><\/p>\n

\"attribute-based<\/p>\n

Image source<\/span><\/a><\/em><\/p>\n

History-based breadcrumbs<\/span><\/h3>\n

These breadcrumbs are chronological. They\u2019re ordered based on what you do on a website. History-based breadcrumbs lead users back via the pages they\u2019ve already navigated through. These breadcrumbs act a bit like the \u2018back\u2019 button on your browser to help users return to a page they\u2019ve already visited.\u00a0<\/span><\/p>\n

 <\/p>\n

Benefits of Breadcrumbs<\/span><\/h2>\n

Breadcrumbs are incredibly useful for a website\u2019s UX and SEO. As such, many <\/span>content marketing services<\/span><\/a> are promoting the benefits of breadcrumbs as part of a robust digital marketing strategy.\u00a0<\/span><\/p>\n

Breadcrumbs allow users to navigate through a website more easily and help search engine crawlers understand a site\u2019s content. That means improved search engine rankings, lower bounce rates, and better user experiences all around.\u00a0<\/span><\/p>\n

 <\/p>\n

Easier site navigation for visitors, meaning lower bounce rates<\/span><\/h3>\n

As a website visitor, there\u2019s nothing more annoying than finding you\u2019ve navigated to a product page you\u2019re not the slightest bit interested in. At this point, you\u2019ll probably want to do one of two things.\u00a0<\/span><\/p>\n