Breadcrumps Navigation: Breadcrumbs that help both User and Google

The real problem in life

Have you ever been enjoying the website and feel like "lost"? I don't know where you are in the website. And will return to the main page Or how to be interested? Or maybe you click from the Google search results to one page directly on the website. And found that that "floating" face alone, no context, do not know what is related to Or is there any bigger page?

This problem is not just a user like us. Only But for the website owner Digital marketing or SEO, this problem is a "nightmare" that has a direct impact on the efficiency of the website. Whether it is:

• The user is confused and frustrated: when the user can't find the way. Or do not understand the website structure They are likely to "press off" your website in the end. Also known as a high bounce rate
• Conversion rate falls down: If customers find product information, service or Call to Action button, cannot be found because of complicated navigation. The decision to buy or contact is almost no.
• Google is confused. Tek on your website: If Google Bot comes in to crawl, collect data and do not understand which page is important. Which page is the face of the child? Which page is a category It's difficult for your website to be ranked well.

If you are encountering a situation like this, then you are not alone. This is a classic problem that many websites are facing. But the good news is that there is a "exit" that is very simple but powerful. That will help solve this problem like "One shot with two riding guns", both User and Google, "Breadcrumps Navigation" or "Bread Frake".

Prompt for illustrations: The user image is using a computer and a mobile phone with a confused expression. With a disturbing path like a maze on the screen

Why did that problem occur?

Why do many websites neglect or design Breadcrumbs Navigation, even though it has enormous benefits? The main reason is often from misunderstandings. Or giving more importance to other things

• Overlooking importance: Some people think that Breadcrumbs is just a small element that is unnecessarily or thinks that it is just a "decoration" that is available.
• Emphasize too much design: some designers may focus on the beauty or simplicity of the design too much. Until neglecting the basic functions that help guide the user, such as hiding Breadcrumbs or using too small characters
• The website structure is not clear from the beginning: If the Information Architecture (IA) of the website has not been planned well from the beginning. Make the structure complex No clear hierarchy It is difficult to create an effective breadcrumbs. can you study more at the Information Architecture articles for SEO and UX to understand this?
• SEO technical ignorance: some website owners or developers may not know that Breadcrumps is not just useful to users. But also plays an important role in SEO, especially to help Google understand the structure of the website better via Breadcrumb's Schema Mark
• Updating the website that is not consistent: sometimes when new pages are added Or improve content But not updating the breadcrumbs structure to be consistent, it may cause Breadcrumbs to display errors. Or incomplete

These causes lead to problems that users "lost" and Google "do not understand" the website structure. Which is an important obstacle to ranking and increasing conversion

Prompt for illustrations: Website designers are looking at small components on the screen or the image structure of the website that looks complicated and has no regulations.

If left, how will it affect?

Good ignorance and installation of good breadcrumbs navigation may lead to "painful" results, both in terms of user experiences and SEO performance of your website. Let's see if left for a long time What will happen:

• Bonds Rate is high: when users enter the website and can't find what they want. Or can't find a way to continue, they will "press off" the website quickly, causing the Bounce Rate to be higher, which is a bad signal for Google.
• The duration of the user on the web (DWELL TIME) decreased: If the user cannot explore other content On the website conveniently They will spend less time. Which negatively affects Google ranking and reducing the opportunity to discover other valuable content
• CONVERSION RATE Down: Whether buying products, filling in form, or subscription If the user cannot guide the target page smoothly The chances of conversion will decrease dramatically.
• SEO is not as bang as it should: Google Bot will have problems in understanding the hierarchy of your website. When the structure is not clear, Google may rate your website than you should be. Which affects your search rankings
• Creating an incorrect Internal Link: No good Breadcrumbs makes you miss the opportunity to create quality internal link, which is important to distribute Page Authority and help Google discover the windows. On your website easier
• User experience (UX) is poor: the user will feel frustrated and not impressed with your website. Causing them to not think of returning to use again in the future Which is something you don't want to happen at all

Good investment with UX design from the outset is important to study UX structures for the IR website may help you see the importance of a good structure.

Prompt for illustrations: The graph showing the rising bounce rate graph and the reduced conversion rate, along with the question mark and the computer screen that shows bad search results.

Is there any solution? And where should it start?

Don't worry! Solving these problems with Breadcrumbs Navigation is not difficult. And has a value that is worth more than expected! Let's see where you should start. And what techniques

First step: Understand your website structure

Before starting to put breadcrumbs, you must understand the structure of the website itself first, how many levels. Which page is under which page? For example: Home> Category> Products or main page> Service> Sub -service> Articles

Techniques for solving problems with Breadcrumps Navigation

1. Clear breadcrumbs design and easy to use:
   • Position: Should be placed on the top of the main content. Under the main navigation menu or under the H1 of the page so that users can easily see
   • Format: Use the text forms with arrows or marks ">" separate between the face, such as the main page> Products> T -shirts
   • Color and size: Use color and size of the characters that are easy to read. Does not swallow with the background But not outstanding to compete for attention from the main content
