Open Graph 图片预览

预览页面在 Twitter、Facebook 和 LinkedIn 上分享时的外观。输入 OG meta 标签查看实时预览。

Twitter / X大图摘要卡片

FastDevKit
FastDevKit - Free Developer Tools
Free online developer tools. Fast, private, no signup required.

Facebook链接预览

FastDevKit
FastDevKit - Free Developer Tools
Free online developer tools. Fast, private, no signup required.

LinkedIn链接预览

FastDevKit - Free Developer Tools
FastDevKit

推荐的 OG Meta 标签

<meta property="og:title" content="FastDevKit - Free Developer Tools" />
<meta property="og:description" content="Free online developer tools. Fast, private, no signup required." />
<meta property="og:image" content="https://example.com/og.png" />
<meta property="og:url" content="https://fastdevkit.com" />
<meta property="og:site_name" content="FastDevKit" />
<meta property="og:type" content="website" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="FastDevKit - Free Developer Tools" />
<meta name="twitter:description" content="Free online developer tools. Fast, private, no signup required." />
<meta name="twitter:image" content="https://example.com/og.png" />

如何使用 OG 图片预览

  1. 1.选择手动输入模式，填写 OG 标签字段（标题、描述、图片 URL）。
  2. 2.实时预览页面在 Twitter、Facebook 和 LinkedIn 上的显示效果。
  3. 3.调整数值直到所有平台的预览效果令你满意。
  4. 4.从底部区域复制 meta 标签代码到你的 HTML 中。

常见问题

什么是 Open Graph？

Open Graph 是 Facebook 创建的协议，让你可以控制网页在社交媒体上分享时的显示方式。它使用 HTML <head> 中的 meta 标签来定义标题、描述和图片。

OG 图片推荐尺寸是多少？

为了在各平台获得最佳效果，建议使用 1200x630 像素。Twitter 也支持 1200x600。使用 1.91:1 的宽高比以确保通用兼容性。

为什么图片没有在预览中显示？

图片 URL 必须是公开可访问的（不能是 localhost）。还需检查 CORS 限制。某些 CDN 需要特定的请求头才允许图片嵌入。

og:image 和 twitter:image 有什么区别？

og:image 是 Facebook、LinkedIn 等使用的标准 Open Graph 标签。twitter:image 是 Twitter 专用的。如果未设置 twitter:image，Twitter 会回退到 og:image。