Best WordPress Breadcrumbs: Customization, Design

Best WordPress Breadcrumbs: Customization, Design

Hello, dear readers of the SamSebeWebmaster.ru blog, in this article I will describe in detail what WordPress breadcrumbs are, how to make them using a cool SEO plugin, set them up in a couple of minutes, and beautifully design them to fit into any design.

Breadcrumbs are an important element of site navigation that performs two main functions: increasing usability (ease of use of site elements and content) and creating correct site linking. Typically, breadcrumbs are performed as a line in which to indicate the path through the site from the main page to the last section in which the article or product is located. Let’s look at examples:

As you can see in the figure, breadcrumbs are a chain of nested links that indicate the user’s position in the site structure.

Functions of breadcrumbs

Let’s analyze each function in more detail.

First, improving the usability of the site. The main function of breadcrumbs is to indicate to the user where he is, in which section, subsection, and so on, there is an article or product that he is currently reading.

Let’s look at another example:

The photo shows the breadcrumbs of a popular online clothing store. Here we can see that both jeans products are in 4 categories:

Men (women);
Men’s clothing (women’s clothing);
Jeans;
Straight jeans.
The user can return to the required category at any time without using more complex navigation elements.

Secondly, the creation of the correct linking. Linking is one of the most highly effective and free methods of website promotion, which is especially important for promoting low-frequency queries.

Breadcrumbs, being one of the simplest ways of linking, perfectly help to distribute the link weight of the main page, categories, and articles among themselves.

Is it worth installing breadcrumbs on a blog?

yoast

Breadcrumbs, although considered an important element of navigation, are not always appropriate. Let’s say you have a blog on a very narrow topic, which you managed to break into 3, 4 or 5 headings. The site structure is very simple and clear. In this case, the use of bread crumbs is not necessary.

Many SEOs recommend using breadcrumbs only if the blog has sub-categories or a more complex structure. I do not agree with this opinion, so I am conducting a series of experiments in this direction.

I will share the results of the experiment in a separate article.

Also, many experts in search promotion recommend

WordPress Breadcrumbs for Website

yoast Breadcrumbs
Yoast Breadcrumbs

Lately, I’ve had breadcrumbs created with the functional SEO plugin WordPress SEO by Yoast. This plugin allows you to create pretty good breadcrumbs. Here are some pluses:

  • if you have WordPress SEO by Yoast there is no need for third-party plugins and solutions;
  • the plugin, along with the headings, also displays subheadings, displaying the full structure of the site;
  • it is possible to change the text of the link to the main page;
  • setting separator and prefix;
  • setting the taxonomy format (categories, tags, etc.)
  • highlighting the last page in bold;
  • With the help of CSS, you can experiment with the design of breadcrumbs.
  • Although this plugin implements this feature far from perfect, I think the developers will add the missing features soon with the next updates.

Customizing and creating breadcrumbs with the WordPress SEO plugin by Yoast

In this article, I’ll show you how to create, customize, and style breadcrumbs using the WP SEO by Yoast plugin. I recommend this plugin to everyone to use as the main SEO plugin.

I’ll start from the very beginning – installing the plugin. You can download the plugin from the here page on WP.org. If you don’t know how plugins are installed, here is a detailed article to help you – how to install WordPress plugins. I described the plugin set up in the WordPress SEO by Yoast article.

Now you can start directly editing the breadcrumbs of your WordPress site:

In the WordPress Admin, go to SEO >> Advanced:

This will load the advanced settings page of the WordPress SEO by the Yoast plugin. Here we are interested in the page “Breadcrumbs (breadcrumbs)”:
Let’s go through the settings:

Item Enable breadcrumbs (breadcrumbs) – check the box. But for the appearance of breadcrumbs on the site, you need to install the following PHP function in the site code, which is responsible for the output:
We set the separator, in this field you can insert any character supported by HTML5. Here are a couple of options:





  • Link text to the main page – You can set the domain or just “Home”;
  • Prefix (main) – a word or symbol before all breadcrumbs. For example, I have such an arrow ➥
  • Breadcrumbs prefix for archives – the same as above, only for Archives pages;
  • Breadcrumbs prefix for pages with search results – for search results;
  • Breadcrumbs for the 404 page – for pages with a 404 response code
  • Bold the last page in the navigation chain – this item can be called unnecessary spam. Since often the last page in the navigation chain is identical to the page title;
  • The taxonomy that will be shown in the breadcrumb for Post types – choose between categories (recommended), tags, and formats.

We save the changes.
Once the breadcrumb output functions are fully configured, you need to add the PHP code for the WP SEO by Yoast plugin:

<?php if ( function_exists('yoast_breadcrumb') ) 
{yoast_breadcrumb('<p id="breadcrumbs">','</p>');} ?>

Comments

No comments yet. Why don’t you start the discussion?

Leave a Reply