How to build a clear breadcrumb navigation through `breadcrumb` tags to enhance users' sense of positioning on the website?

In website operation, how to keep visitors from feeling lost while browsing through vast content, maintaining a clear sense of direction is a crucial issue.Imagine when a user delves into a page on a website and is unclear about where they came from or what level they are at, they are easily confused and may even choose to leave.At this point, a well-designed and functional breadcrumb navigation can play a crucial role, as it is like a 'road sign' in the digital world, providing users with a clear return path.

AnQiCMS (AnQiCMS) is well-versed in content management and user experience, its built-inbreadcrumbThe tag is the tool we use to build this kind of navigation. It can help you easily implement a structured, SEO-friendly breadcrumb navigation, significantly enhancing the user's sense of orientation on the website.

What is breadcrumb navigation and why is it so important?

Breadcrumb Navigation, as the name implies, is like Hansel and Gretel dropping breadcrumbs along the way in a fairy tale, allowing users to find the way back at any time. It is usually presented in首页 > 分类 > 子分类 > 当前页面This hierarchical structure presents, clearly showing the user's current position in the website content system.

It is important mainly in the following aspects:

1. Improve user experience, reduce bounce rateWhen a user directly enters a deep page of a website through a search engine, breadcrumb navigation can quickly inform them of the context of the current page, avoiding the confusion of 'searching for a needle in a haystack'.Users can easily click on the previous level to explore more related content instead of closing the page directly.
2. Optimize website structure, assist SEO：A clear hierarchy helps search engine spiders better understand the organization of the website, improving crawling efficiency.At the same time, breadcrumb navigation itself is an effective internal link, able to pass on weight, and is very beneficial for SEO ranking.
3. Save screen space, assist navigationCompared to traditional sidebars or top menus, breadcrumb navigation displays the path in a compact line, does not occupy too much page space, and can provide an efficient auxiliary navigation function.

How to use AnQiCMS tobreadcrumbbuild breadcrumb navigation with tags?

Integrating breadcrumb navigation in AnQiCMS is a very simple thing. We mainly usebreadcrumbLabels and their combinationsforLoop to render navigation path

First, let's take a look atbreadcrumbThe basic usage of tags. Typically, you will place this code in the public header template file of the website (such as/template/{您的模板目录}/partial/header.htmlorbash.html) to ensure it is displayed consistently on all pages:

<nav class="breadcrumb-nav">
    {% breadcrumb crumbs with index="首页" title=true %}
    <ul>
        {% for item in crumbs %}
            <li><a href="{{item.Link}}">{{item.Name}}</a></li>
        {% endfor %}
    </ul>
    {% endbreadcrumb %}
</nav>

In this code block,{% breadcrumb crumbs %}Defined a namedcrumbsThe variable, it is an array object that contains all the levels of information on the current page path. Then, we{% for item in crumbs %}loop through this array and extract each level of theName(link name) andLink(Link address), and render it as a clickable navigation item.

breadcrumbThe tag provides several practical parameters to help us customize according to actual needs:

1. indexParameter: Customize the home page nameBy default, the starting point of the breadcrumb navigation is "Home Page". If you want to change it to another name, such as "My Website Homepage" or your brand name, you can useindexSet the parameter:

   {% breadcrumb crumbs with index="我的网站主页" title=true %}
       {# ... 循环渲染内容不变 ... #}
   {% endbreadcrumb %}
   

2. titleParameter: Controls the display of the current page titleIn some cases, you may not want to display the full title of the current page at the end of the breadcrumb navigation, or you may want to set a simpler name for it.titleParameters can help us achieve this.

   • Do not display the current page title: Totitleis set tofalse.

     
     {% breadcrumb crumbs with index="首页" title=false %}
         {# ... 循环渲染内容不变 ... #}
     {% endbreadcrumb %}
     

   • Customize the current page title: TotitleSet it to the specific string you want, for example, "Article Details".

     
     {% breadcrumb crumbs with index="首页" title="文章详情" %}
         {# ... 循环渲染内容不变 ... #}
     {% endbreadcrumb %}
     

     titleThe default value of the parameter istruewhich will automatically display the full title of the current page.

3. siteIdParameter: Suitable for multi-site managementIf you are using the AnQiCMS multi-site management feature and need to call data from other sites on a specific site, you can usesiteIdSpecify the parameter. However, for most single-site websites, this parameter is usually not required.

   {% breadcrumb crumbs with siteId="2" %}
       {# ... 循环渲染内容不变 ... #}
   {% endbreadcrumb %}
   

Combine HTML semantics with SEO practices.

When building breadcrumb navigation, we should also pay attention to its HTML semantics and further enhancement for SEO.

• Semantic HTML structureRecommended to use ordered list<ol>and list item<li>to build breadcrumb navigation, which can better express its structure. Each navigation item should contain its text. For example:<a>should also include its text. For example:

  <nav aria-label="breadcrumb">
      <ol class="breadcrumb">
          {% breadcrumb crumbs with index="首页" title=true %}
          {% for item in crumbs %}
              <li class="breadcrumb-item"><a href="{{item.Link}}">{{item.Name}}</a></li>
          {% endfor %}
          {% endbreadcrumb %}
      </ol>
  </nav>
  

  (Please note that you need to add CSS styles yourself to achieve an aesthetically pleasing effect.)

• Structured data (JSON-LD): To help search engines better understand the hierarchy of breadcrumb navigation, you can consider adding JSON-LD structured data. AnQiCMS usually automatically generates most of the necessary structured data, but if you have advanced customization needs, you can usejsonLdTags can be customized or supplemented. For example:

  {% jsonLd %}
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    "itemListElement": [
      {# 这里可以手动或通过循环渲染面包屑项的JSON-LD数据 #}
      {
        "@type": "ListItem",
        "position": 1,
        "name": "首页",
        "item": "https://www.yourdomain.com/"
      }
    ]
  }
  </script>
  {% endjsonLd %}
  

  Using structured data correctly can help your website display rich snippets in search results, further enhancing visibility.

By following this method, you can flexibly and efficiently build clear breadcrumb navigation in AnQiCMS, which can not only greatly improve the browsing experience of visitors, but also lay a solid foundation for the website's SEO optimization.Make every visit filled with a sense of direction, and every exploration more smooth.

Frequently Asked Questions (FAQ)

Q1: How to modify the text content of the 'Home' in the breadcrumb navigation?A1: You can usebreadcrumblabel'sindexparameter to specify the display name of the home page. For example, toindex="我的站点主页"Add to the tag, and you can replace 'Home' with 'My Site Homepage'.

Q2: Can the title of the current page be hidden in the breadcrumb navigation? Or can a custom title be displayed?A2: Yes. Throughbreadcrumblabel'stitleParameter, you can control the display of the current page title. If set totitle=falsethen the current page title will not be displayed; if set totitle="自定义标题"then the specified text will be displayed.

Q3: Where should I place the breadcrumbs navigation code on the website template?A3: To ensure that the breadcrumb navigation is displayed uniformly on all pages and is easy to manage, it is recommended to place it in the common header template file of the website, for example/template/{您的模板目录}/partial/header.htmlorbash.htmlChinese. This way, all pages inheriting or containing these public files will automatically have breadcrumb navigation.