How to correctly display the current page path information in the breadcrumb navigation of a website?

The website is operational, a clear navigation path is crucial for user experience and search engine optimization (SEO).When a visitor enters a deep page of the website, breadcrumb navigation (Breadcrumb Navigation) is like a guide that leads them back to the path, helping them understand their position in the website structure and conveniently return to the upper-level page.

In AnQiCMS (AnQiCMS), implementing an efficient and practical breadcrumb navigation to correctly display the path information of the current page is simpler than you imagine.AnQi CMS relies on its simple and efficient system architecture and flexible template mechanism, making this feature easy to deploy and manage.

Easily build breadcrumb navigation

The AnQi CMS is built-in with a special breadcrumb navigation tag, allowing you to directly call and display the page path in the template without writing complex logic code. This core tag isbreadcrumb.

First, let's take a look at the basic call 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 AnQi CMS that we want to get the breadcrumb path information of the current page and store it in a 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 toforloop through it to extract each path segment one by one.
3. {{item.Link}}and{{item.Name}}: inside the loop,itemrepresentcrumbsEach path segment object in the list. Eachitemcontains two key attributes:
   • Link: The URL address corresponding to the path segment.
   • NameThe display name of the path segment (for example, 'Home', 'Article Category', 'News Details').

Usually, we would place the breadcrumb navigation code in the public header of the website (header.html）or a reusable code snippet（such aspartial/breadcrumb.html), and then referenced by{% include "partial/breadcrumb.html" %}Label it to be included on all pages that need to display breadcrumbs. This ensures consistency across the entire site, and it is also convenient for subsequent maintenance and modification.

The Anqi CMS will automatically build the complete breadcrumb path based on the current page URL and the category structure, content model, and other information set in the background.No matter what your page is, whether it is an article detail, product display, single page, or category list, the system can intelligently identify and generate the corresponding path.For example, an article in the 'Industry News' category under the 'News Center' may have a path like: 首页 > 新闻中心 > 行业动态 > 文章标题.

Flexible customization: Make breadcrumbs fit your website style

The Anqi CMS breadcrumb tag not only provides basic functions but also allows you to customize according to the specific needs of your website.

1. Custom Home Display NameBy default, the first element of the breadcrumb path will be displayed as "Home Page". If you want to change it to another name, such as "My Blog" or "Website Homepage", you can do so byindexSet the parameter:

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

   This will start from 'My Blog' in your breadcrumb path.

2. Control the display of the end page title.On the article or product detail page, the last element of the breadcrumb path is usually the title of the current page. You cantitleparameter to control this behavior:

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

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

   {% breadcrumb crumbs with title=false %}
   

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

Optimization practice of breadcrumb navigation

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

• Improve user experience:Visitors can clearly understand their position on the website, reducing confusion and improving the ease of use of the website.
• Strengthen the structure of the website:Breadcrumb navigation displays the page relationship in a hierarchical structure, which helps search engines better understand the content structure of your website. For a system like Anqi CMS that focuses on SEO-friendly, this is a cherry on top.
• Add internal links:Each stage in the path is a link pointing to an internal page, which can effectively increase the quantity and quality of internal links on the website, helping with SEO rankings.
• Improve search result display:The search engine may display breadcrumb paths in search results, making your website more attractive among many results.

The static URL and 301 redirect management function provided by Anqi CMS is dedicated to optimizing URL structure and search engine crawling effect.Breadcrumbs navigation complements these features, together building a more user-friendly website environment for both users and search engines.

By using Anqi CMS simple and powerfulbreadcrumbTags, website administrators and content managers can easily implement clear, customizable breadcrumb navigation on the site, thereby improving the overall performance of the website.

Frequently Asked Questions (FAQ)

1. Why is my breadcrumb navigation not displaying the full path, and some pages only show 'Home'?

This is usually because the content of the current page is not properly associated with the category or its upper structure.Please check if the category of the page has been set and whether the category hierarchy is complete.For example, an article must be assigned to a specific category so that AnQi CMS can generate the complete breadcrumb path based on the category hierarchy.In addition, make sure thattitlethe parameter tofalse.

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

The breadcrumb tags of Anqi CMS are mainly generated automatically according to the structure of the website (such as content model, category, page)It aims to ensure the accuracy and structuring of the path. If you need a more complex one, containing unstructured custom links in the breadcrumbs, you may need to modify the template logic in depth, or ensure that the path structure you want is built through the categories and custom URL features provided by the Anqi CMS during content publishing.

What specific help does the breadcrumb navigation provide to 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 your website's deep pages and pass on page authority.
• Improving user experience signal:Users find it easier to navigate websites, reducing bounce rates and increasing dwell time, all of which are important positive signals for search engines evaluating website quality.
• Structured data potential:Although Anqi CMS'sbreadcrumbThe tag directly outputs HTML, but it can be understood by search engines as structured information, sometimes even displayed as rich snippets on search result pages, which can further improve click-through rates.