OpenGraph 生成器 — 生成 OG + Twitter Card meta 标签
根据 URL 生成 Open Graph 和 Twitter Card meta 标签，预览链接在社交平台上的展示效果。在浏览器中完成，无需上传。
OpenGraph Generator
Generate Open Graph and Twitter Card meta tags. Enter title, description, URL, and image on separate lines. Works entirely in your browser.
Open Graph 协议是一种「隐形脚手架」：当有人把链接粘贴到信息流、即时通讯应用或 Slack 频道时，它把一个 URL 变成一张内容丰富的预览卡。没有 OG 标签，分享出去的链接只剩光秃秃的 URL —— 没有标题、没有图片、没有描述。配上 OG 标签之后，同一个 URL 会展开成一张包含主图、格式化标题和一句话摘要的卡片，让人有点击的欲望。带 OG 标签的链接和没带的链接，点击率上的差距是几倍的关系，而不是几个百分点。生成器从六个输入字段组装出完整的标签集合，并展示其在每个主流平台上的渲染效果。
大多数手动实现 OG 的项目栽在了一个不显然的细节上：Twitter Card 的双标签要求。Twitter 优先读取 twitter:card、twitter:title、twitter:description 和 twitter:image，只在缺失时才会回退到 og:title、og:description、og:image。这种回退行为在不同 Twitter 客户端上并不一致：web 客户端能优雅地回退，iOS 应用有时会忽略 OG 图片的尺寸信息，TweetDeck 偶尔甚至只用 OG 回退、干脆不显示图片。生成器会输出两套值完全相同的标签，让每个端上的渲染都可预期。
图片尺寸要求是另一个容易踩坑的地方。Facebook 推荐 1200×630 像素，但也接受小到 200×200、大到 8 MB 的图片。Twitter 的大图卡片最小 300×157，最大 4096×4096。LinkedIn 要求 1200×627。Discord 会裁剪到 1.91:1 宽高比。生成器的预览面板模拟了这六个平台的裁剪方式，让你在页面正式上线、链接被首次分享之前就能发现尺寸不匹配的问题。
使用方法
填写页面信息
填写标题、描述、图片 URL、canonical URL、站点名称和语言区域。生成器会组装出完整的 OG 与 Twitter Card 标签集合，并实时刷新预览。
预览社交卡片
预览面板模拟链接在 Facebook、Twitter、LinkedIn、Discord、Slack 和 iMessage 上的展示效果。各平台对图片的裁剪方式略有不同 —— 预览会同时呈现这六种结果。
复制 meta 标签
复制完整的 `<meta>` 标签块到剪贴板，然后粘贴到 HTML 的 `<head>` 中。这些标签遵循 Open Graph 协议规范，并附带 Twitter Card 的回退标签。
常见问题
需要同时包含 OG 和 Twitter Card 两套标签吗？
如果没有 Twitter Card 标签，Twitter 会回退使用 OG 标签，但回退行为会因 Twitter 客户端版本不同而存在差异。为了在所有 Twitter 表面（web、iOS、Android、TweetDeck）都获得稳定的渲染效果，最好两套都写。生成器会输出完整的双套标签，确保不会漏掉任何平台。
应该使用多大的图片尺寸？
推荐使用 1200×630 像素、宽高比 1.91:1 的 OG 图片。Facebook 在某些场景下会把它裁成正方形，在其他场景下裁成长方形。本工具的预览面板会模拟每个平台的裁剪效果，你可以在发布前先测试图片是否合适。
locale 标签如何影响渲染？
og:locale 标签告诉 Facebook 页面所用的语言。它影响哪些用户的信息流会展示这条链接（Facebook 算法会优先推送语言匹配的内容），以及 Facebook 拉取哪种语言的元数据。默认值为 en_US；如果页面面向其他语言，请相应修改。
能为还没上线的页面生成标签吗？
可以。生成器是离线的标签构建工具 —— 它不会去抓取你输入的 URL。手动填写字段后，标签会根据你的输入直接组装。这就是页面正式上线前预先生成标签的标准工作流。
如果省略 Twitter Card 标签会怎样？
Twitter 会回退到 OG 标签，渲染出一张摘要卡（小图、标题、描述）。如果不显式把 twitter:card 设为 summary_large_image，图片就会以小缩略图的形式呈现。同时显式设置两套标签，能保证在每个平台都展示大图卡片。
限制说明
- 不抓取真实 URL生成器根据你的输入构建标签，而不是从已有页面抓取。若要提取已发布页面上的 OG 标签，请改用 URL Parser 工具。
- 不提供图片托管og:image 标签需要一个公开可访问的 HTTPS URL。生成器不托管图片。请先把 OG 图片上传到你自己的 CDN 或托管服务，再在标签中引用。
- 仅支持标准 OG 属性生成器覆盖了标准 OG 属性和 Twitter Card 类型。平台专属扩展（og:video、og:audio、og:product、og:profile）不在默认输出中。视频页或产品页需要手动补上这些标签。
平台说明
- macOS
- Safari 的分享预览依赖 OG 标签。在页面正式上线前，用本浏览器工具测试链接在 iMessage 中的展示效果是合适的做法。
- Web
- 完全在客户端运行。预览面板会模拟六大主流社交平台的展示效果。