In modern website operations, how to effectively organize and present content is not only related to user experience, but also a key aspect of Search Engine Optimization (SEO).AnQiCMS (AnQiCMS) provides a powerful and flexible Tag tag function, which can not only help you better manage website content, but also act as a convenient entry point for users to discover related information, greatly enhancing the association of content and the interactivity of the website.
Overview of Tag labels in Anqi CMS
In the Auto CMS, the design concept of Tag label is very open and flexible.They are different from the traditional classification system, not limited to specific content models or classification levels, and can be freely used across various content types such as articles, products, etc.You can understand Tag as the topic keyword of the content, which can effectively link together documents scattered in different categories but with similar or related topics.For example, an article about "website design trends" and a "responsive website building product
Background management and content association: lay the foundation for front-end display
To effectively display and utilize Tag tags on the front-end page, it is necessary to first do well with the background settings and content association.
When you edit or publish documents, the safe CMS provides a convenient Tag input box.You can directly enter a new tag and press the Enter key to create and associate; you can also select from the system's existing tag library.This operation method allows content creators to easily add multiple relevant keywords to each document.
Further more, the AnQi CMS allows you to set independent "Tag Name", "Index Letter", "Custom URL", "SEO Title", "Tag Keywords", and "Tag Description" for each tag in the Tag tag management interface (document tag).These settings are crucial for enhancing the search engine friendliness of the Tag page.Especially the "Custom URL" feature, it can help you create clear and meaningful pseudo-static URLs, which is very beneficial for SEO inclusion and user memory.By configuring special SEO information for the Tag label, you can ensure that each Tag page performs better in search engines.
Front-end page display: Make Tag labels come alive
Once the Tag label is associated with content in the background and configured, the next step is how to cleverly display them on the front-end page and transform them into an entry point for users to explore content.AutoCMS provides dedicated template tags to make this process simple and intuitive.
Display related Tag on the document detail page
On the article or product detail page, displaying the Tag label associated with the content is the most direct way to associate the content.This can help readers quickly understand the multiple themes of the current content and guide them to explore more related content.
You can usetagListTags can be used to get the list of associated Tags of the current document. You can call it like this in the template of the document detail page.
<div>
<strong>相关话题：</strong>
{% tagList tags with itemId=archive.Id limit="10" %} {# 获取当前文档的最多10个Tag #}
{% for item in tags %}
<a href="{{item.Link}}" class="tag-link">{{item.Title}}</a> {# 每个Tag都是一个可点击的链接 #}
{% endfor %}
{% endtagList %}
</div>
This code will iterate over the current document (archive.Id）Associated with all Tags, and generate a series of clickable links.Users can click on these links to jump to the exclusive page of the Tag, and view all documents associated with this Tag.
Create Tag tag list page: Explore all topics
To provide an overview of all popular topics or keywords on the website, you can create a dedicated 'Tag Tag List Page'. Typically, this page corresponds to the directory under your template.tag/index.htmlfile.
In this page, you can usetagListtags to display all the Tags on the website, and can combine the pagination feature to make the list easier to browse:
<div class="tag-cloud">
<h2>热门标签</h2>
{% tagList tags with type="page" limit="50" %} {# type="page"启用分页，limit设置每页显示数量 #}
{% for item in tags %}
<a href="{{item.Link}}" title="共{{ item.ArchiveCount }}篇文章">{{item.Title}} ({{item.ArchiveCount}})</a>
{% endfor %}
{% endtagList %}
{# 如果标签数量多，可能需要分页 #}
<div class="pagination">
{% pagination pages with show="5" %}
{# 这里可以放置分页链接的代码，参考pagination标签用法 #}
{% endpagination %}
</div>
</div>
This code will list all the Tags on the website and display the number of documents associated with each TagArchiveCount）。Users can discover all topics on the website through this page and delve deeper into their interests.
Create a document list page under the Tag tag: Focus on a specific topic
When a user clicks on a Tag link, they expect to see all documents associated with that Tag. This page usually corresponds to your template directory undertag/list.htmlfile.
Here, you need to usetagDataListGet the document list associated with the current Tag by using the label.This label will automatically read the current page's Tag ID (if included in the URL) and retrieve all related articles or products.
<div class="tag-documents">
{% tagDetail currentTag with name="Title" %} {# 获取当前Tag的标题 #}
<h2>标签：{{ currentTag }}</h2>
{% tagDataList archives with type="page" limit="10" %} {# 获取与当前Tag关联的文档列表，并启用分页 #}
{% for item in archives %}
<article>
<h3><a href="{{item.Link}}">{{item.Title}}</a></h3>
<p>{{item.Description}}</p>
<p class="meta">发布于：{{stampToDate(item.CreatedTime, "2006-01-02")}} | 阅读：{{item.Views}}</p>
</article>
{% endfor %}
{% empty %}
<p>当前标签下没有找到任何文档。</p>
{% endtagDataList %}
{# 文档列表的分页导航 #}
<div class="pagination">
{% pagination pages with show="5" %}
{# 这里放置分页链接的代码 #}
{% endpagination %}
</div>
</div>
This code will first display the current Tag's title, then list all documents associated with the Tag, and provide pagination functionality.So, users can easily browse all content under a specific topic.
Tag detail page information display
In addition to the document list, the Tag itself can also have a detail page to display its own description information, which is very valuable in terms of SEO and user understanding. For example, you can betag/list.htmlDescription and Logo added to the page Tag.
You can usetagDetailTag to get the detailed information of the current Tag:
<div class="tag-info">
{% tagDetail tagInfo with name="Title" %}
<h1>{{ tagInfo }}</h1>
{% tagDetail tagDesc with name="Description" %}
{% if tagDesc %}
<p>{{ tagDesc }}</p> {# 显示Tag的简介 #}
{% endif %}
{% tagDetail tagLogo with name="Logo" %}
{% if tagLogo %}
<img src="{{ tagLogo }}" alt="{{ tagInfo }}" class="tag-logo"> {# 显示Tag的Logo #}
{% endif %}
</div>
This code will be displayed at the top of the Tag document list page, showing the Tag name, description, and Logo, providing users with more comprehensive Tag information.
Tag label as the value of content association entry
Tag labels play multiple roles in the Aq CMS through the above front-end display strategy:
- Enhance the discoverability of content：Users can easily find more related content by clicking on Tag, which extends the time users spend on the website.
- Optimize the website navigation structureEnglish: Tag provides another way of content organization besides classification, enriching the internal link and navigation hierarchy of the website.
- Enhance SEO effectEach Tag page is an independent special topic page, which, with customized URLs and SEO metadata, helps attract search engine crawling and improve keyword rankings.
- Promote user participation: Clear Tag display helps users understand the structure of the website content, encouraging them to explore and interact.
Summary
The Tag label feature of AnQi CMS is a powerful and flexible tool, which allows content operators to manage and associate content more precisely.Through carefully designed backend tag information and frontend display methods, we can transform Tag labels from simple keywords into important hubs in the website content ecosystem, bringing users a smoother, more in-depth browsing experience, and also injecting new vitality into the website's SEO performance.
Common Questions (FAQ)
Q1: What is the difference between the Tag label and category in Secure CMS? A1:Categories usually represent the hierarchical structure of content, with clear relationships between superiors and subordinates, used to organize a wide range of content topics.While Tag labels are more like keywords or topics of content, they can cross different categories and associate content horizontally.A content can belong to a category, but can have multiple Tag tags, thus achieving finer-grained content organization and multi-dimensional content association.
What are the benefits of setting a 'custom URL' for the Tag label? A2:Setting custom URLs for Tag labels has two major benefits: one is to enhance user experience, making URLs more readable and memorable; the other is to greatly optimize SEO, as search engines prefer semantic and clear URL structures, which helps improve the inclusion and ranking of Tag pages.At the same time, custom URLs also avoid issues with unattractive or not meeting business requirements due to default system IDs.
Q3: How to implement pagination on the Tag tag list page or the document list page under Tag?
A3:In the AnQi CMS, you can enable pagination feature bytagListortagDataListtag.type="page"parameter. Once enabled,type="page"，You can use it right after the code blockpaginationtags to generate pagination navigation links.paginationtags can be configuredshowThe parameter controls how many pagination page numbers are displayed, thus providing users with a complete page navigation experience.