In website operation, how to keep visitors from getting lost while browsing through vast content, maintaining a clear sense of orientation, is a crucial issue.Imagine when a user delves into a certain page of a website and is unclear about where they came from or what level they are at, they are likely to feel confused and even choose to leave.This is a well-designed and functional breadcrumb navigation that plays a crucial role, acting like a 'road sign' in the digital world, providing users with a clear return path.

English CMS (EnglishCMS) is well-versed in the art of content management and user experience, its built-inbreadcrumbLabels are the tools we use to build this kind of navigation. They can help you easily implement a structured, SEO-friendly breadcrumb navigation, significantly enhancing the user's sense of location on the website.

What is breadcrumb navigation and why is it so important?

Breadcrumbs navigation, as the name suggests, is like Hansel and Gretel's breadcrumbs scattered along the way in fairy tales, allowing users to find the path they came from at any time. It is usually presented as首页 > 分类 > 子分类 > 当前页面This hierarchical structure presents, clearly showing the current position of the user in the website content system.

Its importance is mainly reflected in the following aspects:

  1. Improve user experience, reduce bounce rate：When users directly enter the deep pages of a website through a search engine, the 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 directly closing the page.
  2. Optimize website structure, help SEOEnglish: A clear hierarchy helps search engine spiders better understand the organization of the website, improving crawling efficiency.At the same time, breadcrumb navigation is also an effective internal link, which can pass on weight and is very beneficial to SEO ranking.
  3. Save screen space, assist navigation：Compared to traditional sidebar or top menu, breadcrumb navigation displays the path in a compact line, does not occupy too much page space, but can provide an efficient auxiliary navigation function.

How to navigate through AnQiCMS?breadcrumbHow to build breadcrumb navigation with tags?

Integrating breadcrumb navigation in AnQiCMS is a very simple task. We mainly usebreadcrumbLabel and its combination.forLoop to render navigation path.

First, let's take a look at.breadcrumbThe basic usage of tags. Usually, you will place this code in the public header template file of the website (for example/template/{您的模板目录}/partial/header.htmlorbash.html), ensuring it is displayed uniformly 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,{% breadcrumb crumbs %}Defined a namedcrumbsThe variable, it is an array object that contains all the hierarchical information of the current page path. Then, we traverse the array to extract each level of the{% for item in crumbs %}Loop through this array to extract each level of theName(link name) andLink（Link address），and render it as a clickable navigation item.

breadcrumbTags provide several practical parameters to help us customize according to actual needs:

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

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

  2. titleParameter: Controls the display of the current page title.In 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.

    • Don't display the current page titleReplace withtitlesetfalse.
      
{% breadcrumb crumbs with index="首页" title=false %}
    {# ... 循环渲染内容不变 ... #}
{% endbreadcrumb %}
    • Customize the current page titleReplace withtitleSet 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: applies to multi-site managementIf you are using the multi-site management feature of AnQiCMS and need to call data from other sites in a specific site, you can usesiteIdParameter to specify. However, for most single-site websites, this parameter is usually not required to be filled in.

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

Combining HTML semantic and SEO practices

When building breadcrumb navigation, we should not only focus on the functional implementation, but also pay attention to its HTML semantics and further enhancement for SEO.

  • Semantic HTML structure：Recommended to use ordered list<ol>and list items<li>to build breadcrumb navigation, which can better express its structure. Each navigation item should also include its text. For example:<a>也应包含其文本。例如：

    <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 aesthetic effect.)

  • Structured data (JSON-LD)：To help the search engine 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 requirements, you can usejsonLdLabels come from customization or supplement. 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 %}

    Proper use of structured data can help your website display rich snippets in search results, further enhancing visibility.

By using the above method, you can flexibly and efficiently build clear breadcrumb navigation in AnQiCMS, which not only greatly enhances the browsing experience of visitors, but also lays a solid foundation for the SEO optimization of the website.Make every visit filled with a sense of direction, and every exploration smoother.

Common Questions (FAQ)

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

Q2：Breadcrumbs navigation can the current page title not be displayed? Or display a custom title?A2：Yes. ThroughbreadcrumbTagstitleParameters, you can control the display of the current page title. If set totitle=false, the current page title will not be displayed; if set totitle="自定义标题", the specified text will be displayed.

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