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
什么是 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 上的显示效果。
常见使用场景
- 发布前内容审查 — 在发布前预览博客文章、着陆页和产品页面在社交分享中的外观,及时发现标题被截断或图片缺失等问题。
- SEO 优化 — 通过预览 Google 搜索展示效果来优化页面标题和描述,确保关键信息可见。
- 社交媒体营销 — 精心制作分享预览,在内容分享到 Facebook、Twitter 和 LinkedIn 时最大化互动率和点击率。
- 客户演示 — 在设计评审中向客户展示页面在不同平台上的显示效果,无需部署到线上环境。
FAQ
OG 元标签推荐的图片尺寸是多少?
推荐的 OG 图片尺寸为 1200×630 像素,宽高比 1.91:1。此尺寸适用于 Facebook、Twitter、LinkedIn 和大多数其他平台。请使用高质量图片,并将重要内容居中放置,因为某些平台可能会裁剪边缘。
OG 标签和 Twitter 卡片有什么区别?
Open Graph 标签(og:title、og:description、og:image)被 Facebook、LinkedIn 和许多其他平台使用。Twitter 有自己的 meta 标签(twitter:card、twitter:title、twitter:description、twitter:image),但如果没有 Twitter 专用标签,Twitter 会回退使用 OG 标签。
为什么分享的链接显示的图片或标题不正确?
社交平台会缓存链接预览。更新 OG 标签后,您需要使用各平台的专用工具清除缓存:Facebook 的分享调试器、Twitter 的卡片验证器或 LinkedIn 的帖子检查器。更改可能需要几分钟才能生效。