预览网站在 Twitter、Facebook、LinkedIn 等社交媒体平台分享时的显示效果
开发者工具
关于此工具
预览网站在 Twitter、Facebook、LinkedIn 等社交媒体平台分享时的显示效果。输入页面标题、描述、URL 和图片,即可实时查看卡片预览并生成 Open Graph 元标签,所有处理均在浏览器本地完成。
主要功能
- 实时预览 Twitter、Facebook 和 LinkedIn 卡片
- 各平台字符数限制警告
- 图片预览及宽高比推荐
- 自动生成 Open Graph 和 Twitter Card 元标签
- 一键复制生成的元标签
- 多平台并排对比预览
使用场景
- 优化博客文章和资讯的社交媒体分享效果
- 在网站部署前验证 Open Graph 元标签
- 对比页面在不同社交平台的显示效果
- 调试缺失或错误的社交分享预览
- 为营销活动设计和测试社交卡片图片
social
常见问题
支持预览哪些社交媒体平台?
工具预览你的页面在 Twitter(X)、Facebook、LinkedIn 等支持 Open Graph 和 Twitter Card 元标签的平台上的分享外观。每个平台的卡片布局略有不同。
什么是 Open Graph 元标签?
Open Graph 元标签(og:title、og:description、og:image、og:url)是控制内容在社交媒体上分享时外观的 HTML 元元素。它们定义社交平台在链接预览中显示的标题、描述、图片和 URL。
Twitter Card 与 Open Graph 有什么不同?
Twitter 使用自己的元标签(twitter:card、twitter:title 等),但如果缺少 Twitter 标签会回退到 Open Graph 标签。工具允许你在 Twitter 和 Open Graph 预览之间切换,确保两者都正确渲染。
社交预览的最佳图片尺寸是多少?
Facebook 和 LinkedIn 的图片至少需要 1200x630 像素。Twitter 的 Summary Card with Large Image 推荐 2:1 宽高比,如 1200x600 或 800x400。预览帮助你查看图片是否正确显示。
为什么我的图片在预览中不显示?
常见原因包括缺少或错误的 og:image URL、图片文件小于 200x200 像素、不支持的图片格式或社交平台的缓存。使用绝对 URL 并确保图片满足最低尺寸要求。