# Open Graph 预览工具教程：在线检测 og 标签，模拟多平台社交分享卡片
> 来源：工具派（https://gjupai.com） 原文页面：https://gjupai.com/tutorial/open-graph-preview-guide
## 工具简介
**Open Graph 预览**是工具派推出的一款社交分享卡片检测工具：只要输入网页 URL，就能自动抓取该页面的 Open Graph 标签和 Twitter Card 标签，并在页面中模拟还原这条链接分享到 **Facebook、Twitter / X、LinkedIn、微信、WhatsApp、Slack、Telegram** 七大平台时的卡片样式。除了“看效果”，工具还会对抓取结果做诊断——标出缺失的核心标签并给出修复代码、统计标题和描述长度是否会被平台截断、检测 og:image 的实际尺寸是否符合 1200×630 的推荐规格。工具支持一次粘贴多个 URL 批量抓取，也可以选择不同的 User-Agent（如 Googlebot、微信内置浏览器）模拟不同客户端的抓取结果，是站长和前端做 SEO 与分享优化的实用助手。
## 功能亮点
- **七大平台卡片预览**：一份抓取结果可分别切换 Facebook、Twitter / X、LinkedIn、微信、WhatsApp、Slack、Telegram 的标签页，每种卡片都按对应平台的真实样式（封面图比例、标题描述截断行数、域名显示位置）渲染。
- **完整标签表格**：抓取到的 `og:title`、`og:description`、`og:image`、`og:url`、`og:type`、`og:site_name`、`og:locale` 以及 `twitter:card`、`twitter:title`、`twitter:image` 等标签逐条列出，未设置的标签会标记为“未设置”，一目了然。
- **缺失标签诊断**：自动检测核心 Open Graph 标签是否齐全，缺失时逐条给出可直接粘贴的修复代码，例如提示在 `` 中补充 ``。
- **长度截断提示**：分别统计标题和描述字符数，标题超过 60 字符、描述超过 200 字符时标红警告，提示可能被平台截断或折叠。
- **og:image 尺寸检测**：读取封面图真实宽高并与 1200×630 推荐值比对，符合显示 ✅，偏差较大显示 ⚠️ 提醒。
- **批量抓取**：输入框每行一个 URL，多行即触发批量模式，结果以卡片网格平铺，同时展示每个网址的标题、描述、图片尺寸和缺失标签，失败项单独标红。
- **多 User-Agent 模拟**：抓取身份可选桌面端、Googlebot、Bingbot、微信、移动端，方便验证站点对不同爬虫或客户端返回的 meta 标签是否一致。
## 参数说明
| 参数 | 说明 | 默认值 / 取值范围 |
| --- | --- | --- |
| 目标 URL | 要检测的网页地址，每行一个，多行自动进入批量模式；未写协议头时自动补 `https://` | 无默认值，必填 |
| User-Agent | 抓取页面时使用的客户端标识，用于模拟不同爬虫或 App 内置浏览器 | 桌面端（默认）/ Googlebot / Bingbot / 微信 / 移动端 |
| 抓取预览 | 主按钮，发起抓取；在输入框中按 Ctrl+Enter 等价于点击它 | — |
| 重新抓取 | 带 `refresh=1` 参数重新抓取，绕过缓存获取最新标签 | 需先输入 URL 才可点击 |
| 清空 | 清空输入框、结果和错误提示，恢复初始状态 | — |
| 平台标签页 | 结果区下方的平台预览切换 | Facebook（默认）/ Twitter / X / LinkedIn / 微信 / WhatsApp / Slack / Telegram |
| 示例链接 | 一键填入输入框的示例网址 | gjupai.com、github.com、bbc.com/news |
## 使用步骤
1. **打开工具页面**：左侧是输入与操作区（URL 输入框、User-Agent 下拉、操作按钮、图片尺寸建议），右侧是结果区，初始状态显示“输入 URL 并点击抓取”的占位提示，无需登录即可使用。
2. **输入目标 URL**：在“目标 URL”输入框中粘贴要检测的网址，每行一个。只检测一个页面时写一行即可；需要对比多个页面时逐行粘贴，工具会自动进入批量模式。网址没写 `http://` 或 `https://` 也没关系，会自动补全为 `https://`。
3. **选择 User-Agent**：在 User-Agent 下拉中选择抓取身份。日常检测用默认的“桌面端”即可；想确认搜索引擎看到的内容时选 Googlebot 或 Bingbot；要验证微信内分享效果时选“微信”。
4. **点击抓取预览**：点击蓝色「抓取预览」按钮（或在输入框内按 Ctrl+Enter）发起抓取。如果站点标签更新后结果没变，点「重新抓取」可绕过缓存强制拉取最新内容。
5. **查看标签表格与诊断**：抓取成功后，右侧依次展示 Open Graph 标签表、Twitter Card 标签表，以及三块诊断卡片——「缺失标签与修复建议」逐条给出修复代码，「长度截断提示」检查标题 60 字符 / 描述 200 字符红线，「og:image 尺寸」核对封面图是否接近 1200×630。
6. **切换平台预览卡片**：在「平台卡片预览」区点击 Facebook、Twitter / X、微信等平台标签，查看该链接在各平台的真实分享样式，确认封面图比例和文案截断是否符合预期。
7. **批量检测（可选）**：一次粘贴多个 URL 时，右侧改为卡片网格，每张卡片展示对应网址的封面缩略图、标题、描述、图片尺寸与缺失标签，抓取失败的网址会以红色卡片单独提示。
## 使用技巧
- **先跑示例链接快速上手**：不确定工具输出长什么样时，点一下“示例链接”里的 gjupai.com 或 github.com，再点抓取，就能立刻看到完整的标签表格和平台预览。
- **发布前必查三项**：分享卡片出问题九成是 og:image 缺失、尺寸不对或标题过长。抓取后重点看「缺失标签」「长度截断」「og:image 尺寸」三张诊断卡，全部变绿再上线。
- **微信分享要单独验证**：微信内置浏览器对页面的解析与普通浏览器不同，把 User-Agent 切到“微信”再抓一次，可以确认微信环境下标签是否依然能被正确读取。
- **改了标签记得点「重新抓取」**：很多平台和服务端会缓存抓取结果，刚修改完 meta 标签立刻刷新可能还是旧数据，用「重新抓取」带 refresh 参数强制拉新。
- **批量模式适合全站巡检**：改版或换域名后，把核心页面 URL 逐行粘贴一次性抓取，用卡片网格快速扫一遍缺失标签列，能高效筛出还没补 og 标签的页面。
- **按修复建议直接抄代码**：缺失标签诊断里给出的就是可直接粘贴的 `` 写法，例如 og:image 会附上“推荐尺寸 1200×630”的提示，照抄改值即可。
## 常见问题
**Q1：为什么我分享的链接在社交平台没有封面图？**
最常见原因是页面缺少 `og:image` 标签，或图片尺寸过小、比例不合适。用本工具抓取后看「缺失标签与修复建议」，若 og:image 缺失，按提示在 `` 中添加对应 meta 标签，并保证图片接近 1200×630。
**Q2：标题和描述多长比较合适？**
工具以标题 60 字符、描述 200 字符为推荐上限，超过会在「长度截断提示」中标红。各平台实际截断位置略有差异，预览区卡片用两行截断模拟真实效果，建议把关键信息放在文案开头。
**Q3：User-Agent 选 Googlebot 和桌面端结果不一样，正常吗？**
正常。有些站点会针对不同 UA 返回不同内容（如 SSR 直出或反爬策略）。如果 Googlebot 抓取结果缺标签而桌面端正常，说明站点对爬虫的渲染有问题，需要检查服务端渲染或 robots 配置。
**Q4：批量抓取最多能放多少个 URL？**
工具对每行一个的 URL 数量没有硬性限制，但一次粘贴过多会拉长整体等待时间，建议分批检测，每批十几个页面体验最好。
**Q5：「重新抓取」和「抓取预览」有什么区别？**
「抓取预览」走正常流程，可能命中缓存；「重新抓取」会附加 refresh 参数强制重新拉取页面，适合刚修改完 meta 标签后验证最新效果。
**Q6：工具能检测 Twitter Card 吗？**
可以。结果区有独立的 Twitter Card 标签表，列出 `twitter:card`、`twitter:title`、`twitter:image` 等标签；未设置 `twitter:card` 时，预览会按 `summary_large_image`（大图卡片）样式渲染。