{"id":441,"date":"2024-06-23T17:17:38","date_gmt":"2024-06-23T17:17:38","guid":{"rendered":"https:\/\/www.yellowfalconmedia.com\/blog\/2024\/06\/23\/wordpress-breadcrumbs-how-to-display-them-on-your-site-wordpress-com\/"},"modified":"2024-06-23T17:17:38","modified_gmt":"2024-06-23T17:17:38","slug":"wordpress-breadcrumbs-how-to-display-them-on-your-site-wordpress-com","status":"publish","type":"post","link":"https:\/\/www.yellowfalconmedia.com\/blog\/2024\/06\/23\/wordpress-breadcrumbs-how-to-display-them-on-your-site-wordpress-com\/","title":{"rendered":"WordPress Breadcrumbs: How to Display Them on Your Site &#8211; WordPress.com"},"content":{"rendered":"<p>Have you ever navigated to a product on a website and then wanted to see other options from the same category? One of the quickest ways to do this is to click on the next level up in the site\u2019s breadcrumb navigation.\u00a0<br \/>For example, if you\u2019re looking for a lawn sprinkler, you might decide to see more choices. In this breadcrumb navigation from an Amazon search, you could click on Sprinklers to see more water sprinkler products or work your way up higher in the chain by clicking on Watering Equipment.<br \/>As a <a href=\"https:\/\/wordpress.com\/go\/digital-marketing\/becoming-a-blogger-11-tips-for-success\/\">prolific blogger<\/a> or online store manager, you probably like to keep your content or products organized into categories and subcategories. However, having too many sections on your website can confuse your readers and leave them feeling a little lost.\u00a0<br \/>This is where breadcrumb navigation comes in. Breadcrumbs display a trail of links, enabling users to keep track of their movements within your site. It also helps them return to previous pages easily.<br \/>In this post, we\u2019ll take a closer look at WordPress breadcrumb navigation links and how they can improve your <a href=\"https:\/\/wordpress.com\/go\/tutorials\/give-your-visitors-a-good-user-experience\/\">User Experience (UX)<\/a> and <a href=\"https:\/\/wordpress.com\/go\/tutorials\/local-seo-tips\/\">Search Engine Optimization (SEO)<\/a>. We\u2019ll then show you a few different ways to add these links to your WordPress.com site. Let\u2019s get started!<br \/>Breadcrumb navigation is a design element that displays the hierarchy of a set of pages on a website. This feature can be handy for sites that publish content on different topics such as educational blogs, as well as <a href=\"https:\/\/wordpress.com\/go\/digital-marketing\/wordpress-ecommerce-get-started\/\">online shops<\/a> that stock a variety of products:\u00a0<br \/>It\u2019s important to note that breadcrumb navigation serves a slightly different purpose than <a href=\"https:\/\/wordpress.com\/go\/web-design\/website-navigation-how-to-design-an-intuitive-experience-for-visitors\/\">the main navigation menu<\/a>.<br \/>Breadcrumb navigation is a trail of links that shows visitors where they are on your website and helps them easily retrace their steps. This trail is the inspiration behind naming this type of navigation as \u201cbreadcrumbs\u201d.<br \/>When a user has finished reading a post on your blog, they can easily return to the previous page (the one that led them to that specific article on your website). They can do this by clicking on the corresponding breadcrumb link. Doing this saves them from locating the main menu and trying to remember where they were on your website before they stumbled upon that post.\u00a0<br \/>For instance, a travel website may have a breadcrumb navigation menu that looks something like this:<br \/><em><strong>USA &gt; New York &gt; Things to do &gt; Free attractions<\/strong><\/em><br \/>Once a reader has checked out all the free attractions in New York, they may decide to head back to the \u201cThings to do\u201d page to look at other types of activities. If they visit a new page, the breadcrumb menu may look a little different:<br \/><em><strong>USA &gt; New York &gt; Things to do &gt; Outdoor activities<\/strong><\/em><br \/>As we can see, breadcrumb navigation can <a href=\"https:\/\/wordpress.com\/go\/tutorials\/tips-to-improve-your-sites-ux-in-2022\/\">enhance the UX<\/a> of your website. It does this by making it super easy for readers to navigate their way around your content.\u00a0<br \/>Moreover, this feature can also help you improve your SEO. Search engines like Google will display your breadcrumb links in the results:<br \/>The breadcrumb links can help boost your visibility in the Search Engine Results Pages (SERPs). In turn, they can result in a <a href=\"https:\/\/wordpress.com\/go\/website-building\/improve-your-google-click-through-rate\/\">higher click-through rate<\/a>. However, you\u2019ll need to ensure that your breadcrumb navigation links are set up correctly for this to work.\u00a0<br \/>Now that we\u2019ve covered the importance of having breadcrumb navigation links on your WordPress site, let\u2019s look at a few ways you can incorporate them into your content.<br \/>If you\u2019re a WordPress.com user, you\u2019ll need to use the <a href=\"https:\/\/wordpress.com\/pricing\/\">plugin-enabled plan<\/a> to access the plugins mentioned in this tutorial.\u00a0<br \/>One of the easiest ways to add breadcrumb navigation to your website is by using a free plugin. Let\u2019s look at two popular options: <a href=\"https:\/\/wordpress.com\/plugins\/all-in-one-seo-pack\/\">All in One SEO<\/a> and <a href=\"https:\/\/wordpress.com\/plugins\/breadcrumb-navxt\/\">Breadcrumb NavXt<\/a>.\u00a0<br \/><a href=\"https:\/\/wordpress.com\/plugins\/all-in-one-seo-pack\/\">All in One SEO<\/a> (AIOSEO) is one of the most <a href=\"https:\/\/wordpress.com\/go\/tutorials\/do-you-need-to-use-seo-plugins-on-your-wordpress-com-site\/\">powerful SEO plugins<\/a> on the WordPress market:<br \/>This plugin is packed with features to help boost your website\u2019s rankings in search engines. It includes <a href=\"https:\/\/wordpress.com\/go\/digital-marketing\/boost-your-search-results-with-schema-markup-in-wordpress\/\">schema markup<\/a>, which is data that you can add to your site so search engines can display your pages in a more informative way. For instance, it lets you enable rich snippets and breadcrumbs site links.\u00a0<br \/>To get started, head to <em>Plugins<\/em> &gt; <em>Add New<\/em> in your WordPress.com dashboard and search for \u201cAll in One SEO\u201d. Then, click on <em>Install Now<\/em>, followed by <em>Activate<\/em>:\u00a0<br \/>Doing so will take you to the plugin\u2019s setup wizard. Go ahead and click on <em>Let\u2019s Get Started<\/em>:<br \/>First, you\u2019ll be asked to select a category that best describes your website:<br \/>Here, you can define what your home page will look like in the SERPs. For example, you may want to ensure that your site title and tagline will be visible:<br \/>When you\u2019re ready, click on <em>Save and Continue<\/em>. On the next page, you\u2019ll need to provide details about your website and links to your <a href=\"https:\/\/wordpress.com\/go\/tutorials\/how-to-create-a-social-media-website\/\">social media<\/a> pages. You can skip this step and fill in this information later if you prefer.\u00a0<br \/>You\u2019ll also need to select the SEO features that you want to add to your site:<br \/>Once you\u2019ve finished the setup, head back to your WordPress.com dashboard and navigate to <em>All in One SEO<\/em> &gt; <em>General Settings<\/em>. Then, select <em>Breadcrumbs<\/em> from the menu:<br \/>By default, AIOSEO adds breadcrumbs to your site\u2019s schema markup. It also gives you four ways to display breadcrumb navigation trails on your website.<br \/>If you select the <em>Shortcode<\/em> option, you\u2019ll enter the following code where you want to display the breadcrumbs:<br \/><div class=\"aioseo-breadcrumbs\"><span class=\"aioseo-breadcrumb\">\n\tHome\n<\/span><\/div><br \/>If you\u2019re using the <a href=\"https:\/\/wordpress.com\/go\/web-design\/the-block-editor-and-the-future-of-wordpress-themes\/\">Block Editor<\/a>, you can simply add the <em>Shortcode<\/em> block into your post and paste the code there:<br \/>Alternatively, you can display your breadcrumb navigation via the dedicated Gutenberg Block. To do this, you\u2019ll simply have to insert the <em>AIOSEO &#8211; Breadcrumbs<\/em> block into your post:<br \/>The above methods enable you to add the breadcrumbs links to individual pages or posts. However, you may want to automatically add them to every page on your website. If so, the <em>AIOSEO &#8211; breadcrumbs<\/em> widget can come in handy.\u00a0<br \/>To add it to your site, go to <em>Appearance<\/em> &gt; <em>Widgets<\/em>. In the Customizer, select the <em>Widgets <\/em>option, locate <em>AIOSEO &#8211; breadcrumbs<\/em>, and add it to the sidebar:<br \/>Another way to add breadcrumbs navigation links to your site is by <a href=\"https:\/\/wordpress.com\/go\/website-building\/what-is-a-shortcode\/\">using code<\/a>. However, this method may be a bit challenging as it involves editing your WordPress theme files. Therefore, we recommend that you use one of the other methods described above.\u00a0<br \/>The AIOSEO plugin also enables you to modify the appearance of your breadcrumbs links in search results. For instance, you can change the separator and the homepage label to something different:<br \/>Additionally, you can customize the labels for your archives page, the results page, and <a href=\"https:\/\/wordpress.com\/go\/website-building\/404-vs-301-what-are-they-and-how-do-you-fix-them\/\">404 errors<\/a>:<br \/>When you\u2019re ready, click on the <em>Save Changes<\/em> button. That\u2019s it \u2014 breadcrumb navigation is now fully set up on your website!<br \/>While AIOSEO is a powerful tool, you may already be using an SEO plugin on your website. If that\u2019s the case, check to see if your SEO plugin has a breadcrumb option. If not, you might want to opt for a plugin that is specifically dedicated to breadcrumb navigation.<br \/>One such tool you can use is <a href=\"https:\/\/wordpress.com\/plugins\/breadcrumb-navxt\/\">Breadcrumb NavXT<\/a>. This plugin generates breadcrumb trails for your WordPress site. It also enables you to customize them to suit your needs and preferences.<br \/>Once you\u2019ve installed and activated the plugin, go to <em>Settings <\/em>&gt; <em>Breadcrumb NavXT<\/em> in your WordPress dashboard. Here you can configure the settings for different breadcrumb trails on your site:<br \/>For instance, you can change the separator that appears between breadcrumb links. You can also remove specific pages from the trail, such as your homepage or blog.\u00a0<br \/>If you head to the <em>Post Types<\/em> tab, you can alter the way that your blog posts appear in breadcrumb navigation:<br \/>For example, you can select the elements you want to display in the hierarchy of your posts, such as tags or categories. You can also adjust the breadcrumb trails for your media and projects.<br \/>Additionally, you can edit the appearance of breadcrumbs for your blog categories and tags. To access these settings, you\u2019ll need to click on the <em>Taxonomies<\/em> tab:<br \/>Finally, you can navigate to the <em>Miscellaneous<\/em> section to adjust the template for other types of breadcrumbs. For example, you can configure author archives, dates, and 404 errors.<br \/>To display the breadcrumbs on your site, navigate to <em>Appearance<\/em> &gt; <em>Widgets<\/em>. Then, select <em>Widgets<\/em> again from the menu. Here, you can add the Breadcrumb NavXT widget to <a href=\"https:\/\/wordpress.com\/go\/content-blogging\/what-is-a-sidebar\/\">your sidebar<\/a>:\u00a0<br \/>As you can see, Breadcrumb NavXT is a very straightforward tool. You can use it to show breadcrumb trails for different types of content on your site and customize it to meet your needs.<br \/>Some of our WordPress.com themes come with <a href=\"https:\/\/wordpress.com\/themes\/filter\/breadcrumb-navigation\">built-in breadcrumb navigation<\/a>. As such, you won\u2019t have to install a plugin to add this feature to your site. Let\u2019s look at a few themes that you can use from our repository.\u00a0<br \/>We designed <a href=\"https:\/\/wordpress.com\/theme\/textbook\/\">TextBook<\/a> specifically for schools, colleges, and other <a href=\"https:\/\/wordpress.com\/go\/website-building\/using-wordpress-com-for-school-projects-and-university-courses\/\">educational institutions<\/a>. However, you can use it for any type of website.\u00a0<br \/>The theme features an elaborate hierarchy of pages, as you can see at the top of this screenshot:<br \/>This makes TextBook an ideal choice for websites that cover a variety of topics or blogs that have content sorted into multiple categories and subcategories. The theme is also accessibility-ready and fully responsive.\u00a0<br \/>If you\u2019re looking for a clean, contemporary theme, then <a href=\"https:\/\/wordpress.com\/theme\/sequential\/\">Sequential<\/a> may be the right choice for you. It\u2019s a good fit for most websites, but it was designed mainly for <a href=\"https:\/\/wordpress.com\/go\/website-building\/online-business-model-basics\/\">online businesses<\/a>.\u00a0<br \/>Breadcrumb links are placed prominently on the page, which enables users to wander around your site easily:<br \/>The theme has a grid page template that displays child pages of the parent page in a professional format. This feature is perfect for <a href=\"https:\/\/wordpress.com\/go\/digital-marketing\/the-benefits-of-testimonials-6-tips-to-improve-your-marketing\/\">showcasing testimonials<\/a>, services, or case studies related to your business.\u00a0<br \/><a href=\"https:\/\/wordpress.com\/theme\/edin\/\">Edin<\/a> is a multipurpose and responsive theme for different business types. You may like to use it if you\u2019re looking for versatility and the ability to showcase full-width images via the homepage.\u00a0<br \/>Additionally, Edin enables you to activate breadcrumb navigation links on pages. You can access this setting by heading to <em>Theme Settings<\/em> in the Customizer. Then, posts and pages will automatically generate breadcrumbs at the top:<br \/>Moreover, the theme includes multiple page types, such as grid, full-width, and alternate sidebar options. Therefore, Edin could be an excellent choice for showing high-quality photography, contact forms, and <a href=\"https:\/\/wordpress.com\/go\/website-building\/case-studies-for-marketing-tell-stories-to-promote-your-brand\/\">case studies<\/a>.\u00a0<br \/>WordPress breadcrumbs enable your users to track their movements across your site. Using it, readers can easily retrace their steps and return to previous pages by clicking on the links within the breadcrumb trail. This feature not only improves the user experience of your site, but it can also help you boost your visibility in search engine results.\u00a0<br \/>In this post, we looked at two different ways you can add breadcrumb navigation to your WordPress website:<br \/>&nbsp;<br \/>We&#039;re a team of happiness engineers, developers, editors, and WordPress experts. Our team personally curates and serves up the best resources to help you no matter where you are in your blogging or website-building journey. At WordPress.com, our mission is to democratize publishing one website at a time. Create a free website or build a blog with ease on WordPress.com. Dozens of free, customizable, mobile-ready designs and themes.<br \/><a class=\"link__more\" href=\"https:\/\/wordpress.com\/go\/author\/wpcontentteam\/\">More by The WordPress.com Team<\/a><br \/>Whether you need a landing page or a full ecommerce site, an online learning academy or an interactive informational site for your business, we can build it for you.<br \/>Invent the world\u2019s greatest cat food, save a rainforest, start a needlepoint club. Whatever it is, it\u2019s going to need a website\u2014that\u2019s where we come in.<\/p>\n<p><a href=\"https:\/\/news.google.com\/rss\/articles\/CBMiTmh0dHBzOi8vd29yZHByZXNzLmNvbS9nby90dXRvcmlhbHMvaG93LXRvLWRpc3BsYXktYnJlYWRjcnVtYi1uYXZpZ2F0aW9uLWxpbmtzL9IBAA?oc=5\">source<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Have you ever navigated to a product on a website and then wanted to see other options from the same category? One of the quickest ways to do this is to click on the next level up in the site\u2019s breadcrumb navigation.\u00a0For example, if you\u2019re looking for a lawn sprinkler,&hellip;<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-441","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.yellowfalconmedia.com\/blog\/wp-json\/wp\/v2\/posts\/441","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.yellowfalconmedia.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.yellowfalconmedia.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.yellowfalconmedia.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.yellowfalconmedia.com\/blog\/wp-json\/wp\/v2\/comments?post=441"}],"version-history":[{"count":0,"href":"https:\/\/www.yellowfalconmedia.com\/blog\/wp-json\/wp\/v2\/posts\/441\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.yellowfalconmedia.com\/blog\/wp-json\/wp\/v2\/media?parent=441"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.yellowfalconmedia.com\/blog\/wp-json\/wp\/v2\/categories?post=441"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.yellowfalconmedia.com\/blog\/wp-json\/wp\/v2\/tags?post=441"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}