在当今竞争激烈的网络环境中,让您的网站内容在搜索引擎结果页中脱颖而出至关重要。除了高质量的内容和优秀的关键词策略,结构化数据(尤其是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