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

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 recognition of users in browser tabs and bookmarks, but is also one of the key elements of search engine optimization (SEO).A clear, attractive, and well-formatted title can effectively enhance the click-through rate of the article and the professional image of the website.AnQiCMS provides various flexible ways to help us customize the title display format of the article detail page, allowing us to fine-tune it according to actual needs.

Understanding the two aspects of the title: HTML<title>With the page<h1>

Before we delve into customization, we first need to clarify the two main aspects of the webpage title:

  1. HTML<title>tags (browser title)This is the title displayed in the browser tab, favorites, and search engine results page (SERP).It is mainly used to inform users and search engines about the theme of the current page.<head>of the<title>tags to control.
  2. Page<h1>Tag (article main title): This is the large title displayed within the article content area. It is the core content title that users see first when entering the page. It is usually in the template file<body>Partially passed<h1>Labels displayed.

Although these titles may have similar content, they are different in control methods and optimization focuses. Safe CMS allows us to customize them separately.

Core Customization: HTML<title>Display Format of Tags

Control in AnQi CMS<title>The key to displaying tag formats lies in thetdkLabel.This 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's<title>We need to add tags in the website template file (usuallydetail.htmlor the custom template used in article detail pages),<head>template usetdkand use the 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'.tdkSeveral commonly used parameters of tags:

  • name="Title"This is the instruction to output the specified title content.
  • siteName=trueThis parameter is very practical, it will automatically append the site name configured in the background "Global Feature Settings" of the site to the end of the article title if set.falseIf so, the website name will not be displayed.
  • 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.

Priority and Smart Fallback

The backend of AnQi CMS provides an independent "SEO Title" field for each article.In order to better optimize for SEO, we generally hope that this SEO title is displayed first. If the SEO title is not filled in, it will automatically fallback to the title of the article itself.

<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 set, it will directly useSeoTitleas<title>the content of the tag; otherwise, it will fallback to usingtdkThe default behavior of the label (e.g., "Article Title - Website Name").

Display the name of the parent category.

In some cases, you may want to reflect the category level in the article title, especially for websites with multi-level categories.tdkTags also support throughshowParentParameter to include the parent category title:

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

As a result, the title may display as “Article Title - Parent Category Name - Website Name”, which adds contextual information to the title.

Custom article page inside<h1>Title

Article details page inside<h1>Title, it is the article theme that users read directly on the page. It usually uses the article title or SEO title directly. In the template, we can usearchiveDetailtags or directly quotearchiveControl the properties of the object.

The common usage is to directly display the article title:

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

Or, if you want to make the page content<h1>also give priority to the SEO title, you can use 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 is 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.

[en]Deeper customization: Templates for specific articles or categories

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

[en]Operation method:

  1. [en]Specify a custom template in the background:

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

  2. Create a custom template file:

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

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 CMS article detail page, mainly involving the following steps:

  1. Determine the display requirements: Specify the HTML<title>tags and page<h1>How to combine tags (e.g., "Article Title - Website Name
  2. Modify template files: Enter/template/你的模板名称/Table of contents, find the template file corresponding to the article detail page (usuallyarticle/detail.htmlorproduct/detail.html).
  3. Edit<head>Part: UtilizingtdkTags and theirname="Title"/siteName/sep/showParentetc.), as well asarchive.SeoTitlecondition judgment to build your ideal<title>Format.
  4. Edit<body>Part: UtilizingarchiveDetailor