In today's highly competitive online environment, it is crucial to ensure that your website content stands out in search engine results pages.In addition to high-quality content and excellent keyword strategies, structured data (especially in JSON-LD format) plays an increasingly important role.It can help search engines understand the information on your page more accurately, which may allow your content to be displayed in search results in a more rich and engaging form (such as rich media summaries, i.e., Rich Snippets).
What is JSON-LD and why should it be used?
JSON-LD（JavaScript Object Notation for Linked Data）is a data format based on JSON, which allows you to embed structured data in HTML pages.In simple terms, it is like providing a 'manual' for search engines, telling them what a certain title on the page is, who the author is, how much the product price is, and where and when the event takes place, and so on.
When the search engine can understand this structured information, it has the opportunity to display richer visual elements in the search results, such as article thumbnails, rating stars, product prices, or inventory status.These multimedia summaries can significantly improve the click-through rate of your website in search results, attracting more potential users to visit your website.For our websites using Safe CMS, fully utilizing JSON-LD is a key step to improve SEO performance and gain more organic traffic.
How does AnQi CMS simplify the addition of JSON-LD?
At the design stage, AnQi CMS fully considered SEO and built-in support for structured data.通常情况下，您无需手动编写复杂的JSON-LD代码，安企CMS会根据您发布的内容类型（文章、产品等）自动生成一部分基础的结构化数据。
但如果需要更精细地控制或扩展这些结构化数据，安全CMS也提供了灵活的定制方式。您可以通过模板系统，使用一个名为{% jsonLd %}The tag to insert or overwrite the default JSON-LD content. The usage of this tag is very intuitive, it allows you to directly place it in the head area of HTML (usuallybase.htmlThis public template file, or in a specific detail page template) write JSON-LD script.
You can directly find or add it in the template file.<head>You can find or add it in the part, for example.base.htmlFile, or you can customize the article detail page template (such asarchive/detail.html）in it.
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% tdk with name="Title" siteName=true %}</title>
<meta name="keywords" content="{% tdk with name="Keywords" %}">
<meta name="description" content="{% tdk with name="Description" %}">
<link rel="canonical" href="{% tdk with name="CanonicalUrl" %}" />
{# 安企CMS会自动生成基础JSON-LD。如果您想自定义或扩展，可以使用以下标签： #}
{% jsonLd %}
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "WebPage",
"name": "{% tdk with name="Title" %}",
"description": "{% tdk with name="Description" %}",
"url": "{% system with name="BaseUrl" %}",
"publisher": {
"@type": "Organization",
"name": "{% system with name="SiteName" %}",
"logo": {
"@type": "ImageObject",
"url": "{% system with name="SiteLogo" %}"
}
}
}
</script>
{% endjsonLd %}
{# 您的其他CSS和JS文件 #}
<link rel="stylesheet" href="{% system with name="TemplateUrl" %}/css/style.css">
</head>
<body>
{# 网站内容 #}
</body>
</html>
In the above example, we demonstrated how to use{% jsonLd %}tags to add a basic page to the websiteWebPageType structured data. Please note,{% jsonLd %}The content of the label, AnQi CMS will automatically merge it into the final JSON-LD output.If the custom content you have provided conflicts with the content generated by the system, the custom content will take precedence over the default content.
Common JSON-LD types and their security CMS implementation
接下来，我们看几个常用的JSON-LD类型，以及如何结合安企CMS的模板标签来动态填充数据。
1. 文章（Article）结构化数据
对于博客文章、新闻报道等内容，“English”ArticleType helps search engines display article titles, authors, publication dates, thumbnails, and other information.
Suppose you are editing the template for the article detail page (for example/template/default/archive/detail.html):
{# 假设这是您的文章详情页模板内容，已经包含其他HTML结构 #}
{% extends 'base.html' %} {# 继承您的基础模板 #}
{% block head %} {# 在base.html中定义一个block用于额外head内容 #}
{{ super() }} {# 保持父模板head内容 #}
{%- archiveDetail archiveContent with name="Content" %} {# 先获取文章内容，用于description和image的提取 #}
{% jsonLd %}
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "{% archiveDetail with name="Title" %}",
"image": [
"{% archiveDetail with name="Logo" %}" {# 文章缩略图 #}
],
"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": "{% tdk with name="Description"|truncatechars:150 %}" {# 截取描述，防止过长 #}
}
</script>
{% endjsonLd %}
{%- endarchiveDetail %}
{% endblock %}
{% block content %}
{# 文章具体内容展示 #}
<h1>{% archiveDetail with name="Title" %}</h1>
<p>发布时间：{{ stampToDate(archive.CreatedTime, "2006-01-02") }}</p>
<div>
{%- archiveDetail articleContent with name="Content" %}
{{ articleContent|safe }}
{%- endarchiveDetail %}
</div>
{% endblock %}
In this example, we usearchiveDetailtags to obtain the article title, thumbnail, publication and modification time.systemtags to obtain the website name and Logo as the publisher information.stampToDateThe filter ensures that the time format meets the JSON-LD requirements.
2. Structured data of Product
For product detail pages,ProductType can display product names, images, prices, stock, reviews, etc., and be presented directly in search results.
Suppose this is your product detail page template (for example/template/default/product/detail.html):
English product detail page template
{% block head %}
{{ super() }}
{% jsonLd %}
<script type="application/ld+json">
{
"@context": "https://schema.org/",
"@type": "Product",
"name": "{% archiveDetail with name="Title" %}",
"image": [
"{% archiveDetail with name="Logo" %}" {# 产品主图 #}
{# 也可以循环显示产品组图Images #}
{%- archiveDetail productImages with name="Images" %}
{%- for img in productImages %}
,"{{ img }}"
{%- endfor %}
{%- endarchiveDetail %}
],
"description": "{% tdk with name="Description"|truncatechars:200 %}",
"sku": "{% archiveDetail with name="ProductSKU