免费工具 OG 标签预览 · 分享卡片检查
链接被分享出去时，钉钉、飞书、Facebook、LinkedIn 这些平台会读网页 head 里的几个标签，拼成一张卡片：标题、描述、缩略图。填表生成这些标签，或把现有页面的 head 粘进来看它现在写了什么，再对着各平台的卡片逐个修。微信比较特殊，页面里也说清楚了。
- 七个平台
- 分享图尺寸检查
- 不抓取、不上传
生成或检查分享标签
表单里预填的是 TapCub 中文首页的标签。要检查别的页面，切换到「粘贴 HTML」：在浏览器里「查看网页源代码」，至少把 head 部分复制进来。
卡片上的标题，通常比网页标题短一点。
一两句话。多数卡片只显示一到两行。
页面的规范网址，带 https://。
完整网址。1200 × 630 像素在各平台都合适。
宽 × 高（像素），会写成 og:image:width / height。图片加载出来后，预览也会读出实际尺寸。
给读屏软件用的图片描述。
选填，如 @yourbrand，没有海外账号就留空。
粘贴网页源代码或其中的 <head>。只读 title、meta 和 canonical，不会联网抓取。
分享卡片预览
大致的版式。各平台经常调整卡片样式，而且会缓存第一次抓到的内容。
tapcub.com
TapCub | 网站统计、用户行为分析与在线客服平台
网站、App 与小程序统计，行为分析、用户画像、营销归因与在线客服，同一个平台。无 Cookie、过滤爬虫的真实数据——访客还在页面上时就能开口。
X（Twitter）
有官方文档来自 tapcub.com
X 目前的大图卡片只显示图片和一个短标签，样式经常变。
TapCub | 网站统计、用户行为分析与在线客服平台
tapcub.com
Slack
有官方文档TapCub
TapCub | 网站统计、用户行为分析与在线客服平台
网站、App 与小程序统计，行为分析、用户画像、营销归因与在线客服，同一个平台。无 Cookie、过滤爬虫的真实数据——访客还在页面上时就能开口。
微信
要靠 JS-SDK不接 JS-SDK（常见情况）
TapCub | 网站统计、用户行为分析与在线客服平台
https://tapcub.com/zh/
接入公众号 JS-SDK 后
TapCub | 网站统计、用户行为分析与在线客服平台
网站、App 与小程序统计，行为分析、用户画像、营销归因与在线客服，同一个平台。无 Cookie、过滤爬虫的真实数据——访客还在页面上时就能开口。
微信读不读 og 标签没有保证。想自定义标题、描述和缩略图，要有认证的公众号、配置 JS 接口安全域名，再调用 updateAppMessageShareData；直接把网址粘贴进聊天框，只会显示成一段文字链接。
钉钉
实测，无文档TapCub | 网站统计、用户行为分析与在线客服平台
网站、App 与小程序统计，行为分析、用户画像、营销归因与在线客服，同一个平台。无 Cookie、过滤爬虫的真实数据——访客还在页面上时就能开口。
tapcub.com
飞书
实测，无文档TapCub | 网站统计、用户行为分析与在线客服平台
网站、App 与小程序统计，行为分析、用户画像、营销归因与在线客服，同一个平台。无 Cookie、过滤爬虫的真实数据——访客还在页面上时就能开口。
tapcub.com
钉钉和飞书都没有公开链接预览的规则；社区实测两者都会读 og:title、og:description 和 og:image。
检查清单
- 通过图片 1200×630，比例 1.90:1，适合这里所有平台的大图卡片。
- 通过标签里没有发现问题。
<!-- Open Graph -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://tapcub.com/zh/">
<meta property="og:title" content="TapCub | 网站统计、用户行为分析与在线客服平台">
<meta property="og:description" content="网站、App 与小程序统计，行为分析、用户画像、营销归因与在线客服，同一个平台。无 Cookie、过滤爬虫的真实数据——访客还在页面上时就能开口。">
<meta property="og:image" content="https://tapcub.com/assets/img/og/zh/home.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="TapCub | 网站统计、用户行为分析与在线客服平台">
<meta property="og:site_name" content="TapCub">
<!-- X (Twitter) -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image:alt" content="TapCub | 网站统计、用户行为分析与在线客服平台">找到的标签
按找到的内容重新整理：相对网址补成完整网址，缺的基本标签补上。
分享这组输入：数值写在链接的 # 后面，不会发到服务器。
https://tapcub.com/zh/tools/open-graph-preview
版本 v1.0更新于 更新记录
预览和检查清单怎么读
每张卡片都按那个平台的取值顺序来拼。只有某一张卡片不对时，原因通常是那个平台优先读的某个标签。
卡片上的标签
「有官方文档」表示平台公开说明了读哪些标签（Facebook、X、LinkedIn、Slack）；「实测，无文档」表示没有公开规则，预览按社区实测来（钉钉、飞书）；微信单独标出「要靠 JS-SDK」，原因见卡片下方说明。
分享图尺寸和比例
图片在浏览器里加载出来后，会读出实际尺寸再检查：1200×630 以上各平台都稳，1.91:1 不会被裁，og:image:width / height 要和实际一致。文件大小这里查不了：Facebook 上限 8 MB，LinkedIn、X 是 5 MB；国内平台建议控制在几百 KB，加载更快。
回退规则
没有 og:title 时多数平台用网页标题；没有 twitter: 标签时 X 读同名 og: 标签。没有 og:image 就没有好的替代，所以它是最要紧的那一个错误。
找到的标签和建议写法
粘贴模式下，表格列出每个 og: / twitter: 标签和它所在的行号，方便回模板里找。下面的「建议写法」是同样的内容重新整理过的版本，相对网址已经补成完整网址。
各平台都会缓存卡片。改完标签后，用 Facebook 的 Sharing Debugger、LinkedIn 的 Post Inspector 重新抓取；钉钉、飞书、微信没有公开的刷新工具，可以在网址后面加个参数（如 ?v=2）再分享测试。
三步
工具不会去抓你的网站，所有内容都是你填或粘贴进来的。
-
1
填表或粘贴 HTML
新页面直接填表。已上线的页面，在浏览器里「查看网页源代码」，复制 head 部分粘贴到「粘贴 HTML 检查」。平台只看服务器返回的 HTML，用 JavaScript 后加的标签通常读不到。
-
2
逐个对比卡片
看每张卡片里图片被怎么裁、标题有多长、显示的域名对不对。把 twitter:card 在大图和小图之间切换，看 X 和 Slack 的区别。
-
3
复制标签
复制或下载生成的标签，放进页面 head（宝塔面板里直接改模板文件，或在建站系统的 SEO 设置里填），再用各平台的调试工具清缓存。
各平台读取的标签和图片要求
有官方文档的按文档整理，没有的直接写明。
- Open Graph 协议规定 og:title、og:type、og:image、og:url 是每个页面的基本属性
- 这些标签里的网址都必须是完整网址，没有哪个平台会帮你补全相对路径
- 标签必须在服务器返回的 HTML 里：分享抓取程序不执行 JavaScript
| 平台 | 读取 | 图片建议 | 依据 |
|---|---|---|---|
| 微信 | JS-SDK 设置的值；og 标签不可靠 | 方形缩略图 | 微信 JS-SDK 文档 |
| 钉钉、飞书 | og:title、og:description、og:image（实测） | 小方形缩略图 | 无公开文档 |
| og:title、og:description、og:image、og:url | ≥ 1200×630；≥ 600×315 才出大图；最小 200×200；≤ 8 MB | Meta 开发者文档 | |
| X | 先看 twitter:card，再读 twitter:* 或同名 og:* | 大图 2:1，≥ 300×157，≤ 5 MB | X 开发者文档 |
| og:title、og:image、og:description、og:url | ≥ 1200×627，1.91:1，≤ 5 MB | LinkedIn 帮助中心 | |
| Slack | oEmbed，其次 Twitter Card 和 og 标签 | 未公布尺寸 | Slack 开发者博客 |
检查粘贴示例
「粘贴 HTML 检查」里的示例是一个双 11 活动页，有四处典型问题。下面是检查结果和改法。
| 行 | 发现 | 级别 | 改法 |
|---|---|---|---|
| 7 | og:description 用了 name= | 提示 | 改成 property="og:description" |
| 8 | og:image 是相对路径 /img/sale-banner.jpg | 错误 | 改成 https://www.example.com/img/sale-banner.jpg |
| — | 没有 og:type | 提示 | 补上 website |
| — | 没有 twitter:card | 要改 | 只在国内分享可以不管；要在 X 上推广再加 |
相对路径的分享图会让所有卡片都没图：钉钉、飞书、Facebook 都是从自己的服务器去抓 og:image，猜不出你的域名。表格下方的「建议写法」已经补成了完整网址。
分享卡片为什么不对
大多数卡片出问题，都逃不出这四个原因，而且在页面上一个都看不出来。
分享图写了相对路径
/og.jpg 在你自己的浏览器里能打开，别的服务器上的抓取程序却找不到。永远写完整的 https:// 地址。
用 JavaScript 加的标签
Vue、React 单页应用在页面加载后才写 og 标签，分享出去就是空卡片：抓取程序只读原始 HTML。改成服务端渲染或预渲染。
以为微信也读 og
微信里分享出去的卡片，标题、描述、图片要靠公众号 JS-SDK 设置；只写 og 标签，微信里多半还是网页标题加默认图标。
对着缓存测试
平台会保留第一次抓到的卡片。改完后用调试工具重新抓取，或者在网址后加个参数再分享测试。
OG 标签是什么？
Open Graph（开放图谱）协议定义的一组 meta 标签，写在网页 head 里，告诉平台这个页面被分享时显示什么：og:title、og:description、og:image、og:url、og:type。最早由 Facebook 提出，现在钉钉、飞书、LinkedIn、Slack 和 X（作为回退）都会读。
微信分享为什么不显示我的 og:image？
微信没有说明会读普通网页的 Open Graph 标签，实际表现也不稳定。从微信内置浏览器分享时，除非页面通过公众号 JS-SDK 设置了标题、描述和图片（需要认证的公众号，并把域名加到 JS 接口安全域名里），否则通常只显示网页标题和默认图标。直接把网址粘贴到聊天框，只会是一段文字链接。
推特（X）的 Card Validator 还能用吗？
不能用来预览了。2022 年 8 月推特去掉了 Card Validator 的卡片预览，改为在发帖框里粘贴链接、发布前看卡片。本页不用发帖，按你的标签直接预览 X 卡片，并提示缺少 twitter:card 或取值不对。
钉钉、飞书的分享卡片读什么？
两家都没有公开链接预览的规则。社区实测会读 og:title、og:description 和 og:image，没有时退回网页标题。分享图要能被公网访问，开了防盗链的图床容易抓不到。
og:image 用多大的图？
1200×630 像素最稳：Facebook 建议至少 1200×630，LinkedIn 要求至少 1200×627，1.91:1 的比例也接近 X 的大图卡片。文件控制在几百 KB 到 1 MB，重要内容放在画面中间，钉钉、飞书的小方图会从中间裁。
分享卡片改了不更新怎么办？
各平台都会缓存第一次抓到的内容。Facebook 用 Sharing Debugger、LinkedIn 用 Post Inspector 重新抓取；钉钉、飞书、微信没有公开的刷新工具，可以在网址后加个参数（如 ?v=2）让平台当成新链接重新抓。
工具能直接输入网址抓取吗？
不能，这是有意的：除了预览图片的请求，没有任何内容离开你的浏览器。请粘贴网页源代码。图片直接从标签里的网址加载、不带来源信息，用来读出实际尺寸。
单页应用（Vue / React）分享出来没有卡片？
分享抓取程序只读服务器返回的 HTML，不执行 JavaScript。如果 og 标签是前端代码后加的，抓取程序看不到。改成服务端渲染（Nuxt、Next.js）、预渲染，或者在服务器模板里直接输出这些标签。