How to add multiple image URLs in Json-LD, such as the thumbnail list of an article?

As an experienced website operations expert, I am happy to elaborate in detail on how to巧妙地 integrate multiple thumbnail URLs into Json-LD data in AnQiCMS, thereby enhancing the website's search engine performance and user experience.

Efficiently integrate multiple image URLs in Json-LD using AnQi CMS: Enhance the visual appeal and search engine performance of articles

In the increasingly fierce environment of content marketing today, how to make search engines better understand and display your content becomes crucial.Json-LD as a recommended structured data format can help search engines deeply understand page content, thereby enhancing the display effect in search results, such as obtaining eye-catching rich media summaries (Rich Snippets).For articles containing multiple images, accurately presenting these image URLs in Json-LD not only allows search engines to understand the visual richness of the content, but may also result in better display in image search or specific scenarios.

The Json-LD basics and flexibility of AnQi CMS

AnQiCMS was designed with SEO-friendliness in mind. By default, it automatically generates basic Json-LD structured data for your pages, which usually includes article title, publication date, description, and a thumbnail image.This lays a good SEO foundation for your website.

However, when our article content is far more than just a picture, the default Json-LD may not fully reflect its richness.For example, a product review article may showcase multiple angles of the product, or a travel guide may include high-definition photos of multiple attractions.imageThe attribute can include a list of URLs for multiple images, rather than just one.

AnQiCMS provides high flexibility for this, through built-in{% jsonLd %}Tags, you can easily supplement or override the default generated Json-LD.This tag allows you to directly define or modify the Json-LD content in the template. AnQiCMS will automatically merge the part you define with the part generated by the system.If your custom field conflicts with the default field, the custom field will be displayed first, which provides a perfect entry for us to integrate multiple images.

Get a list of multiple thumbnails for the article

In AnQiCMS, multiple images of articles, products, or pages are usually stored in the content model.ImagesIn the field. For example, when you upload multiple images as a cover set while editing articles in the background, the URLs of these images will be collected in the article.Imagesin attributes.

We can use template tags provided by AnQiCMS, such as{% archiveDetail %}(used for articles),{% pageDetail %}(used for single pages) or{% categoryDetail %}[Used for classification], to conveniently retrieve these image lists. These tags are calledname="Images"and will return an array containing all image URLs.

For example, the code snippet to get the image list of an article may look like this:

{% archiveDetail archiveImages with name="Images" %}
{% for item in archiveImages %}
  {# 这里的 {{item}} 就是每张图片的URL #}
  <img src="{{item}}" alt=""/>
{% endfor %}
{% endarchiveDetail %}

ThisarchiveImagesNow it is an array containing all the image URLs of the article, each one{{item}}Represents the complete path of an image.

Build Multi-image Json-LD Code: Practical Steps

After understanding the custom mechanism of Json-LD and how to get the list of article images, the next step is to combine the two. Json-LD'simageProperty (when it is an array) is typically expected to be an array of string image URLs.

We will utilize{% jsonLd %}Label, and build one that conforms to the Schema.org specification.imageThe specific steps and code examples are as follows:

  1. Find the appropriate position in the article detail template.• Typically, JSON-LD scripts are placed in the page<head>tag, or immediately after<body>the tag.

  2. Use{% jsonLd %}around your custom Json-LD:

    {% jsonLd %}
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": "{% archiveDetail with name="Link" %}"
  },
  "headline": "{% archiveDetail with name="Title" %}",
  "image": [
    {% archiveDetail articleImages with name="Images" %}
    {% for item in articleImages %}
      "{{item}}"{% if not forloop.Last %},{% endif %}
    {% endfor %}
    {% endarchiveDetail %}
  ],
  "datePublished": "{{stampToDate(archive.CreatedTime, "2006-01-02T15:04:05+08:00")}}",
  "dateModified": "{{stampToDate(archive.UpdatedTime, "2006-01-02T15:04:05+08:00")}}",
  "author": {
    "@type": "Person",
    "name": "{% system with name="SiteName" %}" {# 或者文章的作者名字 #}
  },
  "publisher": {
    "@type": "Organization",
    "name": "{% system with name="SiteName" %}",
    "logo": {
      "@type": "ImageObject",
      "url": "{% system with name="SiteLogo" %}"
    }
  },
  "description": "{% archiveDetail with name="Description" %}"
}
</script>
{% endjsonLd %}

    Code analysis:

    • "image": [• Here, we explicitly declareimageThe property will be a JSON array.
    • {% archiveDetail articleImages with name="Images" %}：“We utilize”archiveDetailtags, assigning theImagesfield content toarticleImagesa variable.
    • {% for item in articleImages %}：“We traverse”}]articleImagesArray,{{item}}Represents a picture URL in each iteration.
    • "{{item}}"{% if not forloop.Last %},{% endif %}This is the key.We wrap each image URL with double quotes to make it a valid JSON string.