新品首发朋友圈
市场部同事在苹果发布会后两小时就要发预热海报到朋友圈，但设计稿里的 OG 标签只在公司内网测试过。他拿本工具粘贴最终上线链接，发现微博分享缩略图是旧版 logo、微信摘要多了个乱码字符。现场改完 meta 再测一次才发，避免了 500 人点赞后才发现配图错误的尴尬。
OPEN GRAPHog: · 通用 / 微信 / 微博 / Facebook
TWITTER CARDtwitter: · X 卡片（留空继承 OG）
校验checks · 抓取建议
多平台预览同一组数据 · 各平台样式差异
预览为各平台样式示意（布局 / 字号 / 标题描述截断规则不同）。实际展示由各平台抓取规则决定；远程图片可能因跨域 / referrer 策略无法加载，以占位代替不影响代码生成。
生成代码paste into <head>
就绪 · 填写 OG 字段即时预览各平台分享卡
第一节
关于本工具
About排版链接到微信、微博或 Facebook，预览图裂了、标题截断、描述对不上——这些 bug 往往在发出去之后才被发现。输入页面 URL，工具实时抓取 OG 标签并渲染成各平台的卡片样式，一眼看出哪里不对。纯浏览器端抓取，链接本身不上传任何服务器。
使用场景
公众号推文嵌入
运营编辑写一篇行业报告解读，文中引用了自家官网的专题页。她不确定微信内置浏览器打开时，页面标题和描述会不会被截断或显示成默认域名。用本工具输入链接，直接看到微信、微博、Facebook 三端渲染效果，发现描述超了 80 字被截断，立刻压缩到 70 字以内再发布。
跨境商品详情页
独立站运营在 Shopify 上新了一款日本保温杯，商品页 OG 标签写了英文标题。他用本工具分别模拟微信和 Facebook 分享预览，发现 Facebook 显示了正确的价格和库存状态，但微信端只抓到了页面默认的「Shop」字样。他立刻补上中文 OG 标签，确保国内代购转发时显示产品名和促销价。
活动海报二维码
线下沙龙的海报上印了报名链接的二维码，主办方担心参会者扫码后微信预览只显示「该页面无法预览」。活动前他用本工具测了链接在微信和微博的渲染效果，发现 OG 图片路径写成了相对地址导致空白。修正后海报才批量印刷，避免了现场 200 人扫码后看不到活动信息。
品牌公关稿分发
公关经理要同时向科技媒体和财经媒体发送一篇融资新闻稿，链接会出现在微信群和微博评论区。她用本工具分别检查链接在微信和微博的预览效果，发现微博端标题被截断成「XX 公司完成 B 轮融资…」，缺少关键金额数字。调整 OG title 到 40 字以内后，所有渠道预览完整一致。
第二节
使用指南
Getting Started使用步骤
- 1在输入框粘贴目标网页的 URL（含 http:// 或 https://），下方自动抓取该页 OG 标签
- 2检查「标题」「描述」「图片」三个预览区是否正常显示，缺失项表示该页未设对应 OG 标签
- 3点击预览区图片可放大查看，长按或右键可复制图片地址用于调试
- 4修改 URL 后按回车或点击「刷新」按钮，预览区即时更新，无需手动清空
输入输出示例
| 输入 | 输出 | 说明 |
|---|---|---|
| https://example.com/article?utm_source=test&id=123 | 标题：Example Domain 描述：This domain is for use in illustrative examples in documents. 图片：无 卡片类型：summary | 常规：典型文章URL，验证工具能正确提取OG标签并忽略URL参数 |
| https://ogp.me/ | 标题：Open Graph protocol 描述：The Open Graph protocol enables any web page to become a rich object in a social graph. 图片：https://ogp.me/logo.png 卡片类型：summary_large_image | 常规：OG协议官方页面，验证工具能识别带图片和长描述的完整OG标签 |
| https://www.youtube.com/watch?v=dQw4w9WgXcQ | 标题：Rick Astley - Never Gonna Give You Up (Official Music Video) 描述：The official video for “Never Gonna Give You Up” by Rick Astley. 图片：https://i.ytimg.com/vi/dQw4w9WgXcQ/maxresdefault.jpg 卡片类型：video | 边界：视频平台页面，验证工具能处理og:type为video的情况并显示视频特有信息 |
| https://www.quanbao5.com/wangzhan/og | 标题：Open Graph 预览 - 全宝工具站 描述：在线预览网页在微信、微博、Facebook等平台的分享卡片效果。 图片：https://www.quanbao5.com/static/og-preview.png 卡片类型：website | 边界：工具自身页面，验证工具能正确解析同站URL并展示自身OG标签 |
| https://httpbin.org/status/404 | 错误：无法获取页面内容（HTTP 404） | 易错：404页面无OG标签，验证工具能给出明确错误提示而非空结果 |
| https://www.example.com/no-og-tags | 标题：Example Domain（从<title>标签提取） 描述：无描述（页面无meta description） 图片：无 卡片类型：summary（默认） | 易错：页面完全无OG标签，验证工具能回退到标准HTML标签并明确标注来源 |
| https://www.instagram.com/p/CxYzAbCdEfG/ | 标题：Instagram post by @username 描述：Photo by @username on Instagram 图片：https://instagram.com/p/CxYzAbCdEfG/media/?size=l 卡片类型：article | 边界：需要登录的社交平台页面，验证工具能处理受限访问并正确提取公开OG标签 |
常见错误对照
1.图片 URL 使用相对路径，预览图裂
✗ 错误
<meta property="og:image" content="/images/cover.jpg" />✓ 修复
<meta property="og:image" content="https://example.com/images/cover.jpg" />社交平台抓取器从服务器端请求资源，无法理解相对路径。必须提供完整的绝对 URL（含协议和域名），否则图片无法加载。
2.og:title 与页面 <title> 完全不一致，被平台降权
✗ 错误
<title>首页</title>
<meta property="og:title" content="2025 夏季新款女装 - 全场五折" />✓ 修复
<title>2025 夏季新款女装 - 全场五折</title>
<meta property="og:title" content="2025 夏季新款女装 - 全场五折" />Facebook、Twitter 等平台会比对 og:title 与页面 <title>，差异过大可能判定为 SEO 作弊或内容不匹配，降低展示权重。
3.og:description 写满 300 字，被截断
✗ 错误
<meta property="og:description" content="这是一段长达 200 多字的详细产品介绍，从材质、工艺、设计理念到用户评价，事无巨细地罗列了所有卖点，希望用户能一次性了解全部信息，但社交平台只显示前 150 字左右，后面全部被截断。" />✓ 修复
<meta property="og:description" content="精选新疆长绒棉，透气亲肤；立体剪裁，修饰身形；限时 7 折，包邮。" />微信、Facebook 等平台对 og:description 有字符截断（通常 150-200 字）。超长描述会被硬截断，核心信息丢失。建议控制在 80-120 字。
4.og:image 尺寸过小，预览图模糊
✗ 错误
<meta property="og:image" content="https://example.com/icon-64x64.png" />✓ 修复
<meta property="og:image" content="https://example.com/og-image-1200x630.jpg" />Facebook 推荐 og:image 最小 600×315 像素、最佳 1200×630 像素。小图会被拉伸放大，导致模糊或出现锯齿。微信也遵循类似规范。
5.缺少 og:type，默认被识别为 website
✗ 错误
<meta property="og:title" content="文章标题" />
<meta property="og:url" content="..." />
（缺少 og:type）✓ 修复
<meta property="og:type" content="article" />og:type 告诉平台内容的性质（article / video / product 等）。缺失时平台默认按普通网页处理，可能失去文章作者、发布时间等专属展示样式。
6.og:url 与页面实际 URL 不一致，分享数据混乱
✗ 错误
页面 URL: https://example.com/p/123
<meta property="og:url" content="https://example.com/p/123?utm_source=wechat" />✓ 修复
页面 URL: https://example.com/p/123
<meta property="og:url" content="https://example.com/p/123" />og:url 是社交平台聚合分享数据的唯一标识。带参数会导致不同参数版本被当作不同页面，点赞、评论数据分散。应使用不带追踪参数的规范 URL。
第三节
工作原理
How It Works核心公式
OG_Title = meta[property='og:title'] || meta[name='twitter:title'] || document.title
变量说明
OG_Title最终显示的标题文本meta[property='og:title']Open Graph 协议标题标签meta[name='twitter:title']Twitter Card 标题标签document.titleHTML <title> 标签内容
示例
网页 HTML 中 <meta property='og:title' content='2025 春季新品发布' /> 存在，且 <title>2025 新品</title>，则 OG_Title = '2025 春季新品发布'（优先取 og:title）；若 og:title 缺失但 <meta name='twitter:title' content='春季新品' /> 存在，则取 '春季新品'；若两者均无，则回退到 document.title = '2025 新品'。
用户输入
本地处理
输出结果
第五节
常见问题
Q & A问我贴了网页链接进去，预览图出不来，怎么回事？＋
答
最常见的原因是目标网页的 OG 标签本身不完整或写错了。本工具只读取网页 HTML 里 <meta property="og:image"> 等标签的值，不会自动生成图片。先检查网页源代码里有没有这些标签，image 值是不是一个完整的图片 URL（不是相对路径），图片链接能不能直接打开。如果是动态渲染的页面（比如 Vue/React SPA），需要服务端渲染才出 OG 标签，纯前端抓不到。
问为什么微信里看到的预览和这个工具显示的不一样？＋
答
微信有自己的一套缓存机制，它会抓取一次后把结果存很久（几小时到几天不等），不会每次转发都重新读取网页标签。本工具是实时抓取你当前输入的 URL，所以看到的是最新状态。如果微信里显示旧图或旧标题，去微信公众平台后台的「草稿箱」→「分享调试」里清缓存刷新，或者换个没转发过的微信号试一次。
问输入网址后一直显示“加载中”没反应，是工具坏了吗？＋
答
不是工具坏了，通常是目标网页响应太慢或拒绝了请求。本工具是纯前端实现，浏览器直接去请求目标网页，如果那个网站有反爬机制、或服务器响应超过 10 秒、或用了 HTTPS 但证书有问题，请求就会被浏览器拦截或超时。换个常见的网站（比如 baidu.com）试试能不能出结果，如果能，说明你刚才输入的网址有访问限制或太慢。
问OG 标签里 og:image 填多大尺寸最合适？＋
答
不同平台建议不同：Facebook 推荐 1200×630 像素（比例 1.91:1），微信推荐 300×300 以上且比例接近 1:1 的正方形。图片太小（比如 100×100）会被直接忽略，太大（超过 5MB）可能加载慢被截断。本工具会显示 OG 标签里 image 的原始地址，但不做图片缩放或裁剪，所以最好在网页端就把图片尺寸调好再上线。
问这个工具能预览抖音/小红书链接的卡片吗？＋
答
不能。抖音、小红书这类 App 内的链接通常是跳转协议（比如 snssdk://），不是标准的 HTTP 网页，浏览器无法直接请求。即使拿到网页版地址，它们的 OG 标签也经常是动态 JS 渲染的，纯前端抓取不到。本工具只适用于标准 HTTP/HTTPS 网页，且网页必须服务端直接输出 OG 标签。
问为什么有的网站有 og:title 但这里显示为空？＋
答
可能是 og:title 的值是空字符串或纯空格，也可能是标签写在了 HTML 注释里（<!-- -->）或者被 JavaScript 动态插入了。本工具只读取原始 HTML 的 <meta> 标签，不会执行 JS。用浏览器的「查看网页源代码」搜 og:title，看实际内容是不是空的。如果是空的，去网站后台把标题填上再重新发布。
问这个工具和那些付费的社交预览工具有什么区别？＋
答
主要区别有三点：第一，本工具纯前端运行，不经过任何后端服务器，你的链接只在你本地浏览器里请求，不会被记录或存储；第二，它只做 OG 标签的读取和展示，不会帮你生成预览图或修改网页内容；第三，完全免费且无使用次数限制。付费工具通常提供批量检测、历史记录、缓存刷新等增值服务。
隐私保证所有计算与处理均在你的浏览器本地完成，输入数据不会上传服务器，也不会保存或共享。