{"id":45555,"date":"2021-12-23T11:46:56","date_gmt":"2021-12-23T17:46:56","guid":{"rendered":"https:\/\/getflywheel.com\/layout\/?p=45555"},"modified":"2023-10-24T14:06:39","modified_gmt":"2023-10-24T19:06:39","slug":"how-to-add-breadcrumb-navigation","status":"publish","type":"resource","link":"https:\/\/wpengine.com\/case-studies\/resources\/how-to-add-breadcrumb-navigation\/","title":{"rendered":"How to Add Breadcrumb Navigation in WordPress"},"content":{"rendered":"\n

This guest post was written by Syed Balkhi, founder of WordPress publication WPBeginner<\/a>.<\/em><\/p>\n\n\n\n

A powerful way to improve your user experience is to help your audience navigate your website<\/a> more easily. Breadcrumb Navigation is a powerful tool that can improve how people interact with your content. <\/p>\n\n\n\n

It\u2019s a way for users to know where they are in relation to your homepage. When you add breadcrumb navigation to your website, it also appears in search results, creating a more appealing link that will generate more clicks on search engines.<\/p>\n\n\n\n

In this post, I\u2019ll share how you can easily display breadcrumb navigation links on your WordPress website. Let\u2019s dive in!<\/p>\n\n\n\n

What is Breadcrumb Navigation?<\/h2>\n\n\n\n

We all know the story of Hansel and Gretel and how the children laid a path of breadcrumbs so that they could find their way back home. <\/p>\n\n\n\n

The idea of breadcrumb navigation works the same way. <\/p>\n\n\n\n

Breadcrumbs on websites are a trail of links that show you which page you\u2019re on in relation to the home page. It\u2019s a hierarchical navigation menu that\u2019s separate from your main menu. <\/p>\n\n\n\n

When set up correctly, it\u2019ll appear on your web pages and also on Google\u2019s search results page.<\/p>\n\n\n\n

\"\"
\"\"A search for men\u2019s sandals gave a result where you can clearly see breadcrumb navigation in action<\/em><\/figcaption><\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Why Add Breadcrumb Navigation? <\/h2>\n\n\n\n

Have you ever landed on a product page and wanted to see what else is under the same category? <\/p>\n\n\n\n

Breadcrumb navigation allows people to move up a hierarchical chain of links. Instead of heading to the home page, then looking for the category of products, then clicking into the subcategories, a user can simply click on the breadcrumb link and go where they want. <\/p>\n\n\n\n

It\u2019s an additional helpful way for users to move through your site and to find what they need. <\/p>\n\n\n\n

A powerful added benefit is that it also helps search engines understand your website\u2019s structure and hierarchy. The more structured and easy-to-use your site looks, the better your chances of moving up in the rankings. <\/p>\n\n\n\n

Breadcrumb links also appear when Google displays a set of results. It makes your website stand out in a set of results and boosts your click-through rate. <\/p>\n\n\n\n

How to Add Breadcrumb Navigation to Your WordPress Site<\/h2>\n\n\n\n

Let\u2019s get down to business! You\u2019ve learned what breadcrumbs are and why they matter. <\/p>\n\n\n\n

Now, this post will lay out the best way to add breadcrumbs so that they appear and work properly on your WordPress site. <\/p>\n\n\n\n

All the suggestions in this post will help you set up your breadcrumb navigation with schema markup. Schema<\/a> refers to code that helps search engines like Google to know what your website content is about easily. <\/p>\n\n\n\n

Have you ever seen search results for recipes where details like cooking time, ratings, cuisines, and more appear with a website link? That\u2019s an example of schema markup in action, creating what\u2019s called a rich snippet<\/a>. It also helps to display breadcrumbs when a website appears in search results. <\/p>\n\n\n\n

\"\"
\"\"Searching for Yorkshire Pudding displays result panels where schema helps showcase details like ingredients and cooking times<\/em><\/figcaption><\/figure>\n\n\n\n

The following are some of the easiest and quickest ways to add breadcrumbs to your site. <\/p>\n\n\n\n

Use an SEO WordPress Plugin<\/h2>\n\n\n\n

The easiest way for you to add breadcrumb navigation is by using the AIOSEO<\/a> plugin. <\/p>\n\n\n\n

All in One SEO<\/strong> or the AIOSEO plugin is one of the best WordPress plugins<\/a> to boost your website\u2019s SEO. It includes breadcrumbs as a feature to help you make your website easy to navigate.<\/p>\n\n\n\n

You can also consider opting for a premium version in the future to get more features, but starting with the free version will provide you with a solid grasp on the basics. First, download and activate<\/a> your AIOSEO plugin.<\/p>\n\n\n\n

Once you\u2019ve activated it, follow the plugin\u2019s initial setup wizard. You then need to visit the General Settings<\/strong> page from the All in One SEO plugin on your dashboard. <\/p>\n\n\n\n

Now that you\u2019re at the General Settings page, click over to the Breadcrumbs tab.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

When you first add AIOSEO and run through the setup, the plugin automatically adds breadcrumb schema to your site code. <\/p>\n\n\n\n

To display breadcrumb navigation links for your users, toggle on Enable Breadcrumbs<\/strong>. You\u2019ll then be able to fine-tune how your breadcrumbs will appear on your site. <\/p>\n\n\n\n

There are four different ways to display breadcrumb navigation on your WordPress site. <\/p>\n\n\n\n

They are:<\/p>\n\n\n\n

    \n
  1. Adding breadcrumb navigation with shortcode<\/a><\/li>\n\n\n\n
  2. Using the Gutenberg block<\/a><\/li>\n\n\n\n
  3. Adding a widget<\/a><\/li>\n\n\n\n
  4. Adding the breadcrumb navigation code<\/a><\/li>\n<\/ol>\n\n\n\n

    We\u2019ll quickly break down how to use each of these options so you\u2019ll be able to work with the one that best suits your needs.  <\/p>\n\n\n\n

    1. Use Shortcode to Add Breadcrumb Navigation<\/strong><\/h4>\n\n\n\n

    If you want to add breadcrumb navigation with a shortcode on your page or post, then all you have to do is add the following code on the page. <\/p>\n\n\n\n

    [aioseo_breadcrumbs]<\/pre>\n\n\n\n
    This small piece of code will automatically convert into the shortcode block.<\/p>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    Save and preview your post to see what it looks like. The image below shows how your breadcrumb shortcode will display on the front end of your WordPress site.<\/p>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    2. Add Breadcrumb Navigation with the Gutenberg Block<\/strong><\/h4>\n\n\n\n
    The AIOSEO plugin makes it possible for you to simply insert a Gutenberg blog and add breadcrumb links. <\/p>\n\n\n\n
    Create a new post or page and click on the button to add a block. Search for AIOSEO – Breadcrumbs <\/strong>and click on it. Your breadcrumb navigation will appear on your page. Just like that!<\/p>\n\n\n\n
    \n
    \"\"<\/figure>\n\n\n\n
    \"\"<\/figure>\n
    Adding breadcrumbs through a Gutenberg block<\/em><\/figcaption><\/figure>\n\n\n\n
    3. Insert Breadcrumb Navigation Using a Widget<\/strong><\/h4>\n\n\n\n
    Do you want to display breadcrumbs automatically for all your posts or pages? <\/p>\n\n\n\n
    To do this, use the widget option. All you have to do is go to Appearance \u00bb Widgets <\/strong>on your dashboard. Then add the \u2018AIOSEO \u2013 Breadcrumbs\u2019 widget to the sidebar.<\/p>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    Add a new title or leave the field blank, then press \u2018Save.\u2019 Now when you go to your website, you\u2019ll see the breadcrumb navigation on all your posts and pages that have a sidebar. <\/p>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    4. Add Breadcrumb Navigation with Code<\/strong><\/h4>\n\n\n\n
    With this method, you have a lot more control over where your breadcrumb navigation appears. However, you\u2019ll need to add code to your WordPress site\u2019s theme files to do this. <\/p>\n\n\n\n
    If you have some experience with managing WordPress and coding, then you can try this option. <\/p>\n\n\n\n
    First, decide where you want your breadcrumbs links to appear. You\u2019ll have to add code to your WordPress theme\u2019s Template Files. <\/p>\n\n\n\n
    So, based on where you want to put your breadcrumb navigation, you\u2019ll have to pick the right template file to insert your code.<\/p>\n\n\n\n
    This cheat sheet<\/strong><\/a> will help you figure out which files to edit in your WordPress theme. <\/p>\n\n\n\n
    Next, edit your theme file using an FTP client. Add this code to where you want the breadcrumb navigation links to display.<\/p>\n\n\n\n
    <?php if( function_exists( 'aioseo_breadcrumbs' ) ) aioseo_breadcrumbs(); ?><\/pre>\n\n\n\n
    Remember to save your changes and go back to your website to see what it looks like. <\/p>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    Conclusion<\/h2>\n\n\n\n
    That\u2019s all you need to find the best way to add breadcrumb navigation to your WordPress site. <\/p>\n\n\n\n
    With AIOSEO, you have the option to not only add breadcrumbs for free and in multiple ways but to also carry out other technical SEO tasks. <\/p>\n\n\n\n
    Breadcrumb navigation won\u2019t just create a better user experience, you\u2019ll also show Google and other search engines that you have a well-made website. <\/p>\n\n\n\n
    And because only about 10 million<\/a> of the nearly 2 billion sites online are using Schema, you\u2019ll likely see higher rankings and better outcomes like more traffic and conversions<\/a>. So, take some time to improve your website in the new year by simply adding breadcrumb navigation!<\/p>\n","protected":false},"excerpt":{"rendered":"
    This guest post was written by Syed Balkhi, founder of WordPress publication WPBeginner. A powerful way to improve your user experience is to help your audience navigate your website more easily. Breadcrumb Navigation is a powerful tool that can improve how people interact with your content.  It\u2019s a way for users to know where they…<\/span><\/span><\/p>\n","protected":false},"author":1,"featured_media":147255,"template":"","resource-topic":[912],"resource-role":[896],"resource-type":[916],"class_list":["post-45555","resource","type-resource","status-publish","has-post-thumbnail","hentry"],"yoast_head":"\nHow to Add Breadcrumb Navigation in WordPress<\/title>\n<meta name=\"description\" content=\"Breadcrumb navigation can help you track who is reading your content. Read on to see how to quickly add this navigation.\" \/>\n<meta name=\"robots\" content=\"noindex, follow\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Add Breadcrumb Navigation in WordPress\" \/>\n<meta property=\"og:description\" content=\"Breadcrumb navigation can help you track who is reading your content. Read on to see how to quickly add this navigation.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/wpengine.com\/case-studies\/resources\/how-to-add-breadcrumb-navigation\/\" \/>\n<meta property=\"og:site_name\" content=\"WP Engine\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/wpengine\" \/>\n<meta property=\"article:modified_time\" content=\"2023-10-24T19:06:39+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2021\/12\/breadcrumb-navigation_1200x627.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"627\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2021\/12\/breadcrumb-navigation_1200x627.png\" \/>\n<meta name=\"twitter:site\" content=\"@wpengine\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/how-to-add-breadcrumb-navigation\/\",\"url\":\"https:\/\/wpengine.com\/case-studies\/resources\/how-to-add-breadcrumb-navigation\/\",\"name\":\"How to Add Breadcrumb Navigation in WordPress\",\"isPartOf\":{\"@id\":\"https:\/\/wpengine.com\/case-studies\/#website\"},\"datePublished\":\"2021-12-23T17:46:56+00:00\",\"dateModified\":\"2023-10-24T19:06:39+00:00\",\"description\":\"Breadcrumb navigation can help you track who is reading your content. Read on to see how to quickly add this navigation.\",\"breadcrumb\":{\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/how-to-add-breadcrumb-navigation\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/wpengine.com\/case-studies\/resources\/how-to-add-breadcrumb-navigation\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/how-to-add-breadcrumb-navigation\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/wpengine.com\/case-studies\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Resources\",\"item\":\"https:\/\/wpengine.com\/case-studies\/resources\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Add Breadcrumb Navigation in WordPress\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#website\",\"url\":\"https:\/\/wpengine.com\/case-studies\/\",\"name\":\"WP Engine\",\"description\":\"Managed Hosting for WordPress\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/wpengine.com\/case-studies\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/f5301455463371a10d1fc290e9ad0085\",\"name\":\"WP Engine\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g\",\"caption\":\"WP Engine\"},\"sameAs\":[\"https:\/\/wpengine.com\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Add Breadcrumb Navigation in WordPress","description":"Breadcrumb navigation can help you track who is reading your content. Read on to see how to quickly add this navigation.","robots":{"index":"noindex","follow":"follow"},"og_locale":"en_US","og_type":"article","og_title":"How to Add Breadcrumb Navigation in WordPress","og_description":"Breadcrumb navigation can help you track who is reading your content. Read on to see how to quickly add this navigation.","og_url":"https:\/\/wpengine.com\/case-studies\/resources\/how-to-add-breadcrumb-navigation\/","og_site_name":"WP Engine","article_publisher":"https:\/\/www.facebook.com\/wpengine","article_modified_time":"2023-10-24T19:06:39+00:00","og_image":[{"width":1200,"height":627,"url":"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2021\/12\/breadcrumb-navigation_1200x627.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_image":"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2021\/12\/breadcrumb-navigation_1200x627.png","twitter_site":"@wpengine","twitter_misc":{"Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/wpengine.com\/case-studies\/resources\/how-to-add-breadcrumb-navigation\/","url":"https:\/\/wpengine.com\/case-studies\/resources\/how-to-add-breadcrumb-navigation\/","name":"How to Add Breadcrumb Navigation in WordPress","isPartOf":{"@id":"https:\/\/wpengine.com\/case-studies\/#website"},"datePublished":"2021-12-23T17:46:56+00:00","dateModified":"2023-10-24T19:06:39+00:00","description":"Breadcrumb navigation can help you track who is reading your content. Read on to see how to quickly add this navigation.","breadcrumb":{"@id":"https:\/\/wpengine.com\/case-studies\/resources\/how-to-add-breadcrumb-navigation\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/wpengine.com\/case-studies\/resources\/how-to-add-breadcrumb-navigation\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/wpengine.com\/case-studies\/resources\/how-to-add-breadcrumb-navigation\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/wpengine.com\/case-studies\/"},{"@type":"ListItem","position":2,"name":"Resources","item":"https:\/\/wpengine.com\/case-studies\/resources\/"},{"@type":"ListItem","position":3,"name":"How to Add Breadcrumb Navigation in WordPress"}]},{"@type":"WebSite","@id":"https:\/\/wpengine.com\/case-studies\/#website","url":"https:\/\/wpengine.com\/case-studies\/","name":"WP Engine","description":"Managed Hosting for WordPress","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/wpengine.com\/case-studies\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/f5301455463371a10d1fc290e9ad0085","name":"WP Engine","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g","caption":"WP Engine"},"sameAs":["https:\/\/wpengine.com"]}]}},"acf":[],"grid_image_url":"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2021\/12\/breadcrumb-navigation_343x245.png","media-type":{"term_id":916,"name":"Article","slug":"article"},"role":"<strong>Roles:<\/strong> Developer","topic":"<strong>Topics:<\/strong> Performance","_links":{"self":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource\/45555","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource"}],"about":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/types\/resource"}],"author":[{"embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/users\/1"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/media\/147255"}],"wp:attachment":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/media?parent=45555"}],"wp:term":[{"taxonomy":"resource-topic","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-topic?post=45555"},{"taxonomy":"resource-role","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-role?post=45555"},{"taxonomy":"resource-type","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-type?post=45555"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}