Open Graph 标签实操：把分享卡片在微信微博调到好看

同一条链接,有人发到微信群里展开成一张带大图、有标题有摘要的卡片,有人发出去却是一行光秃秃的蓝色文字。差别几乎都在页面 <head> 里那几行 Open Graph 标签上。这篇把 og:title、og:image、og:description 三个核心字段讲清楚,再说说卡片在微信、微博这类社交分享场景里怎么被渲染,以及上线后怎么调试。

Open Graph 到底是什么

Open Graph 是 Facebook 最早提出的一套 meta 标签协议,用来告诉抓取你链接的程序:这个页面的标题是什么、配图用哪张、一句话摘要写什么。它写在 HTML 的 <head> 里,格式是 <meta property="og:xxx" content="...">。

为什么不直接用页面的 <title> 和正文?因为抓取卡片的爬虫不会渲染你的页面,它只读 meta 标签。你的 <title> 可能是"首页 - 某某产品",但你希望分享出去的卡片标题是一句完整卖点。Open Graph 让你把"给搜索引擎看的"和"给社交分享看的"分开控制。

三个核心字段怎么写

og:title 是卡片大标题。它和 SEO 标题可以不一样,分享场景里它要像一句话,而不是关键词堆叠。注意各平台截断长度不同:微信展开的卡片标题大约两行就省略,Google 摘要约 60 字符截断,X/Twitter 约 70,Facebook 约 88。想做到哪儿都不被截断,就照最严的那条上限写。

og:description 是标题下面那段摘要。建议控制在 80 到 110 个字符,一句话把"点进来能得到什么"说明白。要留意 LinkedIn 的卡片根本不显示描述,所以别把关键信息只塞在描述里。

og:image 是配图,也是卡片里最抓眼球的部分。这个字段最容易踩坑,后面单独说尺寸。

og:image 尺寸建议:1200×630

配图尺寸我自己踩过坑才记牢:用 1200×630 像素,比例 1.91:1。Facebook、X 的 summary_large_image 大图卡、LinkedIn、Slack、Discord 全都按这个比例裁剪。1200×630 也足够大,X 的最小尺寸 300×157 和 LinkedIn 的推荐下限都不会触底。

比这更高或更方的图,会沿长边居中裁掉。所以重要的 logo 和文字别贴边放,留在中间可见带里,否则顶部或底部 5% 的内容会被切掉。如果你手上只有一张方形 logo,那就把 twitter:card 类型选成 summary,显示的是小缩略图布局,而不是被拉伸变形的横幅。

还有一个隐蔽的坑:og:image 一定要用绝对地址 https://...。爬虫从独立服务器抓图,没有页面上下文,写 /og.png 这种相对路径会解析成空,卡片就没图了。

一组真实可用的标签

下面是一组可以直接粘进 <head> 的完整示例:

<meta property="og:type" content="website">
<meta property="og:title" content="BTU 空调匹数计算器:按房间算制冷量">
<meta property="og:description" content="填面积、层高、朝向,算出推荐 BTU 和空调匹数,纯前端,不上传任何数据。">
<meta property="og:image" content="https://toolora.info/og/btu-calculator.png">
<meta property="og:url" content="https://toolora.info/zh/t/btu-calculator/">
<meta property="og:site_name" content="Toolora">
<meta name="twitter:card" content="summary_large_image">

注意 og:type 和 twitter:card 这两条:它们是任何消费方渲染卡片都必需的,缺了卡片可能根本不出现,所以哪怕表单为空也要带上。其余字段填了才输出,别留空属性,有些校验器会对空的 og:title 报警告。

微信、微博这些场景的差异

中文环境里分享最多的还是微信和微博。微信内置浏览器抓取链接时会读 Open Graph 标签生成卡片,标题、摘要、缩略图基本对应 og:title、og:description、og:image。微博则在 Open Graph 之外还看自家的 meta,但 og 标签齐全时大多能正常展开。

我的做法是:先把 og 标签按通用规范写齐,保证 Facebook、X、Slack 这些主流平台没问题,再用微信真机发一条到"文件传输助手"实测一遍。因为微信的缩略图比例和截断长度和海外平台不完全一致,真机看一眼最稳。

上线后怎么调试

写完标签别急着收工,有两类调试方式。

第一类是上线前预览。我会用 Open Graph 社交卡片预览这个工具,把 og:title、og:description、og:image 填进去,六张卡片实时按各平台真实截断长度渲染,标题超限会变红提示,改文案不用等部署。

第二类是上线后核对真实抓取结果。把页面分别送进各家官方调试器:Facebook 分享调试器、X 的 Card Validator、LinkedIn Post Inspector。它们会显示爬虫实际抓到的标签,还能强制刷新缓存,这点很重要,因为平台会缓存旧卡片,你改了标签不刷新缓存可能还显示老图。

如果你连基础的 meta 标签都还没生成,可以先用 meta 标签生成器把 title、description、og 这套一次性生成出来,再拿去预览和调试。

收个尾

分享卡片好不好看,本质是个"为不渲染页面的爬虫专门写一份信息"的活儿。把 og:title 写成完整一句话、og:image 用 1200×630 绝对地址、og:description 控制在百来字,再用预览工具和官方调试器各跑一遍,一条链接发到哪儿都能体面地展开。

Made by Toolora · Updated 2026-06-13