the IT Hustle
工具实战手册关于

OG 图片预览

预览页面在 Google、Twitter、Facebook、LinkedIn 和 Slack 上的显示效果,并生成 Meta 标签。

Google Search
example.com
Page Title
A description of the page content will appear here.
Twitter / X
No image
Page Title
A description of the page content will appear here.
example.com
Facebook / Meta
No image
example.com
Page Title
A description of the page content will appear here.
LinkedIn
No image
Page Title
example.com
Slack
example.com
Page Title
A description of the page content will appear here.
生成的 Meta 标签
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website" />

<!-- Twitter -->
<meta property="twitter:card" content="summary" />

Preview is approximate. Actual rendering may vary by platform and screen size.

如何预览 Open Graph 标签

使用 The IT Hustle 免费 OG 预览工具,在发布前查看页面在社交媒体上的显示效果。

  1. 1
    输入页面信息填写页面的标题、描述、URL 和图片 URL。
  2. 2
    查看各平台预览一次性查看页面在 Google、Twitter/X、Facebook、LinkedIn 和 Slack 上的显示效果。
  3. 3
    检查字符限制标题超过 60 个字符、描述超过 160 个字符时会显示警告标记。
  4. 4
    复制 Meta 标签点击「复制 Meta 标签」,获取可直接粘贴到页面 head 部分的 HTML 标记。

常见问题

Open Graph(OG)标签是控制页面在社交媒体上分享时显示效果的 HTML Meta 标签,定义了平台在预览卡片中展示的标题、描述、图片和 URL。

大多数平台推荐使用 1200x630 像素。Twitter 的大号摘要卡片还支持 1200x675。图片建议保持在 5MB 以内,使用 PNG 或 JPEG 格式。

Twitter 除了 OG 标签外还使用自己的 twitter:card 标签。大多数其他平台(Facebook、LinkedIn、Slack)直接读取 OG 标签。复制功能会同时生成 OG 标签和 Twitter 标签。

相关工具

Meta 标签生成器SEO 检查工具占位图片生成器