Open Graph

也常被叫作：OG 标签og 标签分享卡片链接分享预览

网页与前端通常止于「运行时」约 1 分钟读完

你可能会这么说

「我想把链接发到微信/QQ/微博时，能带出一张好看的标题卡片和配图，而不是光秃秃一条网址。」

Open Graph Open Graph

写在页面头部的一组标签，决定链接被转发到社交平台时显示的标题、描述和配图。

你把一个网页链接发到微信、QQ 或微博，聊天框里弹出那张带标题、带小图和一段描述的卡片——它不是你从网页里截图截出来的，而是页面头部的一组 og: 标签告诉社交平台「该显示什么」的结果。没有这些标签，平台就自己瞎猜，通常是只显示一个网址，或者取错标题。

这组标签里最常出问题的是 og:image：它要填一张能被社交平台抓取到的图片的真实网址。如果你填了本地路径、或一张还没上线的图片地址，平台抓不到，卡片就没有图——而且平台会缓存很久，改完不见得马上变。

还有个容易忽略的：og:title 和浏览器页签的 title 是两回事。改页签只改浏览器那条；想让分享卡片变标题，得改 og:title。很多人只改了其中一个，然后奇怪为什么另一边没变。

长什么样真实可交互，不是截图

发到群里带出的卡片，来自 head 里的 og 标签

<meta property="og:title" content="红烧肉的家常做法">
<meta property="og:description" content="新手也能一次成功的家常红烧肉">
<meta property="og:image" content="https://example.com/img/rou.jpg">

发出去有图本地路径：抓不到图

看那行 og:image 的地址：必须是别人能直接打开的网址，本地电脑上的路径平台根本抓不到。

拆开看，里面有这几块

1
og:title OG title
分享卡片上的标题。和浏览器页签的 title 是两回事，改这边不影响那边。
2
og:description OG description
卡片里那段小字，写给看到卡片的人。
3
og:image OG image
卡片配图。必须是可被直接抓取的在线图片网址，最常出错的一项。
4
og:url OG url
这条分享对应的正式网址，让别人点开的是正确页面。

容易搞混？这样区分

Open Graph ≠ 页面元信息 Page Metadata

页面元信息管浏览器页签和搜索结果；Open Graph 只管社交平台分享卡片。两者都写在 <head>，但各管各的：改 title 不改分享卡，改 og:title 才改。

看页面元信息

Open Graph ≠ SEO SEO

SEO 的目标是搜索引擎排名，og 标签主要面向人转发时的观感。OG 做得好不等于排名好，它俩不是一回事。

看 SEO

什么时候用得上

文章被转发

内容页配好 og 标签，朋友发链接出去就带标题和题图。

产品链接推广

商品页设好 og:title 和 og:image，群发时观感直接差一个档次。

改完不生效

平台缓存旧卡片很久，改完图要手动清缓存或等一阵。

你可以这样跟 AI 说

直接复制下面这段，把【】里的换成你的情况。它比一句「帮我加个 X」多说清楚了：改哪里、不许动啥、做完交什么。

【范围】只改 [这个页面] 的 `<head>`，加一组 Open Graph 标签
【目标】让我把链接发到微信/QQ 时，卡片显示：
  - og:title = [你要的标题]
  - og:description = [一段 60 字内的描述]
  - og:image = [一张已经上线、别人能直接打开的图片网址]
  - og:url = 本页面的正式网址
【边界】不要改页签的 title（那是另一码事）；不要用本地路径或没上线的图片当 og:image
【交付】列出改了哪个文件、贴出完整 og 标签、并告诉我这张图地址能不能被浏览器直接打开

这句话把最容易翻车的 og:image 写死为「必须别人能直接打开的网址」，还特意提醒别动页签 title——这是两个最常见的混淆点。

它说「做好了」，你怎么自己验

这是本站的重头戏。AI 最会的不是写代码，是说「已完成」。这一条，它通常最多做到「运行时」这层：真的跑起来了，能在本机看到结果。

要亲眼看到这些，才算数

