How does the `add` filter assist in building dynamic `<img>` tag `alt` or `title` attribute text to optimize SEO?

In AnQi CMS, every detail of the website concerns the final operating effect, especially in terms of search engine optimization (SEO).We all know that high-quality images can attract users, but if these images are not 'understood' by search engines, their value will be greatly reduced.<img>label'saltandtitleProperties are particularly important. They not only enhance the accessibility of websites but are also the key window for conveying image content and context to search engines.

However, manually writing unique and descriptive captions for each imagealtandtitleThis feature takes a long time and is prone to errors, especially on websites with a large amount of content. This is where the flexible template features and powerful capabilities of Anqi CMS come into play.addThe filter can really shine here. By cleverly utilizingaddThe filter, we can dynamically construct these attribute texts, making them both fit the content and effectively optimize SEO.

UnderstandingaltandtitleThe importance of properties

Before delving deeperaddLet's quickly review before the filteraltandtitleThe importance of properties for websites.

altThe attribute, which is the alternative text, is the text that the browser displays to the user when the image cannot be displayed.For search engines, it provides text descriptions of image content, helping search engines understand the theme of the image, thus better indexing.altProperties are the only way they understand the content of images, directly related to the accessibility of the website. A goodaltThe text should be concise, accurate, and naturally incorporate relevant keywords to describe the image content.

titleThe attribute is the tooltip that appears when the user hovers over the image. It provides additional information or context about the image, which is not necessary but can be helpful.altAttribute supplement, further enhancing user experience and information communication. AlthoughtitleAttribute's direct impact on SEO is not asaltProperties, but their indirect effect is to enhance the user experience, and a good user experience is an indispensable part of SEO.

AnQi CMS is a highly SEO-focused enterprise-level content management system, which is built-in with a series of advanced SEO tools such as Sitemap generation, keyword library management, and static URLs, and its template engine naturally provides the possibility for us to fine-tune these SEO details.

The AnQi CMS template includesaddFilter: The art of concatenation

The AnQi CMS template system supports Django template engine syntax, which includes many practical filters,addThe filter is one of them.The core function is to concatenate or add two values.When you are dealing with numbers, it performs arithmetic addition; while when you are dealing with strings, it will concatenate them.altortitleWhen dealing with attribute text, we mainly utilize its ability to concatenate strings.

The usage method is very intuitive:{{ obj|add:obj2 }}. For example, if you want to concatenate '安企' and 'CMS', just write it as{{ "安企"|add:"CMS" }}This will output 'AnQi CMS'. This seemingly simple feature opens the door to dynamically generating meaningful attribute text for us.

Practical Application: Build Dynamicaltandtitleproperty

In AnQi CMS, we usually use images on article list pages, detail pages, or product display pages. We can extract information from multiple dynamic data sources such as document titles, category names, keywords, and even website names, throughaddThe filter combines them intelligently.

  1. Basic scenario: combination of image title and content title.

    Assuming your article list displays thumbnails of multiple articles, we want each thumbnail to bealtThe attribute can include the title of the image itself (if any) and the title of the article it belongs to.

    {# 假设这里的item是archiveList循环中的每一篇文章对象 #}
<img src="{{ item.Thumb }}" alt="{{ item.Title|add:" - " |add:item.Category.Title }}" loading="lazy" />

    In this code block:

    • item.ThumbIt is the thumbnail path of the article.
    • item.TitleIt is the title of the current article.
    • item.Category.TitleIs the title of the current article category.
    • |add:" - "Then it cleverly adds a separator between two dynamic texts, making the property content easier to read.

    Such, a thumbnail of an article about 'Anqi CMS template creation tutorial', if it belongs to the 'Technical Sharing' category, itsaltThe attribute may dynamically become "Anqi CMS Template Creation Tutorial - Technical Sharing", which includes the core content of the image and indicates its context, greatly enriching the amount of information.

  2. Add brand information or keywords

    To further improve SEO effects and brand exposure, we can addaltortitleIntegrate the website's brand name or article keywords. Anqi CMS provides a convenient way to obtain the global settings of the website (such as the website nameSiteName) and article keywordsKeywordstags.

    {# 假设这里的archive是archiveDetail标签获取的文档详情对象 #}
<img src="{{ archive.Logo }}"
     alt="{{ archive.Title|add:" - "|add:archive.Keywords|add:" - "|add:system.SiteName }}"
     title="{{ archive.Description }}"
     loading="lazy" />

    Here:

    • archive.TitleGet the article title.
    • archive.KeywordsGet the keywords of the article (multiple keywords are usually separated by commas, and they will all be displayed here).
    • system.SiteNameRetrieve the website name configured in the background "Global Function Settings".

    In this way, the cover image of an article about "AnQi CMS High-Performance Architecture", itsaltThe attribute may be generated as 'AnQi CMS High-performance Architecture - Go language, high concurrency, modular - AnQi CMS', which effectively includes the article title, keywords, and brand information.titleThe attribute can be reused succinctly in the article summaryarchive.Description.

  3. Process image description or custom fields

    If your content model defines a dedicated description field for images (for example, by adding a field namedimage_alt_textfield), you can also combine it with the article title.

    {# 假设内容模型中有一个自定义字段 image_alt_text #}
{% archiveDetail imageAlt with name="image_alt_text" %}
<img src="{{ archive.Logo }}"
     alt="{{ imageAlt|add:" - "|add:archive.Title }}"
     loading="lazy" />

    Here, we first go througharchiveDetailtags to get custom fieldsimage_alt_textvalues, then combine them with the article title asaltproperties. This method can achieve more refined control over image properties.

Why choose dynamic construction?

  • SEO Optimization:Dynamically generate to ensure that each image attribute includes the most relevant keywords and descriptions, which helps search engines accurately understand and index your images, thereby improving the search rankings of the images and the overall page SEO performance.
  • Improve accessibility:Provide more accurate and rich image information for visually impaired users, follow the standards of accessible web design, and expand the user base.
  • Content consistency and efficiency:Avoided manual input errors and inconsistencies, reduced labor costs, and improved content publishing efficiency.When the article title or category name changes, the image properties will also be updated automatically.
  • Adapt to future changes:If you adjust the content model or SEO strategy, you only need to modify one template code, and all related image properties can automatically adapt without individual editing.

Points to note

While usingaddFilter constructionaltandtitleWhen defining properties, you also need to pay attention to some **practices:**

  • altProperties should be concise and clear:Avoid keyword stuffing, describe the image content in natural language so that search engines and users can understand. *