Earlier days, search engine optimization was all about creating content for keywords, adding proper titles and meta descriptions. However, this is no more sufficient for today and you need to use provide additional technical details for search engines about your pages. In addition, nowadays user experience is also part of site optimization. Breadcrumb is one of the easy ways to inform search engines as well as users about the structure of your site. In this article, we will explore more about breadcrumbs, importance and how to add breadcrumbs in your site.
What is Breadcrumbs?
Breadcrumbs is a navigational structure contains collection of links that helps users to browse through the website easily. Though breadcrumb is generally placed as a horizontal link below or above the title of a page, it can have a vertical or horizontal structure depending on the site’s navigation structure. Below is the examples of breadcrumbs showing how easy it makes the users to browse through the site.
Breadcrumbs is also referred as cookie crumb or breadcrumb trail.
Breadcrumbs for Users
Adding breadcrumb structure helps the user to know at any point of time where exactly he is on the site and move to up or down the level structure directly. Smaller sites with single category or independent pages may not require an additional breadcrumb navigation since the site’s menu can satisfy the navigational need of a user. But bigger sites with large number of categories and parent-child page structure needs additional breadcrumbs to inform users where exactly the current page is located relative to the whole site.
Interested users can go to upper or lower level to find relevant content which may not be possible without breadcrumbs in place.
Breadcrumbs for Search Engines
Besides helping users, breadcrumb structure is also shown in search engine results pages of Google and Bing. Search engines like Bing shows the link of the breadcrumbs in search results so that users can directly go to that category instead of a specific page.
How to Add Breadcrumbs?
When looking at the items in the breadcrumbs, they may look like simple HTML links. However, it is a structured data and should have proper schema attached to the setup. Otherwise, Google and Bing will not show the breadcrumb if you use HTML links. The easy way to add breadcrumbs to your site is to use a theme offering this feature by default. Content management systems like self-hosted WordPress offers plugins to insert customized breadcrumb above the article heading.
In this website we use Yoast SEO plugin to show the horizontal breadcrumbs above each post title. Since we have lot of categories this help us to group the articles to the relevant category and show it in search engines. The advantage is when an article is grouped with multiple categories you can choose which category should be shown in the breadcrumb as primary category.
If your site builder does not offer such a function then you need to add it manually on each page with proper schema setup. For example, site builder tools like Weebly does not offer themes with default breadcrumbs. Hence you need to add it on each page separately with custom HTML / CSS.
Validating Breadcrumb Structured Data
You can check the structured data requirement for breadcrumbs structure in official Schema.org site.
There is also a schema validator available to verify your page has no errors. Go to Schema Validator Markup tool, enter your page URL and click “Run Test” button.
You can check the breadcrumb details under “Article” section as shown below. You can check and fix any structured data errors from this tool.
If you have Google Search Console account, you can view the eligible pages on your site having valid breadcrumb schema.
Customizing Breadcrumbs
In WordPress, most of the plugins offering breadcrumbs including Yoast SEO will only add simple looking breadcrumb. However, you can easily customize the appearance by using the following CSS.
#breadcrumbs {
box-shadow: 1px 1px #d5d4d4;
background: #eeeded;
border: 1px solid #eeeded;
border-radius: 5px;
padding: 0 5px 0 10px;
font-size: 16px;
}If you are primarily focusing on users, then you do not need to worry about technical structured data. In this case, you can simply use HTML anchor links and then customize the links with CSS. You can use simple CSS breadcrumbs especially when your site has smaller number of pages. Below are some examples of horizontal CSS breadcrumbs which you can add on your site without structured data. Checkout our article on how to add this breadcrumbs in your Weebly site.
CSS Breadcrumb Style 1
CSS Breadcrumb Style 2
CSS Breadcrumb Style 3
CSS Breadcrumb Style 4
CSS Breadcrumb Style 5
Bonus CSS Breadcrumb Style 6
- Site Building
- Weebly
- Weebly Tips & Tricks
- Current Page Title
Leave a Reply
Your email is safe with us.