为什么我的链接预览在我更新标签后显示旧图像？

每个主要平台都会缓存抓取页面的结果,通常持续一周或更长时间,因此修复之前您共享的链接会不断显示陈旧的卡。更新标签不会自行使该缓存无效。重新抓取平台调试器中的 URL - Facebook Sharing Debugger、LinkedIn Post Inspector 或通过在 Slack 中重新共享 - 以强制重新获取。向 URL 添加无害的查询字符串也会生成无缓存的预览以进行测试。

我需要 og: 和 twitter: 标签吗？

Not always,但两者兼有比较安全,X在twitter:等价物缺失时回落到Open Graph标签,所以只有og:title、og:description、og:image的页面还是会产生一张卡片,而你在Open Graph中无法表达的是卡片样式:twitter:card决定于大横幅和紧凑的汇总布局之间,而twitter:site和twitter:creator将卡片归属于你的帐户,将这三者相加,让og:标签覆盖其余部分。

我的 og:title 和 og:description 应该有多长？

60个左右字符处或以下保持og:title-大多数卡片截断过去那个,并且较早地缩小移动卡片剪辑对于og:description限制分化:X显示大约110个字符,Facebook和LinkedIn显示接近155到200如果你写到更紧的X限制你的描述到处都完全阅读,任何过去没有丢失的东西,它只是隐藏在省略号后面,所以前面加载重要的单词。

为什么我的预览是空白或仅显示网址？

通常的原因是 og:image 是一个相对路径而不是绝对 URL、通过普通 http 提供的图像、放置在之外的标签、客户端 JavaScript 注入的刮刀从未运行的标签、页面返回非 200 状态或登录重定向到刮刀。检查您的服务器返回的原始 HTML 中是否出现标签 - 查看源而不是浏览器检查器,因为检查器在 JavaScript 运行后显示 DOM。

这个工具是否会获取我的网址来检查标签？

不。它根本没有网络请求。它可以从您在表单中输入的标签或作为 HTML 粘贴的标签工作，并且在浏览器中解析和渲染一切。这是一个刻意的设计选择：浏览器无法获取任意第三方页面，因为CORS，服务器端获取意味着将未发布的URL发送给其他人。因为没有获取任何内容，因此您可以验证本地主机、登台或登录后的页面。

我可以预览尚未发布的页面吗？

是的,使用这样的工具而不是平台调试器是主要原因。官方调试器必须获取您的实时 URL,因此对于未部署的页面来说它们毫无用处。在这里,您只需粘贴您打算发送的标签 - 来自您的模板、框架元数据对象或本地构建 - 预览会立即呈现,无需部署。

如果我留下标签会发生什么？

Scrapers回落,回落是不可预测的,没有og:title他们通常使用标签,没有og:description他们可能会使用元描述或scrape正文。没有og:image大多数平台都显示纯文本卡,尽管有些平台会从页面中抓取任意图像 - 通常是徽标或跟踪像素。没有og:url共享地址按原样使用,这意味着跟踪参数可以分割您的共享计数。显式设置标签是控制结果的唯一方法。

Open Graph 标记是否有助于我的搜索排名?

Not direct。Open Graph标签被社交和聊天平台读取,而不是被搜索引擎用作排名因素。它们确实影响的是您链接的每一份的点击率,这会驱动流量,随着时间的推移,信号确实很重要。将它们视为共享链接的转换优化,而不是SEO排名杠杆。

Open Graph预览工具免费私密吗?

是的。它是完全免费的，没有注册，并且每个解析、验证和预览都在浏览器中的 JavaScript 中进行。您输入的标题、URL 和图像链接永远不会发送到服务器，并且该工具在页面加载后将继续脱机工作。

Open Graph 预览

Q: Open Graph图像大小正确的是?

使用 1200x630 像素，1.91:1 的纵横比。 这就是 Facebook、LinkedIn 和 X 的大小，对于大图像卡片来说都很干净，而且它足够大，可以在高密度屏幕上保持清晰。 将文件保持在大约 5 MB 以下，通过 HTTPS 以绝对 URL 服务，并使重要文本远离边缘，因为某些表面会稍微裁切。 对于紧凑型 X 汇总卡，请提供至少 144x144 的方形图像。

