Open Graph 测试器 / 社交分享预览 / Meta Tags 生成
预览网站在社交媒体上的第一印象
输入网址,立即查看你的网站在 Facebook、X、LinkedIn、Slack 和消息 App 里如何显示;生成 Open Graph 元标签,诊断 metadata 问题,并在客户分享链接前修好预览。
先看到客户会看到的分享卡片
用正确的标题、描述、图片与 Open Graph 标签,把普通链接变成清楚、可信、值得点击的社交预览。
支持链接真正会被分享出去的平台
安全抓取、准确解析、可信预览
OpenGraphy 不在用户浏览器里抓取目标网站,而是由后端模拟 crawler 行为:检查 DNS 与重定向、阻挡私有网段、解析初始 HTML、验证图片是否可访问,最后把结果整理成诊断报告与修复建议。
SSRF 防护每次抓取都检查 DNS、IP 范围与每一步重定向,避免访问 localhost、内网与保留地址。
4 小时缓存metadata 与预览结果暂存在 Redis,不长期保存 URL 历史,也不保存用户个人资料。
诊断建议检查缺失标签、相对图片 URL、图片尺寸、HTTP 状态、标题长度与描述长度。
用 Open Graph 让每一次分享都像精心设计的广告位
Open Graph 是社交平台、即时通讯软件和内容工具读取网页预览的共同语言。只要在 HTML 的 head 里放对标签,你就能控制分享卡片的标题、描述、图片、网址和内容类型。
Open Graph 是什么?
OG 标签是一组给 crawler 看的 metadata。Facebook、LinkedIn、Slack、Discord、WhatsApp、Telegram、X 等平台在生成链接预览时,通常会先读取 og:title、og:description 和 og:image。
建议图片尺寸
最稳妥的预览图尺寸是 1200 x 630,比例约为 1.91:1。图片请尽量压小,让通讯工具更快生成预览。
为什么要从后端抓取?
大多数平台 crawler 不会执行浏览器里的 JavaScript,也不会等待 SPA 完成渲染。后端抓取更接近平台实际看到的页面。
最小可用的 Open Graph 标签
如果你只能先做一件事,请先把标题、描述、图片和 canonical URL 补齐。这几个标签能消除大部分预览问题。
<meta property="og:title" content="你的頁面標題" />
<meta property="og:description" content="一段清楚、有吸引力的頁面摘要。" />
<meta property="og:image" content="https://example.com/preview.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:url" content="https://example.com/page" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="Example" />
<meta name="twitter:card" content="summary_large_image" />
不同平台会用不同规则解读同一组 metadata
重視 og:title、og:description 和 og:image。修改后可能需要用 Sharing Debugger 觸发重新抓取。
X / Twitter
可以回退读取 OG,但建议另外加 twitter:card 和 twitter:image,才能穩定显示大图卡片。
通常会快取第一次抓到的內容;发布前先检查,发布后若改图或改标題,最好用 Post Inspector 重新整理。
WhatsApp / iMessage
图片檔案太大時容易失敗或被截斷。請壓縮图片,並明确提供寬高,讓预览生成更快。
Discord / Slack / Telegram
偏好伺服器初始 HTML 裡就存在的标签;不要只靠前端 JS 動态插入中繼資料。
Pinterest / Reddit
除了寬版图,電商、作品集和文章頁也可准備方形或直式图片,讓縮图在內容流裡更醒目。
常见技术栈如何接入
Next.js / Nuxt / Astro
优先使用框架提供的中繼資料 API 或 SSR/SSG,在伺服器輸出的 HTML 裡直接生成 OG 标签。
WordPress
可以使用 SEO 外掛,也可以在 theme 的 head hook 裡輸出文章标題、摘要、特色图片和永久連結。
單頁應用 SPA
如果完全依靠客戶端渲染,許多平台 crawler 会看不到中繼資料。請加 SSR、预渲染,或為分享頁提供靜态 HTML。
常见问题
Open Graph 会直接影響 SEO 排名嗎?
它通常不是直接排名因子,但能提升社群點擊率和分享品質,間接帶來更多流量、引用和品牌曝光。
為什麼換图后平台還显示舊图片?
平台会快取抓取結果。請使用 Facebook Sharing Debugger、LinkedIn Post Inspector 等工具強制重新抓取,必要時也可以替图片 URL 加版本參数。
沒有 OG 标签会怎樣?
平台会自行猜测:抓 title、meta description 或頁面裡第一張較大的图片。結果不可控,常見問題是图錯、标題太长或完全沒有卡片。
标签大小寫有差嗎?
有。請使用規範的小寫名稱,例如 og:title,不要寫成 OG:Title。許多 crawler 對大小寫很挑剔。