在当今竞争激烈的网络环境中,让您的网站内容在搜索引擎结果页中脱颖而出至关重要。除了高质量的内容和优秀的关键词策略,结构化数据(尤其是JSON-LD格式)扮演着越来越重要的角色。它能帮助搜索引擎更准确地理解您页面上的信息,从而可能在搜索结果中以更丰富、更吸引人的形式(例如富媒体摘要,即Rich Snippets)展现您的内容。
什么是JSON-LD,为什么要使用它?
JSON-LD(JavaScript Object Notation for Linked Data)是一种基于JSON的数据格式,它允许您在HTML页面中嵌入结构化数据。简单来说,它就像给搜索引擎提供了一份“说明书”,告诉它们页面上的某个标题是什么、作者是谁、产品价格是多少、活动时间地点在哪里等等。
当搜索引擎能够理解这些结构化的信息时,它们就有机会在搜索结果中展示更丰富的视觉元素,例如文章的缩略图、评分星级、产品价格或库存状态。这些富媒体摘要能够显著提高您网站在搜索结果中的点击率,吸引更多潜在用户访问您的网站。对于我们使用安企CMS的网站来说,充分利用JSON-LD,是提升SEO效果、获取更多自然流量的关键一步。
安企CMS如何简化JSON-LD的添加
安企CMS在设计之初就充分考虑了SEO,并内置了结构化数据的支持。通常情况下,您无需手动编写复杂的JSON-LD代码,安企CMS会根据您发布的内容类型(文章、产品等)自动生成一部分基础的结构化数据。
但如果需要更精细地控制或扩展这些结构化数据,安企CMS也提供了灵活的定制方式。您可以通过模板系统,使用一个名为 {% jsonLd %} 的标签来插入或覆盖默认的JSON-LD内容。这个标签的使用方式非常直观,它允许您直接在HTML的头部区域(通常是base.html这个公共模板文件,或者特定的详情页模板中)编写JSON-LD脚本。
您可以直接在模板文件的<head>部分找到或添加它,例如 base.html 文件,或者您自定义的文章详情页模板(如archive/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>
在上面的例子中,我们示范了如何使用 {% jsonLd %} 标签来为网站页面添加一个基础的 WebPage 类型结构化数据。请注意,{% jsonLd %} 标签包裹的内容,安企CMS会自动将其合并到最终的JSON-LD输出中。如果您的自定义内容与系统默认生成的内容有冲突,自定义内容将优先覆盖默认内容。
常见的JSON-LD类型及其安企CMS实现
接下来,我们看几个常用的JSON-LD类型,以及如何结合安企CMS的模板标签来动态填充数据。
1. 文章(Article)结构化数据
对于博客文章、新闻报道等内容,Article 类型可以帮助搜索引擎展示文章标题、作者、发布日期、缩略图等信息。
假设您正在编辑文章详情页的模板(例如 /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 %}
在这个例子中,我们利用了 archiveDetail 标签获取文章标题、缩略图、发布及修改时间。system 标签则用来获取网站名称和Logo作为发布者信息。stampToDate 过滤器确保时间格式符合JSON-LD的要求。
2. 产品(Product)结构化数据
对于商品详情页,Product 类型可以展示商品名称、图片、价格、库存、评价等,直接呈现在搜索结果中。
假设这是您的产品详情页模板(例如 /template/default/product/detail.html):
”`twig {# 产品详情页模板 #} {% 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