你在 LinkedIn 上联系了大半年的采购商，终于到了发产品页链接的环节。鼠标发过去，对方那边显示的是一串灰扑扑的裸 URL，没有标题、没有配图、没有描述。同样一条链接，同事发过去却是一张带产品大图的卡片，点进去的人明显更多。

差别不在链接本身，在页面头部的一组代码。

Open Graph（og）标签是写在网页头部的一组元数据，告诉各个平台：这个链接的标题是什么、描述是什么、配图用哪张。 平台爬虫抓取你的页面时读的就是这段信息；读不到，就只显示 URL 文本。LinkedIn、WhatsApp、Facebook、X、Slack、iMessage 全都认这套协议，它由 Facebook 在 2010 年提出，如今是全网通用的事实标准。

裸 URL 与图文卡片在聊天窗口中的对比：左边只有一个链接文本，右边是带产品图、标题和描述的预览卡片

为什么链接发出去只剩一串裸 URL？

平台的抓取逻辑比很多人想的“笨”：爬虫访问你的页面，只读返回的原始 HTML，在头部找 og 标签，找到就按标签内容生成卡片，找不到就退化成纯文本链接。它不执行 JavaScript，不滚动页面，也不登录。

这意味着两件事：

  • 没写 og 标签的页面，分享出去一定是裸 URL。 平台不会猜你的产品是什么，最多随手抓一张图碰碰运气。
  • 用客户端渲染的页面（纯 React/Vue 单页应用），og 标签写在 JS 里等于没写。 爬虫看不到执行后的结果，必须让标签出现在服务端返回的 HTML 里。这个问题在模板建站和 SPA 里特别常见，后面会说怎么处理。

顺便澄清一个误解：这不是微信专属问题，也不需要公众号或小程序。任何平台抓任何链接，用的都是同一套 og 协议，差别只在各平台的图片规格和缓存策略。

og 标签六件套：每行代码管什么用？

OG 协议（ogp.me）规定四个属性为必填：og:title、og:type、og:image、og:url；og:description 是选填，但几乎所有平台都会展示它，建议默认写上。一套覆盖绝大多数场景的配置长这样：

1
2
3
4
5
6
<meta property="og:title" content="CNC 定制金属件｜XX 精密制造">
<meta property="og:description" content="20 年精密金属加工经验，支持小批量定制，48 小时出样，出口 30 国。">
<meta property="og:image" content="https://www.example.com/share/cnc-parts-1200x630.jpg">
<meta property="og:url" content="https://www.example.com/products/cnc-parts.html">
<meta property="og:type" content="website">
<meta property="og:site_name" content="XX Precision">

逐行说下管什么：

  • og:title：卡片主标题。Facebook 官方建议不要带网站名，域名平台会自己显示，带了反而挤占字数。
  • og:description：标题下方的一到两句描述，写清“读者点进去能得到什么”，别堆关键词。
  • og:image：卡片配图，必须是 https 绝对路径。相对路径在爬虫的服务器上解析不出来，这是分享图不显示最常见的原因。
  • og:url：这个页面的规范地址，用来把不同参数、不同入口的访问归并到一个身份上，移动端域名也要指向桌面版规范 URL。
  • og:type：内容类型，不写默认 website。产品页、文章页也可以用 article 或 product，按平台对象类型表选。
  • og:site_name：站点名，显示在描述下方，一行就能加。

每个页面应该有自己的 og:title 和 og:description。全站所有页面共用同一个标题，分享哪个链接都长一个样，客户根本分不出你发的是哪款产品。

分享图做多大，各平台才不会裁掉关键内容？

一张 1200×630 像素（约 1.91:1）的图能覆盖几乎所有平台，这是被 Facebook 文档固化下来的通用规格。各平台的推荐高度高度一致，X 的大卡片略矮：

官方与社区口径分开说，避免你按错的数据做图：

  • Facebook（官方文档）：最小 200×200，文件不超过 8MB；高清屏建议至少 1200×630；想要链接帖子里的大图，至少 600×315。
  • LinkedIn：链接预览读取 og:title、og:description、og:image 三个标签，官方未给出精确像素建议；社区普遍按 1200×627 准备，与通用规格只差 3 像素，直接用 1200×630 即可。实际抓到了什么，用 Post Inspector 一看便知。
  • X（原 Twitter）：官方文档未开放精确像素值，社区一致口径为大卡片 2:1（1200×600 至 1200×628）。X 是唯一需要额外加 twitter:card 标签的平台，og 标签它只作回退。
  • WhatsApp / Slack / Telegram：沿用 og 协议通用规格；社区实测建议文件压到 300KB 左右，抓取超时更快。

还有两个官方明确的小技巧：给 og:image 补上 og:image:width 和 og:image:height，爬虫不用下载完整图片就能直接排版，首屏渲染更快；设计图时把标题、Logo、关键信息放在画面中心 80% 区域内，各平台裁剪幅度不同，靠边的内容最容易被切掉。

