OG 分享卡片生成

📖 工具介绍

网页被分享到微信、微博、Facebook、Twitter 等平台时，展示的标题、描述与缩略图由 head 中的 Open Graph 与 Twitter Card 标签决定。本工具把这两套标签集中到一个表单：填写分享标题、描述、页面地址与图片地址，选择内容类型、站点名称与地区语言，即可生成完整代码。右侧会按填入的信息实时模拟卡片展示效果，包括图片区域、域名、标题与描述，方便在发布前确认有没有截断或留白。图片宽高建议填 1200×630，这是多数平台推荐的分享图比例。Twitter 标签可复用 Open Graph 的文案，不必重复填写。全部处理在本地完成。常见使用场景包括：文章发布前配置分享卡片、活动页统一分享文案、检查旧页面的 og:image 是否缺失、以及为多个页面批量准备分享标签模板。分享图片的加载失败是最常见的分享事故，多数平台要求图片为公开可访问地址且走 HTTPS，防盗链与登录鉴权都会导致抓取失败，因此建议把分享图放在不带鉴权的静态路径上。og:type 需要与页面内容匹配，文章页误用 website 会让部分平台无法解析发布时间与作者。Twitter Card 的 summary_large_image 适合带大图的页面，纯文字公告用 summary 更协调。需要注意 og:image 的地址必须是绝对路径，相对路径在多数平台上无法抓取。若站点启用了内容分发网络，请确保图片地址可被外部访问且返回正确的图片类型。修改分享标签后，各平台通常有缓存，可通过平台提供的调试工具主动刷新。

✨ 功能特点

• 兩套標籤一次生成：同時輸出 Open Graph 與 Twitter Card，自動區分 property 與 name 屬性
• 實時卡片預覽：右側模擬圖片、域名、標題與描述的分享效果，釋出前即可確認
• 圖片引數完整：支援 og:image 寬高與 alt，符合平臺推薦尺寸校驗
• 文案可複用：Twitter 標籤可一鍵複用 Open Graph 標題描述，省去重複填寫
• 域名自動提取：預覽卡片的域名行由填寫的頁面地址自動解析

🚀 使用方法

1. 填写分享标题与描述；
2. 填入页面地址与图片地址；
3. 点击「生成标签」；
4. 确认预览效果后复制代码。