<!-- 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 即可。所有处理均在浏览器本地完成，无需安装任何软件，它适合专注优化社交分享卡片，让链接在微信、Twitter、LinkedIn 等地显示出漂亮的标题、描述与大图。建议同时补上图片尺寸与站点名称，社交平台抓取时会更稳定；改完标签后可用平台自带的调试工具重新抓取一次，让修改尽快生效，分享卡片在群聊与信息流里的呈现也会更统一，避免旧缓存继续显示错图或过期标题。
页面被分享到聊天工具或社交平台时展示的那张卡片，由一组元信息标签决定：标题、描述、缩略图与页面地址。这些标签的完整程度直接决定卡片是「有图有字、值得点开」还是「一行链接、无人理会」，因此在内容运营里属于投入很小、回报直观的一项工作。 标签的取值有几条硬性约束。地址必须是绝对地址，相对地址在多数平台上无法解析；图片必须有可公开访问的绝对地址，并且符合平台对尺寸与格式的要求，否则会被裁剪、拉伸或干脆不展示；标题与描述应控制在平台截断范围之内，过长的描述会被切成语义不完整的半句，反而降低点击意愿。这些约束与页面正文质量无关，属于纯粹的技术要求。 使用要点：为不同语言的页面分别设置标签，不要指望平台自动翻译；同一份内容在多个地址上可用时，务必为每个地址声明自己的规范地址，否则平台可能把它们视为重复内容并合并展示，导致分享出去的卡片指向另一个地址。测试时不要只在编辑器里预览，实际把链接发到目标平台看一眼，因为不同平台对同一组标签的读取优先级并不一致，实际效果只有发出去才知道。 边界与限制：这些标签不参与搜索排名，把它们当作排名手段是误解，它们影响的是分享场景下的点击率。平台也会调整解析策略，某些标签可能被忽略而改用自身算法，因此不要依赖单一标签定位最终效果，标题与图片都应单独成立。此外，标签内容会公开在页面源码中，不要在其中写入内部地址或带鉴权的参数。 数据与隐私：元信息本身是公开内容，但生成时使用的图片地址可能指向未发布的素材仓库，建议先确认素材可公开访问再使用。本工具在浏览器内拼装标签文本，不上传输入，可离线使用。
常见误用是只在编辑器里预览而不实际分享：不同平台读取同一组标签的优先级并不一致，最终效果只有真正发出去才知道。另一类是图片条件不满足——地址不可公开访问、尺寸比例不符或被平台缓存了旧版本，都会导致卡片没有缩略图；改动后需要重新抓取或换链接验证。
实现原理
卡片由头部标签决定，因此三处硬性约束决定成败：地址必须绝对可访问，图片必须公开可抓取且符合尺寸比例，标题与描述须落在平台截断范围之内。此外平台会缓存抓取结果，改动后需要重新抓取或换链接验证，否则看到的仍是旧卡片。
同一套标签用在多个页面平台以地址判断唯一性，可能视为重复并合并展示 → 出现「分享 A 页却显示 B 页标题」使用方法
- 打开「Open Graph Meta 生成器」
- 输入或粘贴待处理的内容
- 根据需要调整输出选项
- 点击「运行」按钮，结果实时显示
- 复制或导出结果
使用场景
- 分享卡片 — 为文章或落地页生成 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 被当成不同页面，影响分享统计聚合。
微信里分享的卡片和 Twitter 上显示的不一样，需要分别设置吗？
需要。不同平台读取的标签集合并不完全一致，有的优先读一套社交标签，有的另一套，微信等还会结合自身规则做二次处理。稳妥做法是把两类标签都写全且内容保持一致，再分别在目标平台实测一次；只配置一套而在所有平台都期望同样效果，通常会在某一平台上落空。
标题太长或太短会怎样？
过长会被平台截断，且截断点由平台决定，可能正好切在关键词中间，反而降低点击意愿；过短则信息量不足，用户无法判断是否值得点开。建议按目标平台的显示宽度控制长度，并把最关键的信息放在前几个字，因为截断总是从尾部发生。描述同理，前置要点比堆砌修饰更有效。
加了 OG 标签但分享出去还是没有图片？
常见原因按顺序排查：图片 URL 必须是公网可访问的绝对地址（相对路径无效）；图片尺寸有最小要求（微信 300×300 起，Facebook 建议 1200×630）；平台有缓存，改完要等缓存过期或主动触发重新抓取。