今天看到一个三方网站在搜索结果中出现了图片，很好奇是怎么做到的，看了一下 html 代码。发现里面的 header 部分同时配置了 Open Graph 和 JSON-LD 两种格式的元数据，内容基本一致。如下所示：
<meta property="og:title" content="大象笔记 test">
<meta property="og:type" content="Article">
<meta property="og:url" content="https://www.sunzhongwei.com/test.html">
<meta property="og:image" content="https://www.sunzhongwei.com/test.jpg">
<meta property="og:description" content="some description">
<meta property="og:site_name" content="大象笔记">
<meta property="article:published_time" content="2024-11-28T08:26:22+08:00">
<meta property="article:modified_time" content="2025-07-03T16:22:36+08:00">
<meta property="article:author" content="大象">
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"mainEntityOfPage": {
"@type": "WebPage",
"@id": "https://www.sunzhongwei.com/test.html"
},
"headline": "大象笔记 test",
"image": [
"https://www.sunzhongwei.com/test.jpg"
],
"datePublished": "2024-11-28T08:26:22+08:00",
"dateModified": "2025-07-03T16:22:36+08:00",
"author": {
"@type": "Person",
"name": "大象"
},
"description": "some description"
}
</script>
从上面的代码可以看出，图片的 URL 在 Open Graph 和 JSON-LD 中都进行了配置。
Open Graph 是什么
Open Graph（开放图谱）元标签，主要作用是在社交媒体平台（如 Facebook、LinkedIn、Twitter 等）和即时通讯工具（如微信、WhatsApp）中分享该网页时，控制展示的标题、描述、图片、链接等关键信息，从而提升分享内容的呈现效果和点击率。例如，上面示例代码里看到的。不需要太多解释，从变量命名上就能看出它的作用了。
JSON-LD 是什么
LD 是 Linked Data 的缩写，JSON-LD 是一种基于 JSON 的数据格式，用于在网页中嵌入结构化数据。
JSON-LD 在搜索引擎优化（SEO）方面被支持得更好，是当前实现搜索引擎“富媒体摘要”的标准方案；而 OG 协议在社交媒体分享优化方面不可替代，两者属于互补关系，而非替代关系。
虽然这两种格式搜索引擎都支持，但是Google、Bing、百度官方推荐使用 JSON-LD。
TODO
有空得添加一些了，而且像产品类的页面，添加 JSON-LD 还可以让搜索结果中显示价格、评分等信息，提升点击率。就更加有吸引力了。
等忙完这段时间，集中改造一下。包括，博客，产品站，工具站，都添加上 JSON-LD 的结构化数据。怪不得之前随手添加的图片，并不能保证在搜索结果中出现。SEO 技巧又提升了。。。
关于作者 🌱
我是来自山东烟台的一名开发者，有感兴趣的话题，或者软件开发需求，欢迎加微信 zhongwei 聊聊，或者关注我的个人公众号“大象工具”， 查看更多联系方式