OG 元标签预览
免费在线 Open Graph 元标签预览工具。发布前预览您的页面在 Google、Facebook、Twitter 和 LinkedIn 上的显示效果。
Google Search Preview
example.com/my-page
My Awesome Page
This is a great description of the page that will appear in search results and social media previews.
Facebook / LinkedIn Preview
example.com/my-page
My Awesome Page
This is a great description of the page that will appear in search results and social media previews.
Twitter Card Preview
My Awesome Page
This is a great description of the page that will appear in search results and social media previews.
example.com/my-page
AI developer workflow fit
Use OG 元标签预览 while building with AI coding assistants, agents, and LLM workflows: validate generated output, transform payloads, debug integrations, and prepare reliable inputs without leaving your browser.
什么是 OG 元标签预览工具？
Open Graph（OG）元标签是 HTML 中的 meta 元素，用于控制网页在 Facebook、Twitter、LinkedIn 和各种即时通讯应用等社交媒体平台上分享时的展示方式。它们定义了链接预览中显示的标题、描述、图片和网址。本工具允许您输入 OG 元标签的值，即时预览页面在 Google 搜索结果、Facebook/LinkedIn 分享卡片和 Twitter 卡片中的显示效果——无需发布或部署页面。正确设置这些预览对于最大化点击率以及确保内容在分享时呈现专业外观至关重要。
如何使用 OG 元标签预览工具
- 在 'og:title' 字段中输入页面标题。建议不超过 60 个字符，以确保在所有平台上完整显示。
- 在 'og:url' 字段中添加页面网址。这是将在预览中显示的规范网址。
- 在 'og:description' 字段中编写吸引人的描述。建议不超过 155 个字符以获得最佳显示效果。
- 在 'og:image' 字段中粘贴 OG 图片网址。推荐尺寸为 1200×630 像素，在各平台上效果最佳。
- 查看下方的实时预览，了解您的页面在 Google、Facebook/LinkedIn 和 Twitter 上的显示效果。
Common OG 元标签预览 use cases
- Developer debugging — Use OG 元标签预览 to quickly inspect generated output, API payloads, configuration values, or encoded data while building and debugging software.
- AI-assisted coding workflows — Validate or transform examples produced by AI coding assistants before pasting them into source code, tests, documentation, or issue comments.
- Privacy-first browser processing — Run common open graph, og, meta tag, preview, social, share tasks locally in the browser without sending sensitive development data to a backend service.