breadcrumbs in SEO, we have heard the term breadcrumbs quite often, because they are an integral part of overall SEO, which largely determines the development of the website. Besides the advantage of supporting users to know where they are on the website, it also helps Google read and understand the elements on the website, thereby making Google evaluate the website higher on search engines.
What is breadcrumbs? How important is it in SEO? Let’s find out with Mona Media!
What is breadcrumbs in SEO?
Breadcrumbs can be understood as a link from large to small, helping users to see where they are on the website. Also, most of these link chains make it easier for them to return to the previous page with just one click on one of the links on this thread. An example will help you easily visualize about Breadcrumbs.
What is breadcrumbs? You really know about breadcrumbs.
Do you see the string Home> Other News> SEO News> Speed algorithms for mobile search results? That is one of the typical breadcrumbs. You are in the article “Speed algorithms for mobile search results”, and you can click on one of the 3 “Home”, “Other news” or “Other news” links to return to the page. in advance!
Another example of Breadcrumbs is on Google’s SERP. For example, you search for the keyword “Mona Media” on Google and this is the result that Google appears.
An example of Breadcrumbs when searching Google.
You can easily see the link chain including “Linkedin.com”, “Company” and “Mona Media”. While this does not allow you to click on links like Linkedin or company, it still helps you understand which section you are on the Linkedin website.
Classification of breadcrumbs
To make breadcrumbs for your website, you first need to know how many types and which ones to use to suit your website. Let’s refer to Mona Media soon!
Hierarchy based breadcrumbs
In a text, we often see headings that are categorized 1,2,3,4 … Breadcrumbs according to hierarchy are similar. It will go from a higher level to a lower category (maybe called the parent and child list).
Breadcrumbs by hierarchy.
Typically for this type, we can see through the Nestle website. It goes from “Home” (highest, level 1) to “Nutrition, Health and Wellness” (level 2) and then to the user’s current location, “Introduction” (level 3). This breadcrumbs will tell you what content you are reading on the website, thus helping you decide where to go on the website to continue tracking and referencing.
Breadcrumbs by attributes
Most sales websites often use this type for their website. This breadcrumbs will be based on the general characteristics of the items businesses are trading to establish. For example, with the electronics website, you will see breadcrumbs in a characteristic that looks like this: TV> Sony TV> 44-54 inches.
Breadcrumbs are featured by many sales websites.
This is breadcrumbs according to Sony TV specifications that have a 44 to 54 inches screen. This category will indicate whether the user is looking for the right product, thereby saving reference time and shortening the process of closing customers’ orders on the website.
History-based breadcrumbs
Breadcrumbs allow users to track the history of the pages on the website they have referenced, thereby helping them return to these pages more easily. This type is rarely used today, when famous web browsers such as Google, Coc Coc … all support users to return to the previous page with the “Back” button. You can simply left-click to return to the previous page, or if you want to go further back, you can right-click to select the page you want to return to.
This type is often found in blogs or news websites. You can see most clearly in the “Read Articles” (if any). It is a comprehensive list of all the articles you have read in a short time.
Fatty benefits of integrating breadcrumbs on your website
Breadcrumbs bring tremendous benefits to your website.
The integration of breadcrumbs on the website not only supports the user better but also helps the website to be highly appreciated, help raise the brand and be more popular. If you still do not believe it, Mona Media will explain to you why!
A website with breadcrumbs will be greatly appreciated by search engines, including Google
All Google likes is a user-friendly website, clearly divided content and a lot of traffic to the website every day. With breadcrumbs, the website will help users understand where they are, making their experience on the website easier and more convenient. That is what Google has always wanted to be.
In addition, Google will easily identify the categories on the website, thereby helping your website have the full basis to rank well on Google.
Improve the experience for your website visitors
breadcrumbs in SEO, Users can easily identify their position on the website, thereby helping them to be directed to the right page on the website in the fastest time (consistent with the user’s search needs). In addition, a website that integrates breadcrumbs will help you retain customers longer on the website, creating a high session index and thereby making the website rank higher on search engines.
Lower bounce rate
As explained above, if a website does not have breadcrumbs, it is difficult for users to know where to click to find information that suits their needs. Since then make users feel uncomfortable and exit your page, increasing bounce rate on the website.
How to add Breadcrumb to your website?
To add Breadcrumbs to your website, you can use YoastSEO (for wordpress website) or insert a piece of code (for CMS website). You can refer to the details here:
Suppose you write a code like the following:
<ol class = “breadcrumbs”>
<li>
<a href=”http://www.example.com/books”> Books </a>
</li>
<li>
<a href=”http://www.example.com/sciencefiction”> Science Fiction </a>
</li>
<li>
<a href=”http://www.example.com/books/sciencefiction/awardwinners”> Award Winners </a>
</li>
<ol>
You will have a breadcrumbs like below:
Books ›Science Fiction› Award Winners
How to notify breadcrumbs to Google
Method 1: Insert a JSON-LD programming code
<script type = “application / ld + json”>
{
“@Context”: “http://schema.org”,
“@Type”: “BreadcrumbList”,
“ItemListElement”: [{
“@Type”: “ListItem”,
“Position”: 1,
“Name”: “Books”,
“Item”: “https://example.com/books”
},
{
“@Type”: “ListItem”,
“Position”: 2,
“Name”: “Science Fiction”,
“Item”: “https://example.com/sciencefiction”
},
{
“@Type”: “ListItem”,
“Position”: 3,
“Name”: “Award Winners”,
“Item”: “https://example.com/books/sciencefiction/awardwinners”
}]
}
</script>
Method 2: Convert breadcrumbs on the website to RDFa format
<ol vocab = “http://schema.org/” typeof = “BreadcrumbList”>
<li property = “itemListElement” typeof = “ListItem”>
<a property = “item” typeof = “WebPage”
href = ”https://example.com/books”>
<span property = “name”> Books </span> </a>
<meta property = “position” content = “1 ″>
</li>
›
<li property = “itemListElement” typeof = “ListItem”>
<a property = “item” typeof = “WebPage”
href = ”https://example.com/books/sciencefiction”>
<span property = “name”> Science Fiction </span> </a>
<meta property = “position” content = “2 ″>
</li>
›
<li property = “itemListElement” typeof = “ListItem”>
<a property = “item” typeof = “WebPage”
href = ”https://example.com/books/sciencefiction/awardwinnders”>
<span property = “name”> Award Winners </span> </a>
<meta property = “position” content = “3 ″>
</li>
</ol>
Method 3: Convert breadcrumbs on the website into Microdata:
<ol itemscope itemtype = “http://schema.org/BreadcrumbList”>
<li itemprop = “itemListElement” itemscope
itemtype = “http://schema.org/ListItem”>
<a itemtype = “http://schema.org/Thing”
itemprop = “item” href = “https://example.com/books”>
<span itemprop = “name”> Books </span> </a>
<meta itemprop = “position” content = “1 ″ />
</li>
›
<li itemprop = “itemListElement” itemscope
itemtype = “http://schema.org/ListItem”>
<a itemtype = “http://schema.org/Thing”
itemprop = “item” href = “https://example.com/books/sciencefiction”>
<span itemprop = “name”> Science Fiction </span> </a>
<meta itemprop = “position” content = “2 ″ />
</li>
›
<li itemprop = “itemListElement” itemscope
itemtype = “http://schema.org/ListItem”>
<a itemtype = “http://schema.org/Thing”
itemprop = “item” href = “https://example.com/books/sciencefiction/ancillaryjustice”>
<span itemprop = “name”> Ancillary Justice </span> </a>
<meta itemprop = “position” content = “3 ″ />
</li>
</ol>
Once you have done one of the three methods above, you can test the demo using the Structured Data Testing Tool. This tool helps you check whether the data structure in your code is valid or not to help Google display the link on your website better.
Some notes when inserting breadcrumbs into the website
- You should only notify Google when your website has 3 or more ranks. In particular, for websites on mobile platforms, please integrate a “Back” button to navigate back to the previous link of the user.
- You should add anchor text containing the current web page the user is viewing on the breadcrumbs of the website.
- Remember to use special characters in the code (>, /, -, etc.) to indicate hierarchy in breadcrumbs.
- Put it in an easy-to-understand area of the user, such as at the top of the page or directly above the article title and body.
- Do not leave links and anchor text the same.
Conclusion
The role of Breadcrums in the website.
breadcrumbs in SEO is a great tool that not only helps Google appreciate your website, but also helps users to surf on your website better. Mona Media helped you understand breadcrumbs and how to set it up on your website. We hope that the website administrators will know how to upgrade your website to be more user-friendly!