<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 尺寸：
OG 标签不直接影响 Google/百度排名，影响的是社交平台分享时的点击率——卡片好看、信息充足、图片清晰，点开率会显著高于纯文字链接。这才是它的真正价值。
工具在浏览器内完成所有解析与渲染，不会向你填的 URL 发起任何请求——粘 HTML 后用 DOMParser 在前端抽取 meta，图片预览用浏览器自带的 <img> 加载（仅当你填了 og:image 才会向该图床发请求）。无服务端、无上传、无埋点。
社交平台分享卡片左下角显示的是 页面所在域名（不含 www.），不是站点名 og:site_name。工具从你填的 og:url 里 new URL().hostname 抽取——填 https://example.com/blog/post，预览处会显示 example.com。Facebook 卡片会自动转为大写。
标题：Twitter ≤70 字符可全显，Facebook ≤60，微信会话卡片只显两行约 ≤30 中文字符。描述：Facebook/Twitter ≤160 全显，微信只显约 80 中文字符。工具计数器>软限变橙、>硬限变红，但都是建议——超长不会报错，只是平台会自动 … 截断。
1200×630（1.91:1） 是 Facebook/Twitter Summary Large Image 官方推荐，也是 LinkedIn、Slack、Discord 等的通用尺寸。最小 600×315；小于此值大平台会降级为小卡片或不显示。微信缩略图会从原图自动裁剪正方形，建议主体居中。文件控制在 <5MB（微信 <300KB 更稳）。
部分能。微信公众号/小程序内置浏览器分享时会读 <title>、<meta name="description">、og:image，但朋友圈/会话默认抓页面前几张图，不一定用 og:image，需要在 JS-SDK 主动 wx.updateAppMessageShareData 设置才稳。微博分享有自己的 <meta name="weibo:webpage:*"> 私有协议，但缺失时也会回退读 og:* 和 description。
og:image 必须用绝对 URL 吗？必须。Facebook、Twitter、LinkedIn 抓取时是无状态的爬虫，看不到你页面的 base URL，相对路径如 /og.png 会被当作空值忽略。一律写完整的 https://yourdomain.com/og.png。本地调试时也别图省事写 http://localhost——平台爬虫访问不到，预览必然失败。
平台都会缓存抓取结果（Facebook 默认 30 天，Twitter 7 天）。修改后用各平台官方调试工具强制刷新：Facebook 用 Sharing Debugger 点 "Scrape Again"，Twitter 用 Card Validator，LinkedIn 用 Post Inspector。微信清缓存只能更换 URL（加 query string ?v=2）。