如何在Json-LD中添加多张图片URL，例如文章的缩略图列表？

作为一名资深的网站运营专家，我很乐意为您详细阐述如何在AnQiCMS中，将文章的多张缩略图URL巧妙地整合到Json-LD数据中，从而提升网站的搜索引擎表现和用户体验。

巧用安企CMS：在Json-LD中高效整合多张图片URL，提升文章视觉吸引力与搜索引擎表现

在当今内容营销日益激烈的环境下，如何让搜索引擎更好地理解和展示您的内容变得至关重要。Json-LD作为一种推荐的结构化数据格式，能够帮助搜索引擎深入理解页面内容，进而提升在搜索结果中的展示效果，例如获得引人注目的富媒体摘要（Rich Snippets）。对于包含多张图片的文章而言，将这些图片URL准确地呈现在Json-LD中，不仅能让搜索引擎了解内容的视觉丰富度，还可能在图片搜索或特定情境下获得更佳的展示。

安企CMS的Json-LD基础与灵活性

AnQiCMS在设计时充分考虑了SEO友好性，默认情况下，它会自动为您的页面生成基础的Json-LD结构化数据，其中通常会包含文章标题、发布日期、描述以及一张缩略图等信息。这为您的网站打下了良好的SEO基础。

然而，当我们的文章内容远不止一张图片时，默认的Json-LD可能无法完全体现其丰富性。例如，一篇产品评测文章可能展示了产品的多个角度，或者一篇旅游攻略可能包含了多个景点的高清照片。在这种情况下，我们希望Json-LD中的image属性能够包含这些多张图片的URL列表，而不是仅仅一张。

AnQiCMS为此提供了高度的灵活性，通过内置的{% jsonLd %}标签，您可以轻松地对默认生成的Json-LD进行补充或覆盖。这个标签允许您在模板中直接定义或修改Json-LD的内容，AnQiCMS会自动将您定义的部分与系统默认生成的部分进行智能合并。如果您的自定义字段与默认字段冲突，自定义字段将优先显示，这为我们整合多张图片提供了完美的入口。

获取文章的多张缩略图列表

在AnQiCMS中，文章、产品或页面的多张图片通常存储在内容模型的Images字段中。例如，当您在后台编辑文章时上传了多张图片作为封面组图，这些图片的URL就会汇集到文章的Images属性中。

我们可以通过AnQiCMS提供的模板标签，如{% archiveDetail %}（用于文章）、{% pageDetail %}（用于单页面）或{% categoryDetail %}（用于分类），来便捷地获取这些图片列表。这些标签在调用name="Images"时，会返回一个包含所有图片URL的数组。

以文章为例，获取其图片列表的代码片段可能如下所示：

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

这个archiveImages现在就是一个包含文章所有图片URL的数组，每一个{{item}}都代表着一张图片的完整路径。

构建多图片Json-LD代码：实战步骤

了解了Json-LD的自定义机制和如何获取文章图片列表后，接下来的步骤就是将两者结合起来。Json-LD的image属性（当它是一个数组时）通常期望一个由图片URL组成的字符串数组。

我们将利用{% jsonLd %}标签，并在其中构建一个符合Schema.org规范的image数组。具体步骤和代码示例如下：

  1. 在文章详情模板中找到合适的位置：通常，Json-LD脚本会放置在页面的<head>标签内，或者紧随<body>标签之后。

  2. 使用{% jsonLd %}包裹您的自定义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 %}

    代码解析：

    • "image": [：在这里，我们明确地声明image属性将是一个JSON数组。
    • {% archiveDetail articleImages with name="Images" %}：我们利用archiveDetail标签，将文章的Images字段内容赋值给articleImages变量。
    • {% for item in articleImages %}：我们遍历articleImages数组，{{item}}在每次循环中代表一个图片URL。
    • "{{item}}"{% if not forloop.Last %},{% endif %}：这是关键。我们用双引号将每个图片URL包裹起来，使其成为一个有效的JSON字符串。`{% if not forloop.Last %