工具简介
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 标签是否齐全，缺失时逐条给出可直接粘贴的修复代码，例如提示在
<head>中补充<meta property="og:image" ...>。 - 长度截断提示：分别统计标题和描述字符数，标题超过 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 |
使用步骤
- 打开工具页面：左侧是输入与操作区（URL 输入框、User-Agent 下拉、操作按钮、图片尺寸建议），右侧是结果区，初始状态显示“输入 URL 并点击抓取”的占位提示，无需登录即可使用。
输入目标 URL：在“目标 URL”输入框中粘贴要检测的网址，每行一个。只检测一个页面时写一行即可；需要对比多个页面时逐行粘贴，工具会自动进入批量模式。网址没写
http://或https://也没关系，会自动补全为https://。选择 User-Agent：在 User-Agent 下拉中选择抓取身份。日常检测用默认的“桌面端”即可；想确认搜索引擎看到的内容时选 Googlebot 或 Bingbot；要验证微信内分享效果时选“微信”。
点击抓取预览：点击蓝色「抓取预览」按钮（或在输入框内按 Ctrl+Enter）发起抓取。如果站点标签更新后结果没变，点「重新抓取」可绕过缓存强制拉取最新内容。
查看标签表格与诊断：抓取成功后，右侧依次展示 Open Graph 标签表、Twitter Card 标签表，以及三块诊断卡片——「缺失标签与修复建议」逐条给出修复代码，「长度截断提示」检查标题 60 字符 / 描述 200 字符红线，「og:image 尺寸」核对封面图是否接近 1200×630。
切换平台预览卡片：在「平台卡片预览」区点击 Facebook、Twitter / X、微信等平台标签，查看该链接在各平台的真实分享样式，确认封面图比例和文案截断是否符合预期。
批量检测（可选）：一次粘贴多个 URL 时，右侧改为卡片网格，每张卡片展示对应网址的封面缩略图、标题、描述、图片尺寸与缺失标签，抓取失败的网址会以红色卡片单独提示。
使用技巧
- 先跑示例链接快速上手：不确定工具输出长什么样时，点一下“示例链接”里的 gjupai.com 或 github.com，再点抓取，就能立刻看到完整的标签表格和平台预览。
- 发布前必查三项：分享卡片出问题九成是 og:image 缺失、尺寸不对或标题过长。抓取后重点看「缺失标签」「长度截断」「og:image 尺寸」三张诊断卡，全部变绿再上线。
- 微信分享要单独验证：微信内置浏览器对页面的解析与普通浏览器不同，把 User-Agent 切到“微信”再抓一次，可以确认微信环境下标签是否依然能被正确读取。
- 改了标签记得点「重新抓取」：很多平台和服务端会缓存抓取结果，刚修改完 meta 标签立刻刷新可能还是旧数据，用「重新抓取」带 refresh 参数强制拉新。
- 批量模式适合全站巡检：改版或换域名后，把核心页面 URL 逐行粘贴一次性抓取，用卡片网格快速扫一遍缺失标签列，能高效筛出还没补 og 标签的页面。
- 按修复建议直接抄代码：缺失标签诊断里给出的就是可直接粘贴的
<meta>写法，例如 og:image 会附上“推荐尺寸 1200×630”的提示，照抄改值即可。
常见问题
Q1：为什么我分享的链接在社交平台没有封面图？
最常见原因是页面缺少 og:image 标签，或图片尺寸过小、比例不合适。用本工具抓取后看「缺失标签与修复建议」，若 og:image 缺失，按提示在 <head> 中添加对应 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（大图卡片）样式渲染。