2. Use Breadcrumbs Based on Hierachy (according to hierarchy):
   • This is the most common and recommended forms for SEO, which will show the route according to the real website structure, such as Home> Category> Subcategory> Current Page.
   • This allows both users and Google to understand the hierarchy of the website clearly.
3. Make sure that every page has the right breadcrumbs:
   • Except for the homepage (Homepage), every page should have Breadcrumbs that lead back to the main pages and pages involved.
   • The link in Breadcrumbs must be a clickable link and use the user to the right destination.
4. use Breadcrumblist schema markup:
   • This is the "SEO", the most important Breadcrumbs! Increasing the Breadcrumblist Structured (in the form of JSON-LD) into the code of the website will help Google understand your website structure better and may display your breadcrumbs in the search results (Rich Snippet), which will make your link more click.
   • You can use various tools such as Google Search Central to check if your Schema Markup is correct.
5. Making Mobile-Friendly:
   • Do not forget that many users access the website via mobile. Make sure your Breadcrumbs show well on a small screen. Not too big Or complicated until difficult to read
   • If there is too much hierarchy on mobile May consider some hidden or use Javascript to shorten the "..." between the main and current main pages. To save space
6. Tie the internal links appropriately:
   • Breadcrumbs is a great internal link tool. It helps to distribute the Page Authority and tell Google which page is linked to which page.
   • Consider the connection of Breadcrumbs to Mega Menu that focuses on your SEO to strengthen the structure. You can see samples from Webflow SEO Friendly Mega Menu .

Starting from Your "website survey" is the most important point. After that, it began to adapt these techniques step by step.

Prompt for illustrations: The hand image of Breadcrumbs's jigsaw puzzle on a clear website diagram. Represents the structure

Examples from the real thing that used to be successful

In order to clearly see that Breadcrumbs Navigation can actually create a tangible results. I would like to share an example from one of the "E-Commerce websites" that sell electronic devices. Which had encountered a problem with user and conversion rate

Original problem: The user is confused, Google does not understand.

Their original website does not have a clear Breadcrumbs or is it just a normal message. That cannot click When users enter the product directly from Google, they are often confused about which category of this product is in. Or will go back to see other products In the same category As a result, the high Cart Abandonment Rate and most users go out of the page without exploring other parts. Of the website. Google itself, it seems to take a long time to crawl. And does not rank some pages as well as it should be

Method: Install Breadcrumps Navigation with Schema Markup

The team decided to "overhaul" the new navigation. One of the key is to install the correct Breadcrumbs Navigation. They proceed as follows:

• Website structure analysis: creating a new website plan To make sure that there is a clear hierarchy (such as the main page> Computer> Laptop> Macbook Pro)
• Clear breadcrumbs design: place Breadcrumbs at a clear position on the top of the product and page. Use the font size and contrasting colors. And allows every link in Breadcrumbs to click
• Pilot with Schema Markup: Add BreadcrumbList Schema Markup (JSON-LD) to all functions. There is a breadcrumbs to tell Google clearly that this is the structure of the website.
• Improve Mobile Experience: Make sure that Breadcrumbs do not obstruct on mobile usage. And still easy to read and click

Results: Selling, SEO is noticeably better!

After using Breadcrumbs Navigation for just a few months The result is:

• Conversion Rate increased by 15%: users can easily find related products and categories. Makes the purchase decision faster
• Bookce Rate decreased by 8%: users spent longer on the website. And explore more windows
• The SEO ranking is better: many pages of products began to appear as Rich Snippe in the search results of Google (showing Breadcrumbs under the link name), making the link more interesting and more likely to click. Traffic from Organic Search has increased clearly.
• CART ABANDONMENT RATE has reduced by 10%: users travel through the process of choosing products more easily. Reduce the opportunity to throw away baskets

This is a proof that Breadcrumbs is not just a "breadcrum", but a "tool" that is really powerful in your website efficiency.

Prompt for illustrations: E-Commerce website with a clear Breadcrumbs with increased sales graphs and Google Search Results icons that show Rich Snippet.

If wanting to follow, what to do? (Can be used immediately)

Ready to upgrade your website with Breadcrumps Navigation, right? This is a simple checklist that you can follow immediately:

1. Assess your current website structure:
   • Draw a simple website plan. In order to see the overall hierarchy (main page> Category> Page/Article)
   • Specify which page is the main page in front of the mother and child
2. Choose the position of Breadcrumbs:
   • The best position is "The top of the main content" (above the H1 or under the navigation menu)
   • In line with the recommended practices for familiar users
3. Designed and created Breadcrumbs:
   • Use easy -to -understand text: The page name in Breadcrumbs should be the same name as the real name.
   • Use the right separation: such as > or /
   • Make the link. Click: All parts of Breadcrumbs except the current page. Should be a link that can click back to the mother's face or main page
   • Style adjustment: Use CSS to control the size, color, and distance to look clean and easy to read. Do not disturb the main content
