[Pos baru] How to Display Breadcrumb Navigation Links in WordPress (2 Ways)

Pos : How to Display Breadcrumb Navigation Links in WordPress (2 Ways)
URL : http://wordpress.com/2021/10/06/how-to-display-breadcrumb-navigation-links/
Ditulis : 6 Oktober 2021 pukul 1:00 pm
Penulis : The WordPress.com Team
Tag : Breadcrumbs, navigation
Kategori : How To

As a prolific blogger ( https://wordpress.com/go/digital-marketing/becoming-a-blogger-11-tips-for-success/ ) or online publisher, you probably like to keep your content organized into categories and subcategories. However, having too many sections on your website can confuse your readers and leave them feeling a little lost. 

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.

In this post, we'll take a closer look at breadcrumb navigation links and how they can improve your User Experience (UX) ( https://wordpress.com/go/solve/give-your-visitors-a-good-user-experience/ ) and Search Engine Optimization (SEO) ( https://wordpress.com/go/digital-marketing/local-seo-how-to-get-to-the-top-of-local-search-rankings/ ) . We'll then show you a few different ways to add these links to your WordPress.com site. Let's get started!

What Breadcrumb Navigation Links Are (And Why They're Important for Your WordPress Site)

Breadcrumb navigation is a design element that displays the hierarchy 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 online shops ( https://wordpress.com/go/ecommerce/wordpress-ecommerce-get-started/ ) that stock a variety of products: 

https://wpcom.files.wordpress.com/2021/10/website-using-breadcrumb-navigation_resize.jpg It's important to note that breadcrumb navigation serves a slightly different purpose than the main navigation menu ( https://wordpress.com/go/web-design/website-navigation-how-to-design-an-intuitive-experience-for-visitors/ ) . The latter enables users to navigate to other pages on your site. In contrast, breadcrumb navigation shows them where they are on your website and helps them retrace their steps (hence why they're referred to as "breadcrumbs").

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. 

For instance, a travel website may have a breadcrumb navigation menu that looks something like this:

USA > New York > Things to do > Free attractions

Once a reader has checked out all the free attractions in New York, they may decide to head back to the "Things to do" page to look at other types of activities. If they visit a new page, the breadcrumb menu may look a little different:

USA > New York > Things to do > Outdoor activities

As we can see, breadcrumb navigation can enhance the UX of your website. It does this by making it super easy for readers to navigate their way around your content. 

Moreover, this feature can also help you improve your SEO. Search engines like Google will display your breadcrumb links in the results:

https://wpcom.files.wordpress.com/2021/10/wordpress.com-navigation-links-example_resized.jpg The breadcrumb links can help boost your visibility in the Search Engine Results Pages (SERPs). In turn, they can result in a higher click-through rate ( https://wordpress.com/go/build/improve-your-google-click-through-rate/ ) . However, you'll need to ensure that your breadcrumb navigation links are set up correctly for this to work. 

How to Add Breadcrumb Navigation to Your WordPress.com Site (2 Methods)

Now that we've covered the importance of having breadcrumb navigation links on your WordPress site, let's look at a few ways you can incorporate them into your content.

If you're a WordPress.com user, you'll need to use the eCommerce or Business plans ( https://wordpress.com/pricing/ ) to access the plugins mentioned in this tutorial. 

1. Use a WordPress Plugin

One of the easiest ways to add breadcrumb navigation to your website is by using a free plugin. Let's look at two popular options: All in One SEO ( https://wordpress.org/plugins/all-in-one-seo-pack/ ) and Breadcrumb NavXt ( https://wordpress.org/plugins/breadcrumb-navxt/ ) . 

Adding Breadcrumbs With All in One SEO

All in One SEO ( https://wordpress.org/plugins/all-in-one-seo-pack/ ) (AIOSEO) is one of the most powerful SEO plugins ( https://wordpress.com/go/tips/do-you-need-to-use-seo-plugins-on-your-wordpress-com-site/ ) on the WordPress market:

https://wpcom.files.wordpress.com/2021/10/aioseo.jpg This plugin is packed with features to help boost your website's rankings in search engines. It includes schema markup ( https://wordpress.com/go/digital-marketing/boost-your-search-results-with-schema-markup-in-wordpress/ ) , 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. 

To get started, head to Plugins > Add New in your WordPress.com dashboard and search for "All in One SEO". Then, click on Install Now, followed by Activate: 

https://wpcom.files.wordpress.com/2021/10/adding-all-in-one-seo-plugin_-resized.jpg Doing so will take you to the plugin's setup wizard. Go ahead and click on Let's Get Started:

https://wpcom.files.wordpress.com/2021/10/all-in-one-seo-setup-wizard_resized.jpg First, you'll be asked to select a category that best describes your website:

https://wpcom.files.wordpress.com/2021/10/all-in-one-setup-wizard-choose-category_resized.jpg 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:

https://wpcom.files.wordpress.com/2021/10/all-in-one-seo-setup-wizard-sitetitle-and-tagline_resized.jpg When you're ready, click on Save and Continue. On the next page, you'll need to provide details about your website and links to your social media ( https://wordpress.com/go/how-to/how-to-create-a-social-media-website/ ) pages. You can skip this step and fill in this information later if you prefer. 

You'll also need to select the SEO features that you want to add to your site:

https://wpcom.files.wordpress.com/2021/10/all-in-one-seo-setup-wizard-features-selection_resized.jpg Once you've finished the setup, head back to your WordPress.com dashboard and navigate to All in One SEO > General Settings. Then, select Breadcrumbs from the menu:

https://wpcom.files.wordpress.com/2021/10/breadcrumbs-settings_resized.jpg By default, AIOSEO adds breadcrumbs to your site's schema markup. It also gives you four ways to display breadcrumb navigation trails on your website.

If you select the Shortcode option, you'll enter the following code where you want to display the breadcrumbs:

[aioseo_breadcrumbs]

If you're using the Block Editor ( https://wordpress.com/go/web-design/the-block-editor-and-the-future-of-wordpress-themes/ ) , you can simply add the Shortcode block into your post and paste the code there:

https://wpcom.files.wordpress.com/2021/10/shortcode-example_resized.jpg Alternatively, you can display your breadcrumb navigation via the dedicated Gutenberg Block. To do this, you'll simply have to insert the AIOSEO - Breadcrumbs block into your post:

https://wpcom.files.wordpress.com/2021/10/aioseo-breadcrumbs-block.jpg 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 AIOSEO - breadcrumbs widget can come in handy. 

To add it to your site, go to Appearance > Widgets. In the Customizer, select the Widgets option, locate AIOSEO - breadcrumbs, and add it to the sidebar:

https://wpcom.files.wordpress.com/2021/10/add-aioseo-breadcrumbs-widget_resized.jpg Another way to add breadcrumbs navigation links to your site is by using code ( https://wordpress.com/go/tutorials/4-tips-for-using-wordpress-shortcodes/ ) . 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. 

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:

https://wpcom.files.wordpress.com/2021/10/breadcrumb-settings-separator-and-homepage_resized.jpg Additionally, you can customize the labels for your archives page, the results page, and 404 errors ( https://wordpress.com/go/website-building/404-vs-301-what-are-they-and-how-do-you-fix-them/ ) :

https://wpcom.files.wordpress.com/2021/10/breadcrumb-settings-archive-format_resized.jpg When you're ready, click on the Save Changes button. That's it — breadcrumb navigation is now fully set up on your website!

Adding Breadcrumbs With Breadcrumb NavXT

While AIOSEO is a powerful tool, you may already be using an SEO plugin on your website. If that's the case, check to see if your SEO plugin has a breadcrumb option. If not, you might want to opt for a program that is specifically dedicated to breadcrumb navigation.

One such tool you can use is Breadcrumb NavXT ( https://wordpress.org/plugins/breadcrumb-navxt/ ) . This plugin generates breadcrumb trails for your WordPress site. It also enables you to customize them to suit your needs and preferences.

Once you've installed and activated the plugin, go to Settings > Breadcrumb NavXT in your WordPress dashboard. Here you can configure the settings for different breadcrumb trails on your site:

https://wpcom.files.wordpress.com/2021/10/breadcrumb-nav-settings_resized.jpg 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. 

If you head to the Post Types tab, you can alter the way that your blog posts appear in breadcrumb navigation:

https://wpcom.files.wordpress.com/2021/10/breadcrumb-nav-posts_resized.jpg 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.

Additionally, you can edit the appearance of breadcrumbs for your blog categories and tags. To access these settings, you'll need to click on the Taxonomies tab:

https://wpcom.files.wordpress.com/2021/10/breadcrumbs-nav-taxonomies_resized.jpg Finally, you can navigate to the Miscellaneous section to adjust the template for other types of breadcrumbs. For example, you can configure author archives, dates, and 404 errors.

To display the breadcrumbs on your site, navigate to Appearance > Widgets. Then, select Widgets again from the menu. Here, you can add the Breadcrumb NavXT widget to your sidebar ( https://wordpress.com/go/design/what-is-a-sidebar/ ) : 

https://wpcom.files.wordpress.com/2021/10/breadcrumb-navxt-widget_resized.jpg 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.

2. Use a WordPress.com Theme

Some of our WordPress.com themes come with built-in breadcrumb navigation ( https://wordpress.com/themes/filter/breadcrumb-navigation ) . As such, you won't have to install a plugin to add this feature to your site. Let's look at a few themes that you can use from our repository. 

TextBook ( https://wordpress.com/theme/textbook/ )

https://wpcom.files.wordpress.com/2021/10/textbook-theme_resized.jpg We designed TextBook ( https://wordpress.com/theme/textbook/ ) specifically for schools, colleges, and other educational institutions ( https://wordpress.com/go/build/using-wordpress-com-for-school-projects-and-university-courses/ ) . However, you can use it for any type of website. 

The theme features an elaborate hierarchy of pages, as you can see at the top of this screenshot:

https://wpcom.files.wordpress.com/2021/10/textbook-theme-breadcrumbs_resized.jpg 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. 

Sequential ( https://wordpress.com/theme/sequential/ )

https://wpcom.files.wordpress.com/2021/10/sequential-theme_resized.jpg If you're looking for a clean, contemporary theme, then Sequential ( https://wordpress.com/theme/sequential/ ) may be the right choice for you. It's a good fit for most websites, but it was designed mainly for online businesses ( https://wordpress.com/go/business-website-guidance/online-business-model-basics/ ) . 

Breadcrumb links are placed prominently on the page, which enables users to wander around your site easily:

https://wpcom.files.wordpress.com/2021/10/sequential-theme-breadcrumbs_resized.jpg The theme has a grid page template that displays child pages of the parent page in a professional format. This feature is perfect for showcasing testimonials ( https://wordpress.com/go/digital-marketing/the-benefits-of-testimonials-6-tips-to-improve-your-marketing/ ) , services, or case studies related to your business. 

Edin ( https://wordpress.com/theme/edin )

https://wpcom.files.wordpress.com/2021/10/edin-theme.jpg Edin ( https://wordpress.com/theme/edin/ ) is a multipurpose and responsive theme for different business types. You may like to use it if you're looking for versatility and the ability to showcase full-width images via the homepage. 

Additionally, Edin enables you to activate breadcrumb navigation links on pages. You can access this setting by heading to Theme Settings in the Customizer. Then, posts and pages will automatically generate breadcrumbs at the top:

https://wpcom.files.wordpress.com/2021/10/edin-breadcrumbs.jpg 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 case studies ( https://wordpress.com/go/website-building/case-studies-for-marketing-tell-stories-to-promote-your-brand/ ) . 

Conclusion

Breadcrumb navigation enables 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 breadcrumb links. This feature not only improves the user experience of your site, but it can also help you boost your visibility in search engine results. 

In this post, we looked at two different ways you can add breadcrumb navigation to your website:

By using a powerful SEO plugin, such as All in One SEO ( https://wordpress.org/plugins/all-in-one-seo-pack/ ) or Breadcrumb NavXt ( https://wordpress.org/plugins/breadcrumb-navxt/ )

By using a WordPress.com theme that comes with breadcrumbs links, such as TextBook ( https://wordpress.com/theme/textbook/ ) , ( https://wordpress.com/theme/sequential/ ) Sequential ( https://wordpress.com/theme/sequential ) , or Edin ( https://wordpress.com/theme/edin )

--


Kelola Langganan
https://subscribe.wordpress.com/?key=2cf92d447d6bf5230bc38c58c02d8eb0&email=jabatek77.internet%40blogger.com

Berhenti berlangganan:
https://subscribe.wordpress.com/?key=2cf92d447d6bf5230bc38c58c02d8eb0&email=jabatek77.internet%40blogger.com&b=4dKxjlsCwmx90EJ1SWkYCU6cAdlBhLXUmwtljp7GrF0joLP2ygD7h-o7v6pmBfwSwmniGTo4mre5YQkillSO3pTF_zbr5bvr_xRDHs8y_A0%3D