Ad Code

What are Breadcrumbs? Definition, types, and how to make it

Table of Contents: [Show]

    What are Breadcrumbs

    On the website, there is a term called breadcrumbs. Indeed, this term is quite ambiguous because if we translate it it will be interpreted as crumbs of bread which have absolutely no connection with the website.

    The term breadcrumbs originally took philosophy from the story of Hansel and Gretel, one of the things that is remembered in the story is when Hansel and Gretel use breadcrumbs or "breadcrumbs" to guide their way home. This philosophy is taken where breadcrumbs have a role to help navigate website links.

    Want to know more about what breadcrumbs are? What are the benefits and their relation to SEO? What types are there? Until how do you make breadcrumbs? Check out this article to find out about this.

    What are Breadcrumbs?

    Breadcrumbs are small navigation on website pages that are useful for helping users and Google find out the structure of your website. Breadcrumbs are shaped like small text containing website page links, generally breadcrumbs can be found at the top of the website or just below the navigation section.

    The following is an example of the location of the breadcrumbs on the .Best Buy website.

    Breadcrumbs can be likened to a map that is displayed in public places such as malls and zoos. When you get lost, you will immediately visit the location of the map to find out where you are. Breadcrumbs are similar, breadcrumbs help you find out where you are on the website.

    This makes breadcrumbs very useful, while breadcrumbs are also important for SEO. Next is a more in-depth explanation of the benefits of breadcrumbs.

    Benefits of Breadcrumbs

    1. Optimizing Website SEO

    Breadcrumbs are an advantage in terms of getting rankings on search engines, this is because Google has a tendency to prioritize websites that have breadcrumbs. Breadcrumbs play a role where breadcrumbs will tell Google how to structure your website.

    This element will later help search engine bots when crawling and indexing. Bots will use breadcrumbs to collect information about your website. Google will also display the breadcrumbs structure in search results to categorize information on the website page.

    2. Improve User Experience

    Breadcrumbs help users to navigate your website, this means the user will be very helpful when exploring the website. Especially for users who are visiting the website for the first time, a website that is not well organized plus does not have breadcrumbs will cause confusion and cause them to want to leave.

    Having breadcrumbs will make it easier for new users and make them want to continue exploring your website.

    3. Minimizing Bounce Rate

    The bounce rate is the percentage of visitors who come to your website, then leave the website without opening another page or making other interactions. Breadcrumbs have a role to help navigation which can then improve the user experience of visitors.

    The existence of breadcrumbs that facilitate the process of browsing the website will reduce the tendency of users to leave the website.

    Types of Breadcrumbs

    Breadcrumbs have many types, but there are 3 main types to know, the 3 types of breadcrumbs are as follows:

    1. Hierarchy-based Breadcrumbs

    Type of breadcrumbs with navigation that tells you you are in a website structure and tells the flow to return to the previous page. These breadcrumbs are the most commonly used breadcrumbs. Here's an example of a hierarchy-based breadcrumbs:

    Home > Hosting > WordPress Hosting

    2. Attribute-based Breadcrumbs

    This type of dynamic breadcrumbs where breadcrumbs are provided based on the page you have clicked on. This type of breadcrumbs can generally be found on e-commerce websites.

    Home > Domain > Domain.ID > Domain.ASIA > Premium Domain

    3. History-based Breadcrumbs

    This type of breadcrumbs will show traces according to what you have done while browsing the website. These breadcrumbs are clickable so you can return to the page you were on before.

    Home > Hosting > Design > Logo Design > Domain

    How to Make Breadcrumbs

    Through the discussion above you have understood the basics of breadcrumbs, starting from the meaning, benefits and importance of having breadcrumbs, as well as the types of breadcrumbs that exist. The next thing you need to know is how to make breadcrumbs.

    Making breadcrumbs tends not to be difficult, it's just that you need to install certain software. Here are some of the software in question and how do you make breadcrumbs:

    1. Using Yoast SEO

    Using Yoast SEO

    oast SEO is one of the SEO plugins on WordPress. This plugin has various SEO features that you can use, one of which is for breadcrumbs. Next, here are the steps for making breadcrumbs using this software:

    • Enter the website template script.
    • Choose one of the menus among single.php, page.php, or header.php in the template.
    • Next, enter the script as follows:


    if (function_exists(‘yoast_breadcrumb’)){

    yoast_breadcrumbs(‘<p id=”breadcrumbs”>’,’</p>’);



    • After writing the script, do a save or update, on the template.
    • Then, go to your WordPress website and login.
    • Scroll down and select the "SEO" menu, then select "Search Appearance", and select the "Breadcrumbs" menu.
    • Finally, select the "Enabled" menu.

    2. Using the NavXT Plugin

    The NavXT plugin is one of the software that tends to be easy to learn, this plugin is also free to use. Before you use the NavXT plugin, you need to backup your website first. As for how to make breadcrumbs using this software, namely:

    • First enter the WordPress plugin menu and select add new.
    • Then, how to and install NavXT breadcrumbs and activate it.
    • Next, go to the WordPress template editor section and select the "Appearance" menu then select "Theme Editor".
    • The next step, please go to the header theme (header.php) and enter the following script:

    <div class=”breadcrumbs” typeof=”BreadcrumbList” vocab=””>







    • Then, do the save.
    • Enter the plugin menu then breadcrumbs, then NavXT, settings.
    • Finally, do the customization according to the needs of your website.

    3. Using WordPress Themes That Can Support Breadcrumbs

    This last method is different from the previous 2 methods, this method tends to be simpler to do. All you need to do is look for themes that support the breadcrumbs feature. Generally, templates such as those for online store needs and magazine blogs already have the standard breadcrumbs navigation feature.

    There are several examples of WordPress templates that support breadcrumbs, namely: Pixwell, Goodlife, Motive, Urban Mag, Gloria, SmartMag, and so on. Now that you know several ways to make breadcrumbs, please specify which method is the easiest for you and according to your abilities.

    Common Mistakes When Using Breadcrumbs

    Now you know the importance of breadcrumbs and how to use them on your website. However, that doesn't mean you can just use breadcrumbs, there are some common mistakes that someone makes when using breadcrumbs, while these mistakes include:

    1. Using Breadcrumbs When Not Needed

    A common mistake that occurs when using breadcrumbs is when breadcrumbs are used without any benefit. The following is an example of what this means:

    In the example above, the website confuses its users by providing too many navigation options. In the example there are 3 navigation options namely primary navigation, breadcrumbs, and secondary navigation. Then, there is also an error where the navigation options are located close together, which confuses the user to choose which navigation to use.

    This example shows the opposite of the function of the breadcrumbs that should be, where breadcrumbs should make it easier for users to explore websites, not make it difficult.

    2. Using Breadcrumbs As Main Navigation

    Breadcrumbs function to help you explore a website. However, it will be difficult if the website only relies on breadcrumbs as the main navigation tool. Optimally, breadcrumbs are not used as the main navigation tool and only some navigation aids.

    When there is no main navigation or a menu in the body of the page, switching from one page to another becomes more complicated. For example, you have to press the back button on the browser when accessing the main menu, because breadcrumbs are the only navigation tool that can be used.

    3. Using Breadcrumbs When a Page Has Many Categories

    Breadcrumbs have a linear structure so when you use them it will be difficult if your pages cannot be classified into neat categories. Using breadcrumbs really depends on what your website's hierarchical design looks like.

    If lower-level pages are (or could be placed) in more than one parent category, the breadcrumbs are likely to be ineffective, inaccurate, and confusing to users. So, with this, the question has been answered, what are breadcrumbs? The thing that's left for you to do now is use the knowledge you've gained to apply to the website you have.

    Post a Comment


    Close Menu