4. install BreadcrumbList Schema Markup (JSON-LD):
   • This is an important step for SEO.
   • If you use CMS such as WordPress, there may be a plugin (such as Yoast SEO) that helps to create a Schema Markup automatically.
   • If it's a Webflow or Custom Code, you will have to put the JSON-LD code in Of each page
   • Example code:
     {
"@context": "https://schema.org/",
"@type": "BreadcrumbList",
"itemListElement": [{
"@type": "ListItem",
"position": 1,
"name": "หน้าหลัก",
"item": "https://www.yourwebsite.com/"
},{
"@type": "ListItem",
"position": 2,
"name": "หมวดหมู่",
"item": "https://www.yourwebsite.com/category/"
},{
"@type": "ListItem",
"position": 3,
"name": "หน้าปัจจุบัน",
"item": "https://www.yourwebsite.com/category/current-page/"
}]
}
     
5. Test and improve:
   • Test on Desktop and Mobile: Check that Breadcrumbs shows the results correctly, beautifully and easy to use in all devices.
   • Use Google Rich Results Test : Check that your Schema Markup is correct and Google can read.
   • Check Broken Links: Make sure that the link in Breadcrumbs is not broken.
6. Related Internal Link:
   • In addition to using Breadcrumbs, the creation of a good internal link in the article content also helps to enhance SEO, for example, you may recommend readers to study more about creating a friendly FAQ page, which may be part of your website structure.

This checklist will give you a friendly breadcrumbs navigation with both users and Google! And if you need help from UX/UI experts to design complex structures Or making the website to be most effective Don't hesitate to consult Vision X Brain UX/UI experts for the best results

Prompt for illustrations: Checklist images that have all the correct marks Easily represents the steps.

Questions that people tend to wonder And the answers that are cleared

After we have learned about the importance and method of making Breadcrumbs Navigation, I believe that many of you may still have some questions. I have compiled a popular question with a clear answer.

Q1: Breadcrumbs, is it necessary for all types of websites?

A: In principle "Very necessary", especially for websites with complicated structures There are many sub-categories, such as e-commerce websites, news websites, blogs with a variety of categories, or large websites with a lot of content. For a small website with a few pages, Breadcrumbs may not be that much. But having it is still better than none Because it always helps UX

Q2: Using Breadcrumbs will make our Internal Links "duplicate"? And will Google think that spam?

A: Not at all! Breadcrumbs is one of the Internal Links that Google understands and even likes. It does not cause duplication in a damaged way. But it helps Google understand the hierarchy and relationship between the windows. On your website even better Moreover, the use of Breadcrumblist Schema Markup is even more confirming to Google that this is the correct and useful navigation structure to users.

Q3: Where should I put the Breadcrumbs on the web page?

A: The most suitable position is "The top of the main content" or "under the main navigation menu". Usually, it is under the Header or Navigation Bar of the website because it is a location that users are familiar with and look to understand where they are on the website. The placement in this position also helps the Google Bot crawling and easy to understand.

Q4: If our website has a page or an article in many categories at the same time, how should Breadcrumbs do?

A: This is a common situation. The best way is "Choose only one main route" that is the most reasonable for your users and your business, for example, if one product is in the "shirt" category and "promotion", choose the "shirt" category as the main route in Breadcrumbs because it is the main product structure and use the internal link to connect to the page "promotion" so as not to be too complicated.

Q5: Have any tools or plugs that help create breadcrumbs in CMS, such as WordPress easily?

A: Of course! For WordPress, the popular SEO plugin, Yoast Seo or Rank Math, has features for opening and easily set the Breadcrumbs, as well as creating the Schema Markup automatically. For the webflow, or a website created with the Custom Code, you may need to use additional code to write the code in the section. "If wanting to follow, what to do?"

Prompt for illustrations: Q&A BUBBLE images floating above the Google logo and the smiling user icon like receiving answers.

Summary to be easy to understand + want to try to do

How are you? With the story "Breadcrumbs Navigation: Breadcricks that help both user and Google". I hope you now understand how this small navigation has "power"!

Easy to remember that Breadcrumbs is the "true friend" of both users and Google:

• For users: It is a "life map" that helps them not lost on your website. Know where you are And where can you go next? Makes the experience (UX) excellent until wanting to stay and want to buy
• For Google: It is a "compass" that helps Google Bot understand the hierarchy of your website. Makes the ranking (SEO) effective And also helps your website to have the opportunity to display the Rich Snippet on the search results as well!

Investment with the correct design and installation of Breadcrumbs is not just a "small" improvement, but "investment" that will create a lot of rewards for your website, such as the reduced bounce rate, the increased DWELL TIME, conversion rate, and a better SEO rank.

Don't wait anymore!

I invite you to "do" from today. Let's go back and explore your website to see if there is a breadcrumbs? If you have it works well enough? If there is still no time to install it seriously!

Starting from:

1. Understand your web structure.
2. Clearly and breadcrumbs design
3. The most important is "Don't forget to put Breadcrumblist Schema Markup" to tell Google clearly!

If you feel that doing it yourself is complicated Or want experts to help take care from the beginning to the end To get a website with a strong structure and impressive Conversion Consult the Webflow expert of Vision X Brain for free! No obligation! We are ready to be a "partner" that will help "create" your website. "Guide Bread Flakes" that take users to the goal and take your business to sustainable success!

Prompt for illustrations: Hand images that are sprinkling bread flakes on the clear route on the map with Google logo and smiling user icons.

‍