How to customize website structured data (JSON-LD) to improve search engine display?
It is crucial for website content to stand out in search engine results pages (SERP) in today's highly competitive online environment.Structured data, especially JSON-LD format, is the key tool to achieve this goal.It helps search engines better understand page content, thereby giving them the opportunity to display richer and more attractive 'rich media snippets' (Rich Snippets), such as the publication date, author, rating, product price, etc., all of which can significantly increase click-through rates.
As users of AnQiCMS, we have strong flexibility to optimize the search engine display of our website.The AnQi CMS was designed with a strong focus on SEO-friendliness from the outset, including many advanced SEO tools such as Sitemap generation, keyword library management, and static rule generation.In terms of structured data, Anqi CMS also provides convenient custom functions, allowing us to accurately inform search engines about the nature of our pages based on the actual content of the website.
Familiarize yourself with the JSON-LD feature in AnQi CMS
The AnqiCMS will automatically generate some basic structured data on the page to ensure the search engine friendliness of the website.However, for users who hope to obtain more specific and rich display effects in the SERP, relying solely on the default settings may not be enough.This is when customizing JSON-LD becomes particularly important.
AnQi CMS provides a very intuitive{% jsonLd %}A template tag that allows us to embed our own JSON-LD code in website templates.The strength of this tag lies in the fact that it not only allows us to fully customize structured data, but also intelligently merges with the default data generated by Anqi CMS.This means that if our custom code conflicts with the default code generated by the system, the custom code will take precedence over the default value to achieve fine-grained control.
The core concept is to utilize the powerful template tag system of Anqi CMS, dynamically extract information from the website content, and then fill this information into the JSON-LD structure.In this way, no matter how the content is updated, the structured data can remain up-to-date without manually modifying the code on each page.
How to customize JSON-LD for different types of content
The process of customizing JSON-LD usually involves adding a block in the page's<head>area.<script type="application/ld+json">In AnQi CMS, we can add a block in the template file's{% jsonLd %}Everything is completed inside the tag.
1. For the article (Archive) page
Articles are one of the most common content types, usually suitable forArticleorBlogPostingA Schema of the type. In order for the article to display author, publication date, images, and other information in search results, we can construct JSON-LD like this:
{% jsonLd %}
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BlogPosting",
"mainEntityOfPage": {
"@type": "WebPage",
"@id": "{{ archive.Link }}"
},
"headline": "{{ archive.Title }}",
"image": [
"{{ archive.Logo }}"
],
"datePublished": "{{ stampToDate(archive.CreatedTime, "2006-01-02T15:04:05Z07:00") }}",
"dateModified": "{{ stampToDate(archive.UpdatedTime, "2006-01-02T15:04:05Z07:00") }}",
"author": {
"@type": "Person",
"name": "{% system with name='SiteName' %}" {# 或者从contact标签获取作者信息 #}
},
"publisher": {
"@type": "Organization",
"name": "{% system with name='SiteName' %}",
"logo": {
"@type": "ImageObject",
"url": "{% system with name='SiteLogo' %}"
}
},
"description": "{{ archive.Description|truncatechars:150|replace:'"','\\"'|safe }}" {# 描述字段可能包含引号，需要转义 #}
}
</script>
{% endjsonLd %}
We used herearchiveDetailThe tag implicitly retrieves the current article'sTitle/Link/Logo/CreatedTimeandUpdatedTime.stampToDateThe function converts a timestamp to an ISO 8601 format that meets Schema requirements. For author and publisher information, we can utilizesystemTag to retrieve website name and Logo.archive.DescriptionThe field may be long or contain HTML tags, usetruncatechars:150Truncate,replace:'"','\\"'Handle escaped double quotes,|safeEnsure that the content is output as a string.
2. For the Product (Product) page
If it is a page displaying products, we can useProductA type's Schema, and includes price, inventory, brand, etc.
{% jsonLd %}
<script type="application/ld+json">
{
"@context": "https://schema.org/",
"@type": "Product",
"name": "{{ archive.Title }}",
"image": [
"{% if archive.Images %}{{ archive.Images[0] }}{% else %}{{ archive.Logo }}{% endif %}"
],
"description": "{{ archive.Description|truncatechars:150|replace:'"','\\"'|safe }}",
"sku": "{% archiveDetail with name='SKU' %}", {# 假设SKU是自定义字段 #}
"brand": {
"@type": "Brand",
"name": "{% archiveDetail with name='Brand' %}" {# 假设Brand是自定义字段 #}
},
"offers": {
"@type": "Offer",
"url": "{{ archive.Link }}",
"priceCurrency": "USD", {# 假设货币为美元，可根据实际情况调整 #}
"price": "{% archiveDetail with name='Price' %}", {# 假设Price是自定义字段 #}
"itemCondition": "https://schema.org/NewCondition",
"availability": "https://schema.org/{% if archive.Stock > 0 %}InStock{% else %}OutOfStock{% endif %}"
}
}
</script>
{% endjsonLd %}
On the product page, we also usearchiveThe object retrieves basic information. For SKU, brand, price, etc., we can use{% archiveDetail with name='自定义字段名称' %}or{% archiveParams %}Label to extract those custom field values defined in the AnqiCMS backend content model. For example, if the product model is definedSKUandBrandfields, we can directly call. Inventoryarchive.StockThe field can be used to determine the availability of the product.
3. For the Category (Category) page
The category page is usually a list of products or articles, which can be considered for use.CollectionPageorItemListwait for Schema type. Here we takeCollectionPageFor example:
{% jsonLd %}
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "CollectionPage",
"name": "{{ category.Title }}",
"description": "{{ category.Description|truncatechars:150|replace:'"','\\"'|safe }}",
"url": "{{ category.Link }}",
"image": {
"@type": "ImageObject",
"url": "{% if category.Logo %}{{ category.Logo }}{% else %}{% system with name='SiteLogo' %}{% endif %}"
}
}
</script>
{% endjsonLd %}
Here, categorythe object can easily provide classification ofTitle/DescriptionandLink. If the category has its own Logo, we use it; otherwise, we can fall back to the website's default Logo.
4. For the homepage (Homepage)
The homepage acts as the gateway of the website, usually suitable for useWebSiteandOrganizationSchema to describe the basic information and search function of the website:
{% jsonLd %}
<script type="application/ld+json">
[
{
"@context": "https://schema.org",
"@type": "WebSite",
"url": "{% system with name='BaseUrl' %}",
"name": "{% system with name='SiteName' %}",
"potentialAction": {
"@type": "SearchAction",
"target": "{% system with name='BaseUrl' %}/search?q={search_term_string}",
"query-input": "required name=search_term_string"
}
},
{
"@context": "https://schema.org",
"@type": "Organization",
"name": "{% system with name='SiteName' %}",
"url": "{% system with name='BaseUrl' %}",
"logo": "{% system with name='SiteLogo' %}"
}
]
</script>
{% endjsonLd %}
The JSON-LD of the homepage usually includesWebSiteType to define the search function of the site, as well asOrganizationType to describe the institution the website belongs to. This information can be obtained throughsystemtags easily.
Deployment and **Practice
- Determine the template location:The JSON-LD code should typically be placed on the page.
<head>