How to set the document title, introduction, thumbnail, and optimize its display effect on the list and detail pages?

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 of content display, but also the key to improving user experience and search engine optimization (SEO) effectiveness.Reasonably set and optimize their display on list and detail pages, making our website content more attractive and easier for search engines to crawl and understand.

Backend basic settings: make content information clear and accurate

In the AnQiCMS backend, whether it is publishing articles, products, or creating single pages, we will see a series of operations used to set these core information.

1. Document Title: The Gateway to ContentEach piece of content needs an eye-catching title. InContent Management > Publish DocumentThe page, 'Document Title' is a required field. This title is typically the largest font size title seen by the user on the page (usually mapped to HTML's<h1>Tags), directly reflect the core content of the article or product. A clear, accurate, and attractive title is the first step in attracting users to click and read.

2. Document Summary: An Overview and Summary of the Content“Document summary” is a concise summary of the key points of the content.It not only helps users quickly understand the outline of the content, but is also an important basis for search engines to judge the relevance of the content.When publishing content, if a manual summary is 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 brief introduction.We recommend writing a high-quality introduction manually, as it has the opportunity to be displayed as a summary in the search results and directly affect the click-through rate.

3. Document Thumbnail: Visual Focus and Content PreviewThe "Document Image" field is used to set the document thumbnail.The thumbnail is a visual representation of the content, particularly important on list pages, and can greatly enhance the attractiveness of the content.We can either select from the uploaded image library or upload new images.AnQiCMS also provides convenient automatic processing features: if the content contains images but no thumbnail is manually specified, the system will automatically extract the first image in the content as the thumbnail.This means that even if you forget to upload, the content will not be missing visual elements.

4. SEO-Specific Information: Deepening Search Engine FriendlinessIn addition to the title and summary facing the user, AnQiCMS also provides fields specifically for search engine optimization, such as "SEO Title", "Keywords", and "Tag Description" (for tags) or "Page Keywords" (for single pages).

   • SEO titleAllow us to page for the<title>Tag settings are different from the main title content. This is very useful for displaying more competitive titles in search engine results pages or solving the problem of a long main title.
   • KeywordsThe field allows us to clearly tell the search engine the core theme of the current page. Keywords are separated by English commas,This conforms to the search engine's inclusion habits.
   • Tab descriptionorPage summaryThen for these specific pagesdescriptionMeta tags provide content, further optimizing the search results summary

The charm of list pages: how to stand out from the content

The list page is the main entry for users to browse website content, where the display effects of the title, summary, and thumbnail directly determine the click-through rate of the content.

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 usually as a hyperlink, linking to the detailed page of the content. Make sure the title is concise and clear, able to attract users instantly.
• Introduction:{{item.Description}}As a supplement to the title, briefly describe the key points of the content. If the introduction is too long, it can be combinedtruncatecharswith a 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 the list page.item.LogoIt may be the original main image. We can use it in the template.<img>tags to display it, for example<img src="{{item.Thumb}}" alt="{{item.Title}}">. Don't forget to add an imagealtAttribute, which not only helps with SEO but also provides text when the image fails to load.

For example, a typical list item might look 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.

The presentation of the detail page: in-depth visual guidance of the content

The detail page is the place where users deeply read the content, and it needs to be displayed comprehensively and beautifully here.

On the detail page, we mainly utilize{% archiveDetail %}tags to obtain the detailed information of the current document.

• Page title (<title>Label):In order to optimize SEO, the page's<title>tags should be used{% tdk with name="Title" siteName=true %}Dynamically generated, it will prioritize the 'SEO title' we set, or fallback to the document title, and can also be appended with 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>Label, this is the visual focus of the content.
• Introduction:{{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}}The details page usually displays clearer, larger images.archive.LogoIt usually provides more original images,archive.ThumbThis is a thumbnail generated by the system. We can choose a suitable one according to the template design, or insert multiple images to display in the content.
• Content:{{archive.Content|safe}}or{{archive.Content|render|safe}}This is the core of the detail page.|safeThe filter is required to ensure that HTML content is correctly parsed and displayed, 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, the 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 in list and detail pages.

1. Thumbnail processing method and size (content settings):InBack-end settings > Content settingsIn it, we can find the 'thumbnail processing method'