the IT Hustle
工具实战手册关于

公司

  • 关于
  • 实战手册
  • AI 术语表
  • 关于作者
  • 联系我们

产品

  • 工具
  • 价格观察
  • 智能体运维
  • 编程
  • 设计
  • 运维
  • 效率
  • 营销
  • 商务

法律信息

  • 隐私政策
  • 服务条款
  • 免责声明
  • 编辑准则
  • 更正说明

© 2026 Salty Rantz LLC. 版权所有。

为在技术变革中前行的职场人打造。

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 检查工具占位图片生成器