Q: 为什么我的预览是空白或仅显示网址？

通常的原因是 og:image 是一个相对路径而不是绝对 URL、通过普通 http 提供的图像、放置在 之外的标签、客户端 JavaScript 注入的刮刀从未运行的标签、页面返回非 200 状态或登录重定向到刮刀。检查您的服务器返回的原始 HTML 中是否出现标签 - 查看源而不是浏览器检查器,因为检查器在 JavaScript 运行后显示 DOM。

Q: 这个工具是否会获取我的网址来检查标签？

不 。 它根本没有网络请求。 它可以从您在表单中输入的标签或作为 HTML 粘贴的标签工作，并且在浏览器中解析和渲染一切。 这是一个刻意的设计选择：浏览器无法获取任意第三方页面，因为CORS，服务器端获取意味着将未发布的URL发送给其他人。 因为没有获取任何内容，因此您可以验证本地主机、登台或登录后的页面。

Q: 如果我留下标签会发生什么？

Scrapers回落,回落是不可预测的,没有og:title他们通常使用 标签,没有og:description他们可能会使用元描述或scrape正文。没有og:image大多数平台都显示纯文本卡,尽管有些平台会从页面中抓取任意图像 - 通常是徽标或跟踪像素。没有og:url共享地址按原样使用,这意味着跟踪参数可以分割您的共享计数。显式设置标签是控制结果的唯一方法。

Q: Open Graph预览工具免费私密吗?

是的。 它是完全免费的，没有注册，并且每个解析、验证和预览都在浏览器中的 JavaScript 中进行。 您输入的标题、URL 和图像链接永远不会发送到服务器，并且该工具在页面加载后将继续脱机工作。

预览您的链接在 Facebook、X、LinkedIn、Slack 和 Discord 上的外观、验证您的 OG：标签并复制正确的元数据块

Paste existing meta HTML (optional)

Nothing is fetched or uploaded. Paste the tags from your page source and they are parsed in your browser.

og:title53/60

og:description127/200

og:image

og:url

og:site_name5/40

twitter:site

twitter:creator

og:type

twitter:card

Validation

8 1 0

og:title 53 characters - displays in full on every platform.
og:description 127 characters - fine for Facebook and LinkedIn, but X truncates past ~110.
og:image Absolute HTTPS image URL. Serve it at 1200x630 (1.91:1) for the best result.
og:url Absolute canonical URL set.
og:type Set to "website".
og:site_name 5 characters - shown above the title on most cards.
twitter:card Large banner card. Best when your image is 1200x630 or wider.
twitter:site Valid handle (@toolz).
twitter:creator Valid handle (@toolz).

Generated meta tags

<!-- Open Graph / Facebook / LinkedIn / Slack / Discord -->
<meta property="og:type" content="website" />
<meta property="og:url" content="https://toolz.dev/tools/open-graph-preview" />
<meta property="og:title" content="Open Graph Preview: Test Social Cards Before You Ship" />
<meta property="og:description" content="Preview how your link looks on Facebook, X, LinkedIn, Slack, and Discord. Validate your og: tags and copy a correct meta block." />
<meta property="og:site_name" content="Toolz" />
<meta property="og:image" content="https://toolz.dev/og-image.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Open Graph Preview: Test Social Cards Before You Ship" />

<!-- X / Twitter Card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:url" content="https://toolz.dev/tools/open-graph-preview" />
<meta name="twitter:title" content="Open Graph Preview: Test Social Cards Before You Ship" />
<meta name="twitter:description" content="Preview how your link looks on Facebook, X, LinkedIn, Slack, and Discord. Validate your og: tags and copy a correct meta block." />
<meta name="twitter:image" content="https://toolz.dev/og-image.png" />
<meta name="twitter:site" content="@toolz" />
<meta name="twitter:creator" content="@toolz" />

Social card previews

Approximations of each platform's layout - exact rendering changes over time.

Facebook