og:image 画布规格示意：1200×630 的分享图外框、中心安全区虚线框与产品图摆放位置

分享图本身的选图与压缩规范，和文章配图的优化思路是相通的，可以参考《如何用AI给外贸B2B文章做图片SEO优化？》里提到的尺寸、格式与命名做法。

怎么把 og 标签加进自己的网站？

按你的建站方式对号入座，三种场景的解法完全不同。

场景一：手写 HTML 或静态页面。 直接把上面那六行 meta 粘进每个页面的头部模板，逐页替换 title、description 和 image 三个值。页面多就让 AI 帮你扫一遍项目，批量生成再人工抽查，比手改快得多。

场景二：WordPress。 装一个主流 SEO 插件（Yoast SEO、Rank Math、All in One SEO 一类），它会给每篇文章自动生成 og 标签，你在文章编辑页填好 SEO 标题、描述和社交分享图即可。装完务必用调试工具抽查两三个页面，确认插件真的把标签输出了——有的主题会覆盖插件输出，这类冲突见过不止一次。

场景三：模板引擎或前端框架（Next.js / Vue / React）。 在模板层动态注入，把当前页面的标题、描述、封面图传进 head。注意前面说的爬虫不执行 JavaScript：纯客户端渲染的站点，og 标签必须走服务端渲染或预渲染，否则爬虫抓到的还是空 head。

标签都加对了，为什么分享还是老样子？

这是后台被问得最多的一类问题。按出现频率排：

  1. 平台缓存。 Facebook 和 LinkedIn 抓一次就缓存，你改了标签，它还按旧记录显示。Facebook 用分享调试器（Sharing Debugger）、LinkedIn 用 Post Inspector，输入链接点“重新抓取”；X 用 Card Validator 触发重抓。注意 X 的验证器现在只触发重抓、不展示预览，看实际效果要真发一条。
  2. 换图不换地址。 各平台按图片 URL 缓存图片文件，覆盖同名文件不会刷新缓存。更新配图务必换一个新文件名或加版本参数。
  3. 首次分享不显示图。 Facebook 文档明确写了：爬虫必须至少完整识别一次图片才会渲染。新页第一次被分享时看不到图是正常的，先用调试器预抓一次再分享。
  4. 图片抓不到。 图片 404、重定向链太长、需要登录才能访问、服务器没开 gzip/deflate 压缩（Facebook 爬虫只接受这两种编码），都会导致静默失败。
  5. 爬虫被挡。 robots.txt 屏蔽了各平台爬虫 User-Agent，或者防火墙拦截了境外抓取，标签写得再对也白搭。

写在最后

给独立站补 og 标签是半天能完工、效果立竿见影的基础优化。收工前按这份清单过一遍：

  • 每个重要页面有独立的 og:title、og:description、og:image、og:url
  • og:image 用 https 绝对路径，尺寸 1200×630，体积 1MB 以内，关键信息在中心安全区
  • WordPress 站点确认插件输出的标签没被主题覆盖
  • SPA 站点确认标签在服务端返回的 HTML 里，而非 JS 注入
  • 用 Facebook 分享调试器、LinkedIn Post Inspector 各抽查一个页面

og 标签管的是“链接被分享时像不像样话”，属于站外呈现层；站内页面能不能被搜索引擎正确理解，是另一套功课，可以参考《谷歌SEO实战指南独立站起量不踩坑》从头理一遍。如果关心 AI 时代客户通过豆包、DeepSeek 找供应商时怎么验证你，《GEO 决策证据》那篇讲的是同一套“让机器准确读懂你”的思路在生成式引擎上的延伸。

数据来源

常见问题（FAQ）

og 标签是什么？
og 标签是写在网页头部的 Open Graph 元数据，用来告诉社交平台这个链接的标题、描述和配图。协议规定 og:title、og:type、og:image、og:url 四项为必填，og:description 等为选填但建议加上。
网站分享链接不显示图片怎么办？
先确认 og:image 是 https 绝对路径、图片能匿名打开、尺寸不低于平台下限；再用 Facebook 分享调试器或 LinkedIn Post Inspector 强制重新抓取一次，清掉旧缓存后通常立即恢复。
og:image 尺寸多大合适？
通用最稳的是 1200×630 像素（约 1.91:1），文件控制在 1MB 以内。Facebook 官方建议不低于 1200×630；X 的大卡片按 2:1 准备 1200×600 也不会被裁。
og 标签对谷歌排名有影响吗？
og 标签不直接参与谷歌排名计算，但它决定链接在社交平台和聊天工具里的点击率，影响 referral 流量，也方便 AI 爬虫准确理解页面内容，属于性价比很高的基础优化。