The clear navigation path is crucial for user experience and Search Engine Optimization (SEO) during website operation.When visitors enter the deep pages of the website, the breadcrumb navigation (Breadcrumb Navigation) is like a trail of breadcrumbs that guides them back to their path, helping them understand their position in the website structure, and conveniently return to the upper-level pages.

In AnQiCMS, implementing an efficient and practical breadcrumb navigation to correctly display the path information of the current page is simpler than you imagine.The Auto CMS, with its simple and efficient system architecture and flexible template mechanism, makes this feature easy to deploy and manage.

Easily set up breadcrumb navigation

The core tag is built into Anqi CMS, allowing you to call and display the page path directly in the template without writing complex logic code.breadcrumb.

Let's take a look at the basic calling method:

<div>
    {% breadcrumb crumbs %}
    <ul>
        {% for item in crumbs %}
            <li><a href="{{item.Link}}">{{item.Name}}</a></li>
        {% endfor %}
    </ul>
    {% endbreadcrumb %}
</div>

How does this code work?

  1. {% breadcrumb crumbs %}This line tells the CMS that we want to get the breadcrumb path information of the current page and store it in a variable namedcrumbs.crumbsIt is an array (or list) that contains information about each level in the path.
  2. {% for item in crumbs %}Due tocrumbsIt is a list, we need to usefora loop to iterate over it, and extract each path segment one by one.
  3. {{item.Link}}and{{item.Name}}In the loop,itemrepresentcrumbsEach path segment object in the list. Eachitemcontains two key attributes:
    • LinkThe URL address corresponding to the path segment.
    • NameThe display name of the path segment (for example, "Home

Usually, we would place the breadcrumb navigation code in the public header of the website (header.html）or some reusable code snippet（for examplepartial/breadcrumb.html), and then through{% include "partial/breadcrumb.html" %}Label it to be displayed on all pages that require breadcrumbs. This ensures consistency of breadcrumbs across the entire site and facilitates subsequent maintenance and modification.

The CMS will automatically construct the complete breadcrumb path based on the current page URL and the category structure, content model, and other settings in the background.No matter what your page is, an article detail, product display, single page, or category list, the system can intelligently recognize and generate the corresponding path.首页 > 新闻中心 > 行业动态 > 文章标题.

Flexible Customization: Make breadcrumbs fit your website style

The breadcrumb tags of Anqi CMS not only provide basic functions but also allow you to customize flexibly according to the specific needs of your website.

  1. Custom homepage display nameBy default, the first element of the breadcrumb path is displayed as “Home Page”. If you want to change it to another name, such as “My Blog” or “Website Homepage”, you canindexset the parameter to:

    {% breadcrumb crumbs with index="我的博客" %}

    So, your breadcrumb path will start from “My Blog”.

  2. Control the display of the end page titleIn the article or product detail page, the last element of the breadcrumb path is usually the title of the current page. You cantitleparameters:

    • title=true(Default): Display the full title of the current page.
    • title=falseEnglish: Do not display the current page title, the breadcrumb path ends at its parent category.
    • title="文章详情"：Customize the display text of the end page, for example, display 'Article Details' on all article detail pages instead of the specific article title.

    For example, if you want to only display the category in the breadcrumb of the article detail page and not display the article title, you can set it like this:

    {% breadcrumb crumbs with title=false %}

  3. Data call in multi-site scenariosFor those users who operate multiple websites using the multi-site management function of A Security CMS,siteIdThe parameter allows you to call breadcrumb data from a specific site when needed.However, in most cases, if you are only configuring breadcrumbs for the current site, this parameter can be omitted, and Safe CMS will handle it intelligently.

Optimization practice of breadcrumb navigation

Effectively using breadcrumb navigation can not only enhance user experience but also bring significant SEO benefits to the website:

  • Enhance user experience:Visitors can clearly understand their location on the website, reduce the feeling of being lost, and improve the ease of use of the website.
  • Strengthen the website structure:Breadcrumbs navigation displays page relationships in a hierarchical structure, which helps search engines better understand the content structure of your website. This is a bonus for systems like AnQi CMS that focus on SEO-friendly features.
  • Add internal link:Each step in the path is a link to an internal page, which can effectively increase the quantity and quality of internal links on the website, benefiting SEO rankings.
  • Optimize search results display:The search engine may display breadcrumb paths in the search results, making your website more attractive among many results.

The static and 301 redirection management feature provided by Anqi CMS is committed to optimizing URL structure and search engine crawling effect.Breadcrumbs navigation complements these features, working together to create a more user and search engine friendly website environment.

Through a simple and powerful CMSbreadcrumbTags, website administrators and content operators can easily implement clear, customizable breadcrumb navigation on the website, thus enhancing the overall performance of the website.

Common Questions (FAQ)

1. Why doesn't my breadcrumb navigation show the full path, and some pages only show 'Home'?

This is usually because the content of the current page is not correctly associated with the category or its upper structure.Please check if the category to which this page belongs has been set, and whether the category hierarchy is complete.For example, an article must be assigned to a specific category, so that the security CMS can generate the complete breadcrumb path based on the category hierarchy.titleparameter settingsfalse.

2. Can I manually add custom links or text in the breadcrumb navigation?

The breadcrumb tags of Anqi CMS are mainly automatically generated based on the website structure (such as content model, category, page).It is designed to ensure the accuracy and structuring of the path.If you need a more complex breadcrumb that includes non-structured custom links, you may need to modify the template logic in-depth, or ensure that the path structure you want is built by using the categories and custom URL features provided by the CMS when content is published.

3. What specific help does the breadcrumb navigation provide for the website's SEO?

Breadcrumbs navigation helps SEO mainly in several aspects:

  • Internal link optimization:Each step in the path is an internal link, which helps search engines discover and index the deep pages of your website and pass on page authority.
  • Improve user experience signals:Users find it easier to navigate on the website, which reduces the bounce rate and increases the time spent on the site. All these are important positive signals for search engines to evaluate the quality of a website.
  • Potential of structured data:Although the Anqi CMS isbreadcrumbThe tag outputs HTML directly, but it can be understood by search engines as structured information, and sometimes even displayed as rich snippets directly on the search results page, further improving the click-through rate.