AnQiCMS provides a comprehensive mechanism to help us manage the title, summary, and thumbnail of website content in detail.These elements are not only the foundation for content display, but also the key to improving user experience and SEO (Search Engine Optimization) effectiveness.Reasonably set and optimize their display on the list page and detail page, which can make our website content more attractive and easier to be indexed and understood by search engines.
Background basic settings: make content information clear and accurate
In AnQiCMS backend, whether it is to publish articles, products, or create single pages, we will see a series of operations used to set these core information.
Document Title: The Facade of ContentEach piece of content needs an attention-grabbing title. InContent Management > Publish DocumentPage, "Document Title" is a required field. This title is typically the largest font size title that users see on the page (usually mapped to HTML's
<h1>Label），directly reflects the core content of the article or product. A clear, accurate, and attractive title is the first step to attracting users to click and read.Document Overview: An Overview and Summary of the ContentThe document summary is a concise summary of the core content.It can not only help users quickly understand the content outline, but it is also an important basis for search engines to judge the relevance of content.When publishing content, if a summary is manually filled in, the system will prioritize its use.If left blank, AnQiCMS will intelligently extract the first 150 characters from the document content as a summary.We recommend manually writing a high-quality summary as it has the opportunity to be displayed as a snippet in search results, directly affecting the click-through rate.
Document Thumbnail: Visual Focus and Content PreviewThe "Document Image" field is used to set the document thumbnail.Thumbnail is the visual representation of the content, especially important on list pages, which can greatly enhance the attractiveness of the content.We can either choose from the uploaded image library or upload new images.AnQiCMS 同样提供了贴心的自动处理功能：如果内容中包含图片但未手动指定缩略图，系统会自动将内容中的第一张图片提取出来作为缩略图。This means that even if you forget to upload, the content will not be missing visual elements.
SEO-Specific Information: Deepening Search Engine FriendlinessIn addition to the title and summary facing users, AnQiCMS also provides fields specifically for search engine optimization, such as 'SEO Title', 'Keywords', and 'Tag Summary' (for tags) or 'Page Keywords' (for single pages).
- SEO titleAllow us to add to the page of
<title>The content of the label settings is different from the main title. This is very useful for displaying more competitive titles in search engine results pages, or solving the problem of long main titles. - KeywordsField allows us to clearly tell the search engine the core topic of the current page. Separate multiple keywords with English commas
,Comma-separated, which conforms to the inclusion habits of search engines. - Label IntroductionorPage summaryThen for these specific pages,
descriptionThe meta tag provides content, further optimizing the summary of search results.
- SEO titleAllow us to add to the page of
The charm of list pages: how to make content stand out
The list page is the main entry for users to browse website content, where the display effects of the title, introduction, and thumbnail directly determine the click-through rate.
In AnQiCMS templates, we mainly use{% archiveList %}tags to get the document list. In this loop, eachitemcontains the information we need:
- Title:
{{item.Title}}Displayed as hyperlinks, linking to detailed pages of content. Make sure the title is concise and clear, able to attract users at a glance. - Summary:
{{item.Description}}As a supplement to the title, briefly state the key points of the content. If the introduction is too long, you can combinetruncatecharsthe filter to truncate, for example{{item.Description|truncatechars:80}}to maintain the neatness of the list page. - Thumbnail:
{{item.Thumb}}or{{item.Logo}}item.ThumbIt is usually a thumbnail version processed by the system, suitable for direct use on list pages.item.LogoIt may be the original main image. In the template, we can use<img>tags to display it, for example<img src="{{item.Thumb}}" alt="{{item.Title}}">.Don't forget to add imagealtproperties, which not only helps SEO, but also provides text descriptions when images fail to load.
For example, a typical list item may be presented like this:
{% archiveList archives with type="page" limit="10" %}
{% for item in archives %}
<li>
<a href="{{item.Link}}">
{% if item.Thumb %}
<img alt="{{item.Title}}" src="{{item.Thumb}}">
{% endif %}
<h5>{{item.Title}}</h5>
<div>{{item.Description|truncatechars:100}}</div>
<span>发布日期：{{stampToDate(item.CreatedTime, "2006-01-02")}}</span>
<span>浏览量：{{item.Views}}</span>
</a>
</li>
{% endfor %}
{% endarchiveList %}
This layout allows users to see the title, image, and brief description at a glance, quickly determining whether they are interested.
Presentation of the detail page: in-depth visual guidance of the content
The detail page is the place where users delve into the content, and it requires a comprehensive and beautifully presented content information here.
On the detail page, we mainly utilize{% archiveDetail %}tags to obtain the detailed information of the current document.
- Page Title (
<title>Tag):To optimize SEO, the page should be<title>the tags should be used{% tdk with name="Title" siteName=true %}Generated dynamically, it will prioritize the 'SEO Title' we set, and if not available, it will fall back to the document title. It can also append the website name according to configuration, ensuring that each detail page has a unique and optimized page title. - Main Title:
{{archive.Title}}Directly displayed on the page<h1>Tags, this is the visual focus of the content. - Summary:
{{archive.Description}}Displayed below the main title or above the content area as a reminder for the user before reading. - Thumbnail or main image:
{{archive.Logo}}or{{archive.Thumb}}Details page usually shows clearer, larger images.archive.Logousually provides more original images,archive.ThumbThis is a thumbnail generated by the system. We can choose an appropriate one according to the template design, or insert multiple images to display in the content. - content you need to modify:
{{archive.Content|safe}}or{{archive.Content|render|safe}}This is the core of the detail page.|safeThe filter is mandatory to ensure that HTML content is parsed and displayed correctly, rather than being output as plain text. If the Markdown editor is enabled on the backend, the content is in Markdown format, then you need to use|render|safeFilter to convert it to HTML.
For example, a simplified structure of a detail page might look like this:
<head>
<title>{% tdk with name="Title" siteName=true %}</title>
<meta name="keywords" content="{% tdk with name="Keywords" %}">
<meta name="description" content="{% tdk with name="Description" %}">
</head>
<body>
<h1>{{archive.Title}}</h1>
<p class="description">{{archive.Description}}</p>
{% if archive.Logo %}<img src="{{archive.Logo}}" alt="{{archive.Title}}" class="main-image">{% endif %}
<div class="article-content">
{{archive.Content|render|safe}}
</div>
</body>
Global optimization: Make images and metadata more efficient
AnQiCMS provides multiple global settings in the background, which can further optimize the display effect of content on list and detail pages.
- Thumbnail processing method and size (content settings):InBackground settings u003e Content settingsIn it, we can find "Thumbnail processing method"}]