- What are Breadcrumbs and why you should use them<\/a><\/li>
- Divi Breadcrumbs with free plugins<\/a>
- Divi breadcrumbs module<\/a><\/li>
- Yoast SEO plugin<\/a><\/li>
- Rank Math plugin<\/a><\/li>
- NavXT plugin<\/a><\/li><\/ul><\/li>
- Breadcrumbs with Divi premium plugins<\/a>
- Divi Booster breadcrumbs module<\/a><\/li>
- Divi Supreme<\/a><\/li>
- Divi Plus<\/a><\/li><\/ul><\/li><\/ul>\n\n\n\n
What are Breadcrumbs and why you should use them<\/h2>\n\n\n\n
Breadcrumbs are small navigational links found on most websites that help people quickly understand where they are and what page they are currently viewing. They help Google understand the structure of your website and make it easier to navigate for visitors. By using breadcrumbs, you can provide an easy way to ‘hop’ back to a certain section of your site or return to the home page.<\/p>\n\n\n\n
Breadcrumbs usually appear as a series of links at the top or bottom of the page. Each link corresponds to a different part of your website hierarchy. For instance, if you were on a product page, each link might be for the parent category, subcategory, and then finally the product itself. This is a great visual way for users to keep track of where they are in relation to other parts of your website.<\/p>\n\n\n\n
![\"Divi](\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/02\/Divi-breadcrumb-example.jpg\")
<\/figure>\n\n\n\nGoogle will also use breadcrumb navigation as part of its ranking algorithm when figuring out how well-structured a website is and how user-friendly it is. A strong breadcrumb structure helps Google understand which pages should rank higher than others, making it easier for those pages to be more visible in SERPs (search engine result pages).<\/p>\n\n\n\n
In addition, having breadcrumbs provides an easy way for users to jump back up one level in their journey without needing to use the ‘back’ button or hit the main menu again. This again contributes towards user experience; making it simpler and quicker for people to find what they need and navigate through your site with ease.<\/p>\n\n\n\n
Benefits of using breadcrumbs<\/h3>\n\n\n\n
- It’s easier for your visitors to navigate through your website.<\/li>
- Google uses breadcrumbs to crawl through your website<\/a> and make it easier to understand the hierarchy of your website.<\/li>
- Your visitors might use the breadcrumb and therefore stay longer on your website, this will reduce the bounce rate of your site.<\/li><\/ul>\n\n\n\n
Divi Breadcrumbs with free plugins<\/h2>\n\n\n\n
There are plenty of free options available to add breadcrumbs to your Divi website. The first option will be a Divi breadcrumbs module that is free.<\/p>\n\n\n\n
Likely you are already using an SEO plugin on your website. The two most popular SEO plugins Yoast and Rankmath both have the option to add breadcrumbs to your website.<\/p>\n\n\n\n
I will guide you for each of those how you can implement those breadcrumbs in Divi.<\/p>\n\n\n\n
And lastly, I have a free option for you with the popular NavXT Plugin.<\/p>\n\n\n\n
Divi breadcrumbs module<\/h3>\n\n\n\n
This is a free Divi breadcrumbs module that you can use with the Divi Builder.<\/p>\n\n\n\n
In your WordPress dashboard navigate to Plugins > Add New and search for the Divi breadcrumbs module by learnhowWP.<\/p>\n\n\n\n
![\"Divi](\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/02\/Divi-breadcrumbs-module.jpg\")
<\/figure>\n\n\n\nInstall and activate this plugin.<\/p>\n\n\n\n
Now go to a page or post where you want to add a breadcrumb. Enable the visual builder for that page and add a new module.<\/p>\n\n\n\n
You now have a Divi breadcrumbs module available.<\/p>\n\n\n\n
![\"Add](\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/02\/Add-breadcrumbs-module.jpg\")
<\/figure>\n\n\n\nWhen you place this breadcrumb module you can use its settings to style it.<\/p>\n\n\n\n
In case you want to use this for all your blog posts then you can add this module to your post template in the Divi Theme<\/a> Builder (assuming you are using one).<\/p>\n\n\n\n
Breadcrumb With Yoast SEO<\/h3>\n\n\n\n
Maybe you are already using Yoast SEO<\/a> on your site. If that is the case then you only need to add a shortcode to your page and you have breadcrumbs.<\/p>\n\n\n\n
After installing the plugin make sure breadcrumbs are enabled. Go to SEO > Search Appearance > Breadcrumbs<\/p>\n\n\n\n
You will also find some additional settings here for your breadcrumbs. You can change the separator and the prefix text.<\/p>\n\n\n\n
![\"Yoast](\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/02\/Yoast-SEO-breadcrumbs-settings.jpg\")
<\/figure><\/div>\n\n\n\nNow go to any page of your website and place a text module. Now place this shortcode in the text module:<\/p>\n\n\n\n
[wpseo_breadcrumb]<\/code><\/pre>\n\n\n\n![\"Placing](\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/02\/Placing-Yoast-SEO-breadcrumb-shortcode-in-Divi.jpg\")
<\/figure><\/div>\n\n\n\nYou can style the breadcrumb text with the text module settings in the design tab.<\/p>\n\n\n\n
Breadcrumb With Rank Math<\/h3>\n\n\n\n
To enable breadcrumbs in Rank Math<\/a> go to Rank Math > General Settings and enable the breadcrumbs function.<\/p>\n\n\n\n
![\"Rank](\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/02\/Rank-Math-breadcrumbs-settings.jpg\")
<\/figure><\/div>\n\n\n\nHere you will find more options for your breadcrumbs. You can change the separator character and the homepage label text.<\/p>\n\n\n\n
When the breadcrumb is enabled go to any of your pages and place a text module. In the text module place this shortcode:<\/p>\n\n\n\n
[rank_math_breadcrumb]<\/code><\/pre>\n\n\n\n![\"Placing](\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/02\/Placing-Rank-Math-breadcrumb-shortcode-in-Divi.jpg\")
<\/figure><\/div>\n\n\n\nYou can style the breadcrumb text further with the settings from the text module.<\/p>\n\n\n\n
Breadcrumb With NavXT Plugin<\/h3>\n\n\n\n
Navxt<\/a> is is a popular plugin for adding breadcrumbs to your website. In your WordPress dashboard navigate to Plugins > Add New and search for the Breadcrumb NavXT plugin by John Havlik.<\/p>\n\n\n\n
![\"Breadcumb](\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/02\/Breadcumb-Navxt.jpg\")
<\/figure>\n\n\n\nInstall and activate it.<\/p>\n\n\n\n
This plugin does not work with a shortcode but you can do this with a widget and place it anywhere on your site. First, go to Appearance > Widgets and create a new sidebar.<\/p>\n\n\n\n
![\"Create](\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/02\/Create-a-new-sidebar.jpg\")
<\/figure><\/div>\n\n\n\nYou might need to refresh your page after creating the sidebar in order to see it.<\/p>\n\n\n\n
After that place the Breadcrumb NavXT widget in this sidebar.<\/p>\n\n\n\n
![\"Add](\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/02\/Add-a-breadcrumb-widget-to-the-sidebar.jpg\")
<\/figure>\n\n\n\nGo to any of your pages and place the sidebar module. In the widget area choose your just created sidebar.<\/p>\n\n\n\n
![\"Placing](\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/02\/Placing-the-widget-with-breadcrumb-NavXT.jpg\")
<\/figure><\/div>\n\n\n\nBreadcrumb navXT comes with tons of options which you can find in Settings > Breadcrumb NavXT.<\/p>\n\n\n\n
Breadcrumbs with Divi premium plugins<\/h2>\n\n\n\n
There are many options to add Divi breadcrumbs to your website. Because we are using the Divi Builder plugin<\/a> I will start with the Divi modules.<\/p>\n\n\n\n
The first option is a free Divi plugin and the other 3 are paid Divi plugins but they come with tons of more modules.<\/p>\n\n\n\n
Divi Booster breadcrumbs module<\/h3>\n\n\n\n
With the Divi Breadcrumbs Module by Divi Booster<\/a>, you will get access to a new breadcrumbs module in the Divi Builder.<\/p>\n\n\n\n
The Divi Breadcrumbs Module allows you to easily create breadcrumb links to allow visitors to your website to easily navigate between pages.<\/p>\n\n\n\n
The module automatically generates breadcrumb links for each page, providing a semantic markup for improved search engine optimization (SEO) of the website.<\/p>\n\n\n\n
You can customize the home link text and icon, as well as adjust the style options. With Divi Breadcrumbs, you can add breadcrumbs either to individual pages or globally across your entire website.<\/p>\n\n\n\n
![\"divi](\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/02\/divi-booster-breadcrumbs-module-examples.jpg\")
<\/figure>\n\n\n\nThe module lets you generate breadcrumbs from the site structure or from an existing WordPress menu that you may have already created.<\/p>\n\n\n
\n\nSee the Plugin<\/a>\n\n<\/div>\n\n\nDivi Supreme<\/h3>\n\n\n\n
Divi Supreme<\/a> is the most popular Divi plugin<\/a> on the Elegant Themes marketplace and comes with over 50+ Divi modules.<\/p>\n\n\n\n
One of those modules is a Divi breadcrumbs module, and with this module, you can easily add breadcrumbs and style them on your Divi website.<\/p>\n\n\n\n
![\"Divi](\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/02\/Divi-supreme-breadcrumbs-examples-1024x605.png\")
<\/figure>\n\n\n - Your visitors might use the breadcrumb and therefore stay longer on your website, this will reduce the bounce rate of your site.<\/li><\/ul>\n\n\n\n
- Divi Supreme<\/a><\/li>
- Yoast SEO plugin<\/a><\/li>
- Divi Breadcrumbs with free plugins<\/a>
![\"Divi](\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/02\/Divi-Plus-breadcrumb-module.jpg\")
<\/figure>\n\n\n\n