In website operation, providing clear navigation paths for visitors and optimizing the crawling efficiency of search engines are key factors in improving user experience and website SEO performance.Breadcrumbs navigation is a feature that can intuitively display the hierarchical position of the current page the user is on, and provide a convenient return path.For websites built using AnQiCMS, we can conveniently utilize its built-in features to automatically generate and display breadcrumb navigation that complies with SEO standards.

How to implement breadcrumb navigation in Anqi CMS

The AnQi CMS fully considered the SEO friendliness and content operation efficiency of the website from the very beginning. Its built-in template tag system provides a name forbreadcrumbThe label, used to dynamically generate breadcrumb navigation in the page.This means, you do not need to manually maintain complex navigation paths for each page. The system will automatically build out the complete hierarchy based on the current page's category, document, or single-page properties.This automation capability greatly reduces the workload of website maintenance and ensures consistency in navigation.

When a user accesses a deep page of the website, the breadcrumb tags of the security CMS can intelligently identify all the intermediate links from the homepage to the current page and display them in the form of links.For example, if a document is located at the level of "Product > Electronic Products > Phone

Breadcrumbs navigation's SEO advantages

The SEO value of breadcrumbs navigation automatically generated by the Anqi CMS is mainly reflected in the following aspects:

  1. Enhance user experience and site navigation：Clear breadcrumb navigation helps users quickly understand the website structure and reduce a sense of disorientation.Users can easily click on any upper-level link to return to a higher-level page, improving the usability of the website.Good user experience will indirectly affect the search engine ranking.

  2. Optimize internal link structureEach link in the breadcrumb navigation is a valid link pointing to an internal page of the website.These internal links help search engine spiders better discover and index the deep pages of the website, pass page weight, and thus improve the overall website's link structure and page SEO weight.

  3. Enhance search engine understanding：Breadcrumbs navigation provides a structured way to present the hierarchy of the website.The search engine will read this information, more accurately understand the organization of the website's content, which helps to improve the visibility and relevance of the website in search results.The "high-performance architecture

  4. Compliant with SEO standard URL structure：Safe CMS supports flexible pseudo-static and 301 redirect management, allowing you to customize the URL structure.When the breadcrumb navigation is combined with these SEO-friendly URL structures, each navigation item's link will be concise, meaningful, and conducive to search engine crawling, further enhancing the SEO effect.

Integrate breadcrumb navigation in the template

To display breadcrumb navigation on your security CMS website page, you need to include the corresponding template filebreadcrumbLabel. Basic conventions for templates, common page headers or general layout files (such asbash.html, or inpartialthe directory.header.html）is an ideal location for placing breadcrumb navigation, as it usually appears on every page of the website.

You can find your template directory, usually in/templateThe path, then find the layout file in the template folder you are currently using.

In the layout file, you can use the following code snippet to automatically generate and display the breadcrumb navigation:

<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        {% breadcrumb crumbs %}
        {% for item in crumbs %}
            <li class="breadcrumb-item{% if forloop.Last %} active{% endif %}">
                {% if forloop.Last %}
                    <span>{{item.Name}}</span>
                {% else %}
                    <a href="{{item.Link}}">{{item.Name}}</a>
                {% endif %}
            </li>
        {% endfor %}
        {% endbreadcrumb %}
    </ol>
</nav>

This code first declares a<nav>element and hasaria-labelproperties that help improve accessibility. An ordered list is used internally to carry breadcrumb items.<ol>to bear the breadcrumb items.

  • {% breadcrumb crumbs %}This is the core tag, it generates an array variable namedcrumbsThe array object contains all navigation paths from the home page to the current page.
  • {% for item in crumbs %}: Iterate overcrumbseach navigation item in the array.
  • forloop.LastThis is a built-in loop variable used to determine if the current item is the last one in the loop.For breadcrumb navigation, the last item should not be a clickable link but only display the name of the current page.
  • item.Name: indicates the display name of the current navigation item.
  • item.Link: indicates the link address of the current navigation item.

Customization and Advanced Settings

Anqi CMS'sbreadcrumbTags also provide some parameters for more fine-grained control as needed:

  • indexParametersEnglish for: Used to customize the display text of "Home

    {% breadcrumb crumbs with index="网站主页" %}

  • titleParameters：Control whether the current page title is displayed in the breadcrumb navigation or displayed as custom text. By default, the current page title is displayed (title=true）。If you do not want to display the current page title, you can settitle=false:

    {% breadcrumb crumbs with title=false %}

    If you want to display a general title for the current page, such as "Article Details", you can set it like this:

    {% breadcrumb crumbs with title="文章详情" %}

  • siteIdParametersThis parameter is useful in multi-site management scenarios. If you operate multiple sites and need to generate breadcrumb navigation from data of other sites,siteIdTo implement. Generally speaking, there is no need to set this parameter, the system will automatically identify the current site.

Through these flexible configurations, you can ensure that your website not only has a feature-rich breadcrumb navigation but also fully conforms to your brand style and SEO strategy.Combine the powerful pseudo-static rule configuration of AnQi CMS, your breadcrumb navigation links will be more concise and semantic, further improving the performance of the website in search engines.

Common Questions (FAQ)

Q1: Will the display of breadcrumb navigation affect the loading speed of the website?

A1: English.englishThe breadcrumb navigation of AnQi CMS is automatically generated based on template tags. Its logic is very lightweight and rendered on the server side.The high-performance features of the Go language and the built-in static cache mechanism ensure that page generation and loading are extremely fast, and the impact on the overall performance of the website can be ignored.

Q2: Can I customize the breadcrumb navigation style?

A2: Of course. The template code provided above, we usedbreadcrumbandbreadcrumb-itemEnglish name.You can fully control the visual representation of breadcrumb navigation, including font, color, spacing, background, and more, by defining the style rules of these class names in your website's CSS file, making it perfectly blend with your website's design style.

Q3: If my website structure is flat with few levels, do I still need breadcrumb navigation?

A3: Even if the website structure is relatively flat, breadcrumb navigation still has its value.It can at least display the path of "Home > Current Page" to provide users with a clear starting point and endpoint.It is more important that, for search engines, even simple breadcrumbs can help them better understand the logical structure of your website, which is always a positive SEO signal.