你是否遇到过这种令人抓狂的场景？
你辛辛苦苦写了一个精美的电商详情页，布局完美，图片高清，文字动人。在人类眼中，这是一个卖“复古机械键盘”的页面，价格 200 美元，五星好评。
但在 Google 爬虫（Bot） 的眼中，这只是一堆乱七八糟的 <div>、<span> 和 <p> 标签。
那个 “200” 是价格？还是重量？或者是库存数量？
那个 “5” 是评分？还是型号？
这张图是产品图，还是广告背景？
结果就是：你的网页在搜索结果里，只是一个平平无奇的蓝色链接加两行灰字。而你竞争对手的网页，却带着星级评分、价格标签、甚至精美的缩略图，点击率（CTR）完爆你几条街。
解决方案？JSON-LD。 它是你给搜索引擎递过去的一张“私密小纸条”，用机器能听懂的语言，把网页内容的精华直接告诉它。
JSON-LD 的全称是 JavaScript Object Notation for Linked Data。别被名字吓到，我们用个生活中的例子：快递包裹。
想象你给朋友寄一箱土特产：
HTML (网页本身)：就是那个纸箱子。虽然你（人类）打开箱子就能看到里面是苹果，但快递员（搜索引擎）在运输过程中不能拆箱，他只看到一个棕色的盒子。
JSON-LD (结构化数据)：就是贴在箱子外面的快递面单。
这张面单上用标准格式写着：
物品类型：水果/苹果
重量：5kg
易碎：是
保质期：7天
快递扫码枪（Google）只需要“哔”一下这张面单，不需要拆箱子，瞬间就知道里面是什么，该怎么分类，该怎么展示给用户。
没有 JSON-LD：Google 必须像侦探一样，在你的 HTML 代码海洋里“猜测”哪个是标题，哪个是价格（经常猜错）。
有 JSON-LD：你直接通过一段 <script> 代码，把整理好的数据喂到 Google 嘴边。
我们不需要安装任何复杂的库，JSON-LD 本质上就是一段放在 HTML 里的纯文本。
你想告诉 Google：这是一篇“技术文章”，作者是“张三”，发布时间是“2023-10-01”。
将以下代码粘贴到你 HTML 文件的 <head> 或 <body> 的任意位置：
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "TechArticle",
"headline": "如何用 5 分钟学会 JSON-LD",
"image": [
"https://example.com/photos/1x1/photo.jpg"
],
"author": {
"@type": "Person",
"name": "张三"
},
"datePublished": "2023-10-01T08:00:00+08:00"
}
</script>这看起来像普通的 JSON，但有三个必须理解的关键点：
<script type="application/ld+json">
为什么？ 这告诉浏览器：“嘿，这里面不是用来执行的 JavaScript 代码，而是纯数据，请不要运行它，只要读取它。” 这就是为什么它不会拖慢页面渲染的原因。
"@context": "https://schema.org"
翻译：这是我们在“对暗号”。
为什么？ 全世界有很多种描述数据的方式。这句话告诉 Google：“无论我下面写什么字段，其定义都以 schema.org 这个字典为准”。它是 Google、Bing、Yahoo 联合制定的通用标准。
"@type": "TechArticle"
翻译：我是谁？
为什么？ 这里你可以填 Product（商品）、Recipe（食谱）、Event（活动）等。一旦你定义了类型，Google 就知道该期待哪些字段（比如食谱得有卡路里，商品得有价格）。
学会了写代码只是第一步，在生产环境中，这几个坑千万别踩。
错误做法：你在 JSON-LD 里写商品价格是 $9.99（为了吸引点击），但网页 HTML 显示给用户的价格是 $19.99。 后果：Google 会认为你在进行“垃圾也就是欺诈行为（Spammy Structured Data）”，可能会人工惩罚你的网站，导致排名直接消失。 原则：JSON-LD 的数据必须是用户在页面上也能看到的内容的如实反映。
JSON 对语法要求极其严格。最后一个属性后面多加了一个逗号，或者少了一个引号，整个 JSON-LD 就会失效。 解决：不要肉眼检查！
写完代码后，绝对不要直接上线。
复制你的代码。
粘贴代码并运行测试。
它会告诉你代码是否有效，以及 Google 最终会把你的页面渲染成什么样（比如是否会出现星星评分）。
在 React/Vue/Next.js 等现代前端框架中，不要手写死这些数据。你应该创建一个组件，将数据库里的 product.price 或 blog.title 动态注入到 JSON-LD 对象中。
// React 示例
const jsonLd = {
"@context": "https://schema.org",
"@type": "Product",
"name": product.name, // 动态数据
"offers": {
"@type": "Offer",
"price": product.price, // 动态数据
"priceCurrency": "USD"
}
};
return (
<script
type="application/ld+json"
dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
/>
);JSON-LD 不是黑魔法，它是你与搜索引擎沟通的官方语言。
它不改变页面外观。
它极大增强页面在搜索结果中的展示形式（Rich Snippets）。
它是提升 SEO 点击率性价比最高的手段之一。
打开你最喜欢的电商网站（如 Amazon 或 某宝的海外版），右键点击“查看网页源代码（View Source）”，搜索 ld+json。看看大厂们是如何向 Google 介绍他们卖的咖啡杯或笔记本电脑的。你可能会发现很多有趣的字段！
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。