The secret to flexibly customizing the title display format of the Anq CMS article detail page

When operating a website, the title display format of the article detail page is a seemingly simple but crucial detail.It not only affects the identification of users in browser tabs and favorites, but is also one of the key elements of search engine optimization (SEO).A clear, attractive, and well-formatted title that can effectively increase the click-through rate of the article and the professional image of the website.AnQiCMS (AnQiCMS) provides various flexible ways to help us customize the title display format of the article detail page, allowing us to fine-tune according to actual needs.

Understand the two layers of the title: HTML<title>With the page<h1>

Before delving into customization, we first need to clarify the two main layers of the web page title:

  1. HTML<title>Tag (browser title)This is the title displayed in the browser tab, bookmark, and search engine results page (SERP).It is mainly used to inform users and search engines about the topic of the current page.In AnQi CMS, this title is usually set through the template file header<head>Part<title>Tag to control.
  2. Page<h1>Tag (Article main title)This is the main title displayed in the article content area, which is the core content title that users see first when they enter the page. It is usually in the template file<body>Part passed<h1>Tag display.

These titles may be similar in content, but they differ in control methods and optimization focus. Anqi CMS allows us to customize them separately.

Core Customization: HTML<title>Label display format

Control in AnQi CMS<title>The key to label display format lies in the templatetdkThe tag is specifically used for dynamically outputting the page title (Title), keywords (Keywords), and description (Description), which are very important meta-information for SEO.

To customize the article detail page<title>We need to modify the website template file (usuallydetail.htmlOr the custom template used on the article detail page) of<head>partly usedtdktags, and use their provided parameters to achieve different combinations:

<title>{% tdk with name="Title" siteName=true sep=" - " %}</title>

This code is one of the most commonly used title formats, which intelligently outputs in the format of "Article Title - Website Name". Let's take a look.tdkSeveral commonly used parameters of tags:

  • name="Title": This is the instruction to output the specified title content.
  • siteName=true: This parameter is very useful, it will automatically append the website name configured in the "Global Function Settings" on the backend to the end of the article title. If set tofalseIf it is not displayed, the website name will not be shown.
  • sep=" - ": This parameter allows us to customize the separator between the article title and the website name. You can set it according to your preference.-/_/|Even other symbols are allowed.

Priority and Smart Fallback

The AnqiCMS backend provides an independent "SEO Title" field for each article.To better optimize for SEO, we usually want this SEO title to be displayed first. If the SEO title is not filled in, it will automatically fallback to the title of the article itself.We can implement this priority through simple logical judgments:

<title>{% if archive.SeoTitle %}{{ archive.SeoTitle }}{% else %}{% tdk with name="Title" siteName=true sep=" - " %}{% endif %}</title>

This code first checks if the article has setSeoTitle. If it is set, it will use theSeoTitleas<title>tag content; otherwise, it will fallback to usingtdkThe default behavior of the tag (e.g. "Article Title - Website Name").

Display the parent category name

In certain scenarios, you may want to reflect the category level of the article in the title, especially for websites with multi-level categories.tdkTags also support throughshowParentParameters to include the parent category title:

<title>{% tdk with name="Title" siteName=true sep=" - " showParent=true %}</title>

Thus, the title may be displayed as "Article Title - Parent Category Name - Website Name", which adds contextual information to the title.

custom article page internal<h1>Title

article detail page internal<h1>Title, it is the article theme that the user reads directly on the page. It usually uses the title of the article or the SEO title. In the template, we can go througharchiveDetailtags or directly quotearchiveThe object's properties control.

The common usage is to display the article title directly:

<h1>{% archiveDetail with name="Title" %}</h1>

Or if you want to display the page within<h1>Also prioritize the display of SEO titles, you can adopt a logic similar to<title>the tag:

<h1>{% if archive.SeoTitle %}{{ archive.SeoTitle }}{% else %}{% archiveDetail with name="Title" %}{% endif %}</h1>

The benefits of doing this are that if the SEO title is more concise or more marketing-oriented, it can be reflected in the page content, while also maintaining consistency with<title>the tags.

Deep customization: Templates for specific articles or categories

AnQi CMS provides a very flexible template mechanism, allowing you to specify independent template files for individual articles or specific categories.This means you can have a completely different title display logic for certain important articles that require special presentation.

Operation method:

  1. Specify a custom template in the background.:

    • When publishing or editing an article, find the 'Document Template' field under 'Other Parameters'.
    • Fill in the name of the custom template file you want to use, for examplespecial_article_detail.html.
    • Similarly, when editing article categories, you can also specify "category template" and "document template" so that all articles in the category use a specific title format.

  2. Create a custom template file:

    • In the directory currently used for templates (for example/template/default/), create the corresponding template files as needed. For example, if you specifyspecial_article_detail.html, create this file.
    • If you want a specific category document to use a custom template, the template name format is usually{模型table}/{文档id}.htmlFor examplearticle/123.html.
    • In these custom template files, you have complete freedom to write<title>and<h1>Label, apply any logic and combination you want.

In this way, you can create a unique title display effect for the core content of the website, whether it is to highlight marketing information or to meet specific design styles.

Summarize the operation process

Customize the title display format of the Anqi CMS article detail page, mainly involving the following steps:

  1. Determine the display requirements: Specify the HTML<title>tags and page<h1>How tags are combined (for example: "Article Title - Website Name", "SEO Title | Category Name", etc.).
  2. Modify the template file: Enter/template/你的模板名称/The catalog, find the corresponding template file for the article detail page (usuallyarticle/detail.htmlorproduct/detail.html)
  3. Edit<head>sectionUtilizetdktags and theirname="Title"/siteName/sep/showParentwith parameters such asarchive.SeoTitlecondition judgment to build your ideal<title>format.
  4. Edit<body>sectionUtilizearchiveDetailtags or