<!-- Open Graph --> <meta property="og:title" content="My Amazing Article" /> <meta property="og:description" content="A short, compelling description shown when this page is shared on social media platforms." /> <meta property="og:url" content="https://example.com/articles/my-article" /> <meta property="og:image" content="https://images.unsplash.com/photo-1517694712202-14dd9538aa97?w=1200&h=630&fit=crop" /> <meta property="og:site_name" content="Example Site" /> <meta property="og:type" content="article" /> <meta property="og:locale" content="en_US" /> <!-- Twitter Card --> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:site" content="@example" /> <meta name="twitter:title" content="My Amazing Article" /> <meta name="twitter:description" content="A short, compelling description shown when this page is shared on social media platforms." /> <meta name="twitter:image" content="https://images.unsplash.com/photo-1517694712202-14dd9538aa97?w=1200&h=630&fit=crop" />
关于 Open Graph Meta 生成器
当链接被分享到微信、Twitter、LinkedIn 或 Slack 时，能否显示出标题、描述和大图，取决于页面头部的 Open Graph 标签。本工具在浏览器本地根据你填的标题、描述、图片、URL、类型等字段，生成成套的 og: 与 twitter: meta 标签代码，直接贴进 head 即可。它专注 Open Graph 协议（区别于通用的 Meta 标签生成），帮你做出漂亮的社交分享卡片，所有内容仅在本机拼装，不上传。 建议在日常开发中收藏本工具，遇到相关 Web 开发需求时即可快速打开使用。所有处理均在浏览器本地完成，无需安装任何软件。
使用场景
- 分享卡片 — 为文章或落地页生成 og 标签，让链接在社交平台展示大图标题预览。
- Twitter 大图 — 配好 twitter:card 为 summary_large_image，让推文展示醒目横幅卡片。
- 多语言站 — 为不同语言页面分别生成带 og:locale 的标签，提升海外分享效果。
- 电商商品 — 用 og:type 为 product 的标签，让商品链接分享时带上图片和标题。
- 批量套用 — 先生成一份标准模板，再为站内各页替换标题图片字段快速套用。
常见问题
Open Graph 标签和普通 meta 标签有何不同？
Open Graph 是 Facebook 提出、被各社交平台广泛采用的协议，用 property="og:*" 控制分享预览；而本站的 Meta 标签生成更偏向 SEO 的 description、keywords、viewport 等通用标签，两者用途不同。
og:image 有什么尺寸要求？
推荐使用 1200x630（约 1.91:1）的图，多数平台据此裁切；图过小会被忽略或显示为小图。最好用绝对 URL 并确保图片可被抓取器公开访问。
为什么改了标签分享还显示旧内容？
社交平台会缓存抓取结果，需要用对应的调试器（如 Facebook 分享调试工具、Twitter Card Validator）重新抓取刷新缓存，才会显示新内容。
twitter: 标签是必须的吗？
不是必须，但加上能让 X/Twitter 显示更理想的卡片样式。Twitter 在缺少 twitter: 标签时会回退读取 og: 标签，两者同时提供最稳妥。
og:url 应该填什么？
应填该页面的规范绝对地址（含 https），作为内容的唯一标识，避免带跟踪参数的多个 URL 被当成不同页面，影响分享统计聚合。
有浏览器兼容性要求吗？
本工具兼容所有现代浏览器（Chrome、Firefox、Edge、Safari），无需安装任何插件或扩展。
可以离线使用吗？
首次加载后，部分功能在离线状态下仍可使用。页面资源加载后，核心逻辑完全在浏览器本地运行，不依赖网络。