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

## 工具简介

**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 |

## 使用步骤

1. **打开工具页面**：左侧是输入与操作区（URL 输入框、User-Agent 下拉、操作按钮、图片尺寸建议），右侧是结果区，初始状态显示“输入 URL 并点击抓取”的占位提示，无需登录即可使用。

![Open Graph 预览工具主界面：左侧为输入操作区，含「目标 URL（每行一个，支持批量）」文本框、User-Age](article/202607/1783994200533_8756.png)

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 标签的页面。
- **按修复建议直接抄代码**：缺失标签诊断里给出的就是可直接粘贴的 `<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`（大图卡片）样式渲染。

免费在线 Open Graph 预览工具：输入网址即可抓取 Open Graph 与 Twitter Card 标签，模拟 Facebook、Twitter / X、LinkedIn、微信、WhatsApp、Slack、Telegram 七大平台分享卡片，支持批量抓取、多 User-Agent 模拟，并提供缺失标签修复建议、标题描述长度检测和 og:image 尺寸校验。

Open Graph 预览工具教程：在线检测 og 标签，模拟多平台社交分享卡片