Open Graph 预览器

📖 Open Graph 标签使用指南

什么是 Open Graph 标签？

Open Graph（开放图谱）协议由 Facebook 于 2010 年推出，是一组 meta 标签，用于控制网页在社交媒体平台上被分享时的展示方式。当用户在微信、Facebook、Twitter、LinkedIn 等平台分享链接时，平台会抓取页面的 OG 标签来生成包含标题、描述和图片的预览卡片。没有 OG 标签的页面，分享时可能只显示 URL 链接，或者随机抓取页面内容，影响点击率和品牌形象。

核心 OG 标签说明

• og:title：分享卡片的标题，建议 60 个字符以内，超过会被截断
• og:description：页面描述摘要，建议 200 个字符以内
• og:image：分享卡片的缩略图 URL，必须为绝对路径，推荐 1200x630 像素
• og:url：页面的规范 URL，用于确定分享卡片的链接目标
• og:site_name：网站名称，显示在卡片底部
• og:type：内容类型，如 website、article、product 等

各平台图片尺寸要求

不同社交平台对 og:image 的尺寸要求有所不同，建议使用通用安全尺寸 1200x630 像素（1.91:1），这样可以同时满足大部分平台的需求。微信推荐图片不小于 200x200 像素，宽高比接近 1.91:1；Facebook 推荐 1200x630 像素，最小 200x200 像素；Twitter 大图卡片推荐 1200x675 像素；LinkedIn 推荐 1200x627 像素。图片文件大小建议控制在 8MB 以内，格式支持 JPG、PNG、GIF。

OG 标签与 Twitter Card 的区别

Open Graph 是通用的社交分享协议，被 Facebook、LinkedIn、微信等平台广泛支持。Twitter Card 是 Twitter 自己的标签体系，使用 twitter:card、twitter:title、twitter:desc 等标签。不过，Twitter 也会读取 OG 标签作为后备方案。最佳实践是同时配置 OG 标签和 Twitter Card 标签，确保所有平台都能正确展示。

使用方法

在左侧表单中填写 OG 标签的各项信息。右上方的预览区域会实时展示各平台的分享卡片效果，可通过 Tab 切换查看不同平台的样式。确认预览效果满意后，复制底部生成的 meta 标签代码，粘贴到网页的 head 标签内即可。部署后可使用 Facebook Sharing Debugger 或 Twitter Card Validator 验证标签是否正确。

图片不显示的排查方法

• 确认图片 URL 为绝对路径（以 https:// 开头），不能用相对路径
• 确认图片可被公网直接访问，无防盗链、无登录限制
• 检查图片格式是否为 JPG/PNG/GIF，确保服务器返回正确的 Content-Type
• 图片尺寸不小于 200x200 像素，否则部分平台会忽略
• 部署后使用平台的调试工具强制重新抓取缓存