Add Microdata to the breadcrumbs module (mod_breadcrumbs). “Breadcrumbs”: micro-markup and its impact on page snippets Micro-markup of breadcrumbs schema org
Greetings, friends. Today is the 400th anniversary post on my blog. On the occasion of such a date, I really wanted to provide some really useful content so that it would be interesting, useful and relevant. And the topic for such an article came up out of the blue - I wanted to understand the formation of beautiful snippets in search, but at the same time I dug into two more topics:
- installing breadcrumbs on your WordPress blog (I wanted it without a plugin so as not to load the site),
- and setting up micro markup (without it, bread crumbs are of little use).
I’ve heard and read about breadcrumbs for a long time, but I just couldn’t really understand what use they were for a regular blog with a simple and understandable structure. Judge for yourself, I have a main page, all posts are divided into categories and that’s it. That is, the maximum path from the home page to the final article is 2 clicks. Each article has a link to the category to which it belongs, so there is simply nowhere for the visitor to get lost.
It’s another matter if the site is complex and its structure is such that you can walk in circles for half an hour and not find what you are looking for. If you have some kind of online store with dozens of categories, each of which is divided into child headings, those, in turn, and then another, and then each product is divided into colors - here I understand the importance of bread crumbs - the user needs them as an element navigation and .
By the way, the name “breadcrumbs” came from this; initially it was just navigation on the site. Remember the fairy tale “Hansel and Gretel”, where the children threw pieces of bread on their way so that they could later find their way back. In the fairy tale, this method did not help them much, but for websites it was useful.
Appearance of the snippet in search resultsSo, I didn’t see the point in such a gadget for my blog until I came across the second meaning of crumbs - it turns out that they are seen not only by people, but also by search engines. And search engines see them not only as internal links that influence the linking and distribution of page weight, but also as an important navigation element. Yandex and Google use this element to create a snippet. I don’t want to tell you for a long time what it looks like, it’s better to see it once with your own eyes:
A snippet is a display of a site in search results.
The more attractive the snippet, the higher its click-through rate, which immediately gives a double effect:
- More clicks mean more traffic to the site,
- The click-through rate of a snippet refers to behavioral factors, and the higher it is, the easier it is for a resource to climb to the TOP for the necessary queries.
The only point that was not clear to me was that these links are breadcrumbs, and not something else. Agree, the page from any blog article contains other links to the category and to the main page (top menu, categories in the sidebar, link to the category in the block with article metadata).
Not a person, he cannot look at the page and understand - this link is from the menu, this is from the text of the article, and this is a bread crumb.
I had to scroll through forums and read many blogs. In most cases, they only write about the fact that crumbs are needed and they improve usability and the snippet, and then they write instructions for setting up the Breadcrumb NavXT plugin (Breadcrumb is bread crumbs in English) or provide implementation code without a plugin - and that’s all. I have the impression that most webmasters have no idea how to properly work with this element and perceive it only as an element of internal page linking.
Google's results show that no more than 10% of sites have the correct breadcrumbs in their arsenal, the rest work the old fashioned way, displaying the page URL in the snippet.
Micro marking of bread crumbsI wasn’t too lazy, went into the search, analyzed how Breadcrumb was made on different sites and how these sites look in search. My theory turned out to be correct:
- There are crumbs on the site - no micro markup - a regular snippet with a URL.
- There are crumbs - there is micro markup - an improved snippet.
I dug up everything I needed and today I’ll tell you about bread crumbs from A to Z. Technically, putting them on the site is not even half the battle – it’s 10%. The main feature that will bring real benefits is micro markup.
The main benefit is not in breadcrumbs, but in their correct micro-markup for the snippet.
I became acquainted with micromarking as a concept just a couple of months ago. I didn’t understand much then, but I tried to set up the basic elements for articles and comments. Some bloggers wrote that this is almost a magic button that pushes sites to the TOP (mostly students of Alexander Borisov’s school of bloggers) - I don’t know why they decided so. This seemed dubious to me right away, but now I can say for sure - in 2 months of having micro-markup on my site, I did not notice any noticeable movements in the search results for promoted queries.
In the case of marking breadcrumbs, the situation should be different; we will not wait for any movements in organic search results, but we will count on what I said above - an improvement in the clickability of snippets and the corresponding buns (growth due to behavioral factors).
Breadcrumbs on WordPress without a pluginSo we have moved from conversations “why and what for” to conversations “how to do it”. I immediately discarded the Breadcrumb NavXT plugin, since it doesn’t make sense to “require modification with a file”, and it doesn’t know how to do micro-markup itself. There is another option - the WordPress SEO plugin SEO by Yoast, it can also make breadcrumbs, but I have no desire to change it. The only option left is to use a script or function.
If you decide to install breadcrumbs on WordPress, then do it without plugins - the site will be less loaded and there will be more opportunities to adapt the code.
Step 1. Function wp_zhilin_krohiSince I just started learning the basics of PHP, I became interested in making a function myself that would display breadcrumbs on my blog. Intuitively, I saw that there shouldn’t be any problems, since all the crumb elements are already displayed in the template, you just need to take them and arrange the necessary links as expected.
Looking ahead, I’ll say that I was able to create the most compact (read light and fast) function that I’ve ever found on other sites.
The first version of the code turned out quickly, but I didn’t take into account one point - the code should not only display links to the site, but also contain micro-markup, but there was an ambush with it - my code repeated the mistakes of many webmasters - due to the standard output implementation, distribute links to elements for markup embedding did not work.
I had to start over again, relying on simpler WordPress PHP functions (but I learned something new). As a result, the result was the wp_zhilin_krohi function (the first time I named a function by my own name - nice), which displays breadcrumbs on pages with articles and on category pages. All parent categories (no matter how many there are) are automatically taken into account and each element is wrapped in micro markup.
For articles, the crumbs look like:
Home > Parent heading (if any) > Category > Article
Home > Parent category (if any) > Category >
I have concerns that the title of the article in breadcrumbs will lead to spamming the page with keywords. I made a request about this to Yandex technical support, in response they wrote that if this is not aimed at deceiving search engines, then there should be no sanctions, but they are taken into account. Here is the answer:
So, if you think that unnecessary repetition of the article title will bother you, delete lines 17 to 20.
Here is the function itself, you need to add it to the functions.php file of your theme, before the closing one?> (this is done directly through the admin panel, you don’t even need an FTP client):
/*** Crumbs with micro markup ***/ function wp_zhilin_krohi() ( if (!is_home()) ( echo "Home" "; ) if (is_category() || is_single()) ( $cats = get_the_category(); foreach ($cats as $cat) ( echo "term_id)."" >" .$cat->name." " " ) ) if(is_single()) ( the_title(); ) );
The micro-markup is immediately baked into the function code and is automatically displayed along with each link.
Step 2: Displaying the function on the pagesIn order for the chain of links we created to appear on the pages, you need to open your WordPress theme file, which is responsible for the corresponding type of pages, and insert into it the code that calls the function:
At a minimum, you need a file single.php (displays posts) - almost always called the same, and then it depends on the template, somewhere category pages are displayed through archive.php, somewhere through index.php - you will find the one you need.
In this file you need to find the place where you would like to see the crumbs. They are usually placed at the top of the site (before the post title) as a navigation element. Look for this piece of code - php the_title, and insert the output of the function in front of it (by design, look where it fits).
Breadcrumb is not always placed at the top of the page; there are exceptions. Let's say you only need them to display a snippet, then you can place them in the basement - search engines will see the micro markup there. This option was implemented on Sergei Sosnovsky’s blog - he has a separate block at the top for users, but it does not have micro-markup, and breadcrumbs with micro-markup are displayed in the footer (I don’t really understand why, though):
The appearance of any page element must be in harmony with the design of your site, therefore, there is no single solution for every blog.
I set up the same on my resources - I reduced the font of the breadcrumbs compared to the main content. To do this, I didn’t even create separate styles in the style.css file, but enclosed the function in a div container and specified one single parameter in it - the font size (you might have noticed in the screenshot above):
All other breadcrumb characteristics are inherited from the theme styles. To make small additions (change font, text color, etc.), specify the necessary properties in the same container.
If you want to radically change the design of the displayed chain of links (make some pictures or buttons), then assign them a special class, for example, like this - then for this class, create a separate block in style.css and specify all the necessary parameters.
This is where your knowledge of CSS cascading style sheets and design flair will come in handy (if you do the design yourself).
Checking micro markup of bread crumbsAfter you do everything, be sure to check the correct operation of the micro-markup in special validators of Yandex and Google, you never know, some bugs will pop up:
webmaster.yandex.ru/microtest.xml developers.google.com/structured-data/testing-tool/ (45 votes, average: 4.7 out of 5)Hello everyone, today we will define the minimum set and examples of implementing micro-markup of breadcrumbs, articles and products for commercial and information sites. The technology itself is no longer new, but the variety of its attributes can be confusing, and therefore in this article I will try to highlight several typical and proven solutions that can be safely implemented right away.
The entire topic of microformats cannot be covered in one article, and therefore, as it is discussed in other materials, I will refer to them. In addition, you can always delve into the Google micro markup builder.
Micro marking of bread crumbsWell, this is a classic of the genre, which must be present on every site. For example, for a page it looks like this:
//1st level: main page
SEO blog Pingo
//level 2: category
For beginners
//level 3: final material
Types of search queries
So what do we see here? Firstly, each level of breadcrumbs is a separate element, a level, and only their order plays a role here. Secondly, each element (except the last) is nested three times:
The last element can also have a url attribute, but in my opinion it is not needed - why would the page point to itself in the breadcrumb?
Attributes can be used in conjunction with any tags - only the order and level of nesting is important. For example:
For beginners
The introduction of micro-markup breadcrumbs onto the site helps search engines display “readable” breadcrumbs in the snippet (which is not bad), and also simply better understand the structure of the site.
Article markupThis type of micro markup is intended for articles and any other information materials, both on commercial and regular sites. For example, the page you are reading has the following structure:
//Declare the element name
//Definition of the “Publish Date” attribute
Competitiveness of search queries
//Definition of the “Publication name” attribute
Contents of the article. //Definition of the “Article Content” attribute
Arithmetic mean estimate
Maximum rating value
Minimum rating value
Number of ratings
Everything here is the same as for bread crumbs, except for the following:
- The Date of Publication attribute must be specified in ISO-8601 format of the form YYYY-MM-DDTHH:MM, where T is just a character, YYYY is the year, MM is the month, DD is the date, HH is the hour, and MM is the minute.
- When defining the “Publication Category” and “Publication Name” attribute, it is not at all scary that the link also falls into the value area - the robot will pull out only the data corresponding to the expected value for the attribute.
The introduction of article markup helps the search robot to better understand and classify the content of information material. In addition, if the information is unique, it will eventually be added to the Google database.
Micro-size of goods (product or service)This type of microformat is indispensable for pages describing goods and services:
//Declare the element
Pink elephant //Determine the name of the product or service
Nice elephant. //Defining the description of the product or service
//Declare the subtype “Offer”
//Determine the cost of the product or service
//Specify the currency of the price of the product or service
Arithmetic mean estimate
Maximum rating value
Minimum rating value
Number of ratings
The same thing - the search robot immediately sees what is located on the page and where it is located and why it is needed at all. The visual result may be an increase in the attractiveness of the snippet in SERP.
Breadcrumbs (breadcrumbs or breadcrumbs) are an element of the website interface, the main purpose of which is to indicate the path from the main page to where the user is currently located. Of course, this is done primarily for the convenience of the user’s stay on the site, thereby facilitating understanding of the virtual structure. Concern for user comfort is one of the secret missions that fills hundreds of usability minds: everyone wants to make the interface more convenient, and search engines are no exception. Let's talk about breadcrumb micro-markup for visualizing links in Google search results.
For clarity, here are visual examples of issuing search results without and with micro-markup:
1. In the first entry, the link under the title is displayed in the usual way, and, as a rule, is not entirely readable for the average user.
2. In the second entry, everything is different, the link is not visible there, but there are those same breadcrumbs that display the logical structure of the location of the found element. The second option looks more constructive, let's see how to put this on your website.
This miracle is achieved through the use of micro-data in the breadcrumb. Let's imagine we have this structure on the site:
Home – Operating systems – FreeBSD
Each item has its own path, and is present as a link in the navigation chain. Also, the link is enclosed in a tag, for example, a div, the attributes are set to the tag:
Itemscope itemtype="http://data-vocabulary.org/Breadcrumb"
You will get a block for the item:
...
This block contains the link and the name of the element. For a link, the itemprop=”url” attribute is set, the title is also enclosed in a separate span tag, and the itemprop=”title” attribute is set. As a result, a separate element in the chain will be ironed like this:
