<head> 标签内即可。OG 与 Twitter Card 双协议都已生成；微信/微博无独立协议，会复用 OG/标准 meta。
OG 卡片预览 在浏览器本地实时模拟链接在 Twitter/X、Facebook、微信、微博 四大社交平台分享时的卡片样式，支持手填 5 个核心字段，也支持粘贴整段 <head> 自动抽取 meta，一键生成可粘贴到生产页面的 OG + Twitter Card 双协议代码。
| 字段 | 协议属性 | 作用 |
|---|---|---|
| 标题 | og:title / twitter:title | 卡片大字标题，缺失时回退到 <title> |
| 描述 | og:description / twitter:description | 卡片正文，缺失时回退到 <meta name="description"> |
| 图片 URL | og:image / twitter:image | 卡片缩略图，必须绝对 URL |
| 站点名 | og:site_name | 微信卡片底部小字，Facebook 略显 |
| 页面 URL | og:url / <link rel=canonical> | 卡片左下角显示的域名来源 |
不同平台对图片的处理方式差异很大，1.91:1（1200×630） 适合通用 OG 宽图，但不是所有卡片都用这一张：
summary_large_image：适合宽图，官方文档给的是接近 2:1summary：官方更接近 1:1 方图OG 标签不直接影响 Google/百度排名，影响的是社交平台分享时的点击率——卡片好看、信息充足、图片清晰，点开率会显著高于纯文字链接。这才是它的真正价值。
工具在浏览器内完成所有解析与渲染，不会主动抓取你填写的页面 URL。粘 HTML 后用 DOMParser 在前端抽取 meta；图片预览只会在你填写 og:image 或 twitter:image 时由浏览器去加载对应图片。它是本地预览器，不是平台真实抓取结果的 1:1 模拟。
社交平台分享卡片左下角显示的是 页面所在域名（不含 www.），不是站点名 og:site_name。工具从你填的 og:url 里 new URL().hostname 抽取——填 https://example.com/blog/post，预览处会显示 example.com。Facebook 卡片会自动转为大写。
最稳定的硬限制主要来自 X Cards：官方文档目前写的是 twitter:title 最长 70 字符、twitter:description 最长 200 字符。其他平台更多是“常见显示长度”而不是统一硬上限，所以工具里的颜色提示是经验提醒，不是平台判定结果。
1200×630 适合大多数 Open Graph 分享图，也适合 X 的 summary_large_image 预览。但 X 的 summary 卡片官方更接近 1:1 方图，不是所有场景都该用 1200×630。实操上可以这样记：想做通用宽图，先出 1200×630；明确用 summary 小图卡时，再准备一张方图。
通常会参考 <title>、description、og:image 等字段，但微信、微博、朋友圈、不同端内 WebView 的表现并不完全一致。更稳的说法是：OG 标签是基础配置，不等于所有场景都按 OG 原样渲染；上线前仍要在实际 App 里发一遍链接验证。
og:image 必须用绝对 URL 吗？必须。Facebook、Twitter、LinkedIn 抓取时是无状态的爬虫，看不到你页面的 base URL，相对路径如 /og.png 会被当作空值忽略。一律写完整的 https://yourdomain.com/og.png。本地调试时也别图省事写 http://localhost——平台爬虫访问不到，预览必然失败。
大多数平台都会缓存抓取结果，但缓存时长和刷新入口可能调整。稳妥做法是：先用平台官方调试工具重抓，再准备一个带版本参数的新 URL 兜底。Facebook / LinkedIn 仍有公开调试工具；X 文档仍保留 Card Validator 故障排查说明，但实际刷新体验可能变化；微信通常没有统一公开的强刷入口。