How to add structured data (JSON-LD) in the HTML header to improve search result display?
In today's highly competitive online environment, it is crucial to make your website content stand out in search engine results pages.In addition to high-quality content and an excellent keyword strategy, 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 result in displaying your content in a richer and more attractive form in search results (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 that 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 a page is, who the author is, how much the product price is, and where and when the event is located, etc.
When search engines can understand this structured information, they have the opportunity to display richer visual elements in search results, such as article thumbnails, rating stars, product prices, or inventory status.These rich media summaries can significantly increase the click-through rate of your website in search results, attracting more potential users to visit your website.For websites using Anqi CMS, fully utilizing JSON-LD is a key step to improve SEO effectiveness and gain more organic traffic.
How to simplify the addition of JSON-LD in AnQi CMS
The Anqi CMS was designed with SEO in mind from the outset and includes built-in support for structured data.In most cases, you do not need to manually write complex JSON-LD code, Anqi CMS will automatically generate some basic structured data based on the type of content you publish (articles, products, etc.)
But if you need to control or extend these structured data more finely, AnQi CMS also provides flexible customization options. You can use a template system, which is named{% jsonLd %}The tag to insert or overwrite the default JSON-LD content. This tag's usage is very intuitive, allowing you to directly in the HTML header area (usuallybase.htmlWrite the JSON-LD script in this public template file, or in a specific detail page template.)
You can directly find or add it in the<head>section of the template file, for examplebase.htmlFile, or you can customize the article detail page template (such asarchive/detail.html).
<!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 structure to a website pageWebPageType-structured data. Please note,{% jsonLd %}The content enclosed in tags, AnQi CMS will automatically merge it into the final JSON-LD output.If your custom content conflicts with the system-generated content, the custom content will take precedence over the default content.
Common JSON-LD types and their security CMS implementation
Next, let's look at some commonly used JSON-LD types, as well as how to dynamically fill in data by combining Anqi CMS template tags.
1. Article structure data
For blog posts, news reports, and other content,ArticleThe type can help search engines display article titles, authors, publication dates, thumbnails, and other information.
Suppose you are editing the template of 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 made use ofarchiveDetailtags to get the article title, thumbnail, publishing and modification time.systemtags are used to get the website name and Logo as the publisher's information.stampToDateThe filter ensures that the time format conforms to the JSON-LD requirements.
2. Product (Product) structured data
For the product detail page,ProductThe type can display product names, images, prices, inventory, reviews, etc., directly presented in the search results.
Suppose this is your product detail page template (for example/template/default/product/detail.html):
”`twig {# Product detail page template #} {% extends ‘base.html’ %}
{% 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