使用方法
- 输入页面上正在使用或计划使用的 og:title 和 og:description。
- 粘贴 og:image 的完整 URL。工具会加载图片并报告其实际像素尺寸。
- 添加页面 URL 或域名，然后对比大卡片和小卡片预览，并处理所有警告。
工作原理
有人分享链接时，大多数社交网络和聊天应用都会抓取页面并读取其 Open Graph 标签：og:title、og:description、og:image 和 og:url，然后生成卡片。宽高比约为 1.91:1 的宽幅图片通常会生成图片位于顶部的大卡片；较小或正方形图片通常会生成图片缩略图位于文字旁边的小卡片。
此工具会展示两种通用卡片样式，帮助你判断文字长度和图片裁切效果。浏览器加载图片后，工具会检查图片的实际尺寸：小于 200 × 200 px 时，许多应用不会显示图片；小于 600 × 315 px 时，通常会使用小卡片布局；宽高比与 1.91:1 相差较大时，图片会被裁切。广泛推荐使用 1200 × 630 px，因为这种尺寸在高像素密度屏幕上仍能保持清晰。
此预览无法准确展示特定应用的实际效果。各应用显示标题和描述的行数不同，有些会忽略描述，而且大多数应用在首次分享后会缓存预览一段时间，因此标签更改可能不会立即生效。许多平台都提供自己的调试工具来刷新缓存。
示例
将截图用作 og:image
一张 1440 × 900 的截图，宽高比为 1.6:1。工具会针对宽高比发出警告：在大卡片中，图片顶部和底部会被裁切。导出 1200 × 630 版本可避免意外裁切。
仅使用 logo 作为图片
180 × 180 的 logo 小于 200 × 200 px，因此许多应用不会显示图片。建议改用包含 logo 的更大幅横幅图片。
检查标题长度
90 个字符的 og:title 在大卡片预览中会换成三行。将其缩短至约 60 个字符，可让卡片在大多数应用中显示得更整洁。
常见问题
为什么我的链接在 Facebook、LinkedIn 和 X 上显示效果不同？
各平台的卡片布局、裁切方式和文字长度限制各不相同，有些会显示描述，有些则不会。此预览只是通用效果示意，并非任何平台的实际设计。
我更改了 og:image，但仍显示旧图片。为什么？
各平台会缓存链接预览。你可以使用平台自己的分享调试工具重新抓取页面，或等待缓存过期。更改图片文件名也有帮助。
可以使用 SVG 或 WebP 图片吗？
大多数平台不支持 SVG。许多应用支持 WebP，但并非全部支持；JPG 或 PNG 是最稳妥的选择。
为什么工具无法加载我的图片？
该 URL 可能需要登录、指向 HTML 页面而非图片，或者服务器可能会阻止来自其他网站的请求。如果浏览器无法在此处加载图片，社交平台的爬虫也可能无法加载。
隐私
你输入的文字会保留在浏览器中。检查图片时，浏览器会直接向你输入的 URL 发起请求（不发送 referrer），因此该服务器会收到常规的图片请求。不会向 TIG Tools 发送任何内容。