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 give you a detailed explanation of how to cleverly integrate the URLs of multiple thumbnails of articles into Json-LD data in AnQiCMS, thereby improving the search engine performance and user experience of the website.

Use AnQi CMS effectively: Efficiently integrate multiple image URLs in Json-LD to enhance the visual appeal and search engine performance of articles

In today's increasingly intense content marketing environment, it is crucial to make search engines better understand and display your content.Json-LD as a recommended structured data format can help search engines deeply understand page content, thereby improving the display effect in search results, such as obtaining eye-catching rich media summaries (Rich Snippets).For an article containing multiple images, accurately presenting the 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 searches or specific scenarios.

The Json-LD basics and flexibility of AnQi CMS

AnQiCMS takes full consideration of SEO-friendliness in its design. By default, it will automatically generate basic Json-LD structured data for your page, which usually includes article title, publish 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, an article about product reviews may show multiple angles of the product, or a travel guide may include high-definition photos of multiple attractions.In this case, we hope to have Json-LD in theimageThe attribute can contain a list of URLs of multiple images, not just one.

AnQiCMS provides high flexibility for this, through built-in{% jsonLd %}Label, 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 by default.If your custom field conflicts with the default field, the custom field will take precedence and display first, which provides a perfect entry for us to integrate multiple images.

Get a list of multiple thumbnails of the article

In AnQiCMS, multiple images of articles, products, or pages are usually stored in the content model'sImageswithin the field. For example, when you upload multiple images as cover group images while editing an article in the background, the URLs of these images will be collected in the article'sImagesthe attribute.

We can use template tags provided by AnQiCMS, such as{% archiveDetail %}(for articles),{% pageDetail %}(for single pages) or{% categoryDetail %}(Used for classification), to conveniently obtain 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

Understood the custom mechanism of Json-LD and how to get the list of article images. The next step is to combine both of them. Json-LD'simageThe property, when it is an array, is usually expected to be a string array consisting of image URLs.

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

  1. Find the appropriate position in the article detail template：Usually, Json-LD scripts are placed in the page<head>tag within, or follow<body>the tag afterward.

  2. Use{% jsonLd %}encapsulate 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 usearchiveDetailTags, to assign theImagesField content toarticleImagesVariable.
    • {% for item in articleImages %}: We traversearticleImagesarray,{{item}}Represent a picture URL in each loop.
    • "{{item}}"{% if not forloop.Last %},{% endif %}This is crucial. We enclose each image URL in double quotes to make it a valid JSON string.`{% if not forloop.Last %