查看源代码，确认 og:title / og:description / og:image / og:url 四行都在。
把 og:image 那个网址单独贴进浏览器地址栏，确认能打开——能开，平台才抓得到。
把页面链接发到微信/QQ/微博，看是不是带出了卡片、标题对不对。
如果卡片没变，记住平台会缓存，别急着下结论；隔一阵或清缓存再看。

它常这么糊弄你

「OG 标签已加上」——但 og:image 填的是本地路径，发出去还是没有图。必须自己贴那个网址验证能打开。
改了 og:title，却去检查页签标题，发现没变就说「没生效」。这是改错东西，标签其实对了。
发一次卡片没变就判定失败。社交平台缓存旧卡片可能很久，要区分「没配上」和「缓存没刷新」。
把 og 标签写进正文中间而不是 <head> 里，平台读不到。

能验到「运行时」层：自己把 og:image 网址贴开、发一次分享看卡片，就是最实的两招。难点在平台缓存，那不属于你做错。

考考你选一个你觉得对的

你加了 og 标签，发出去的卡片还是没有配图。最可能的原因是什么？

想再深挖一点靠谱出处

Open Graph 协议（ogp.me）Open Graph Protocol ↗<meta>：元数据元素MDN ↗

# Open Graph (Open Graph)

> 写在页面头部的一组标签，决定链接被转发到社交平台时显示的标题、描述和配图。

**你可能会这么说**：我想把链接发到微信/QQ/微博时，能带出一张好看的标题卡片和配图，而不是光秃秃一条网址。

你把一个网页链接发到微信、QQ 或微博，聊天框里弹出那张带标题、带小图和一段描述的卡片——它不是你从网页里截图截出来的，而是页面头部的一组 og: 标签告诉社交平台「该显示什么」的结果。没有这些标签，平台就自己瞎猜，通常是只显示一个网址，或者取错标题。 这组标签里最常出问题的是 og:image：它要填一张能被社交平台抓取到的图片的真实网址。如果你填了本地路径、或一张还没上线的图片地址，平台抓不到，卡片就没有图——而且平台会缓存很久，改完不见得马上变。 还有个容易忽略的：og:title 和浏览器页签的 title 是两回事。改页签只改浏览器那条；想让分享卡片变标题，得改 og:title。很多人只改了其中一个，然后奇怪为什么另一边没变。

**也叫**：OG 标签、og 标签、分享卡片、链接分享预览

## 你可以这样告诉 AI

```text
【范围】只改 [这个页面] 的 `<head>`，加一组 Open Graph 标签
【目标】让我把链接发到微信/QQ 时，卡片显示：
  - og:title = [你要的标题]
  - og:description = [一段 60 字内的描述]
  - og:image = [一张已经上线、别人能直接打开的图片网址]
  - og:url = 本页面的正式网址
【边界】不要改页签的 title（那是另一码事）；不要用本地路径或没上线的图片当 og:image
【交付】列出改了哪个文件、贴出完整 og 标签、并告诉我这张图地址能不能被浏览器直接打开
```

## 怎么验证他真的做到了

通常止于层级：**运行时** — 真的跑起来了，能在本机看到结果

- [ ] 查看源代码，确认 og:title / og:description / og:image / og:url 四行都在。
- [ ] 把 og:image 那个网址单独贴进浏览器地址栏，确认能打开——能开，平台才抓得到。
- [ ] 把页面链接发到微信/QQ/微博，看是不是带出了卡片、标题对不对。
- [ ] 如果卡片没变，记住平台会缓存，别急着下结论；隔一阵或清缓存再看。

常见糊弄：
- 「OG 标签已加上」——但 og:image 填的是本地路径，发出去还是没有图。必须自己贴那个网址验证能打开。
- 改了 og:title，却去检查页签标题，发现没变就说「没生效」。这是改错东西，标签其实对了。
- 发一次卡片没变就判定失败。社交平台缓存旧卡片可能很久，要区分「没配上」和「缓存没刷新」。
- 把 og 标签写进正文中间而不是 <head> 里，平台读不到。

来源：https://mickerbook.com/reference/t/open-graph/