社交分享图（Open Graph 图片）生成器
在渐变背景上用标题、描述和网站名称设计 1200×630 的 Open Graph 图片，下载 PNG，并复制对应的 og: 和 Twitter meta 标签。
社交网络要求使用以 https:// 开头的绝对地址。
什么是 社交分享图生成器？
当链接在 Facebook、LinkedIn、X/Twitter、Slack 或 Discord 上分享时，平台会显示该页面的 Open Graph 图片。这个工具会根据你的 标题、描述 和 网站名称或域名，在彩色渐变背景上创建推荐尺寸 1200 × 630 px 的图片，并写出对应的 og: 和 twitter: meta 标签。
如何使用 社交分享图生成器
- 输入 标题、描述 和 网站名称或域名。
- 选择一个 主题，或自行设置渐变色和文字颜色。
- 点击 下载 PNG，并把图片上传到你的网站。
- 输入 页面 URL 和 图片 URL，然后把 Open Graph 和 Twitter meta 标签 复制到页面的
<head>中。
示例
Title: Hello OG
<meta property="og:title" content="Hello OG"> … <meta name="twitter:card" content="summary_large_image">
另外还有一张 1200 × 630 的 PNG 图片。
何时使用 社交分享图生成器
适合博客文章、产品发布、文档页面以及任何预计会被分享的页面。对于成千上万个页面，请改为在构建时自动生成图片。社交平台会缓存预览，所以更换图片后，请使用它们的调试工具（Facebook Sharing Debugger、LinkedIn Post Inspector）来刷新。
社交分享图生成器 的工作原理
卡片绘制在 1200×630 的 canvas 上：斜向线性渐变背景，顶部是网站名称，标题为粗体（字号从 72 px 逐步缩小到 40 px，直到能放进三行，使用贪心换行，并对没有空格的文字按字符断行），以及最多两行描述。阿拉伯语等从右到左的文字会自动右对齐。meta 标签包含 og:title、og:description、og:url、带宽高的 og:image，以及设为 summary_large_image 的 twitter:card，所有值都经过 HTML 转义。
常见用例
- 为新的博客文章创建分享图
- 为文档页面制作风格一致的预览卡片
- 在 LinkedIn 和 X 上宣布产品发布
- 为落地页生成 og:image 的 meta 标签
常见问题
Open Graph 图片应该多大？
1200 × 630 像素（约 1.91:1）是 Facebook、LinkedIn 和 X 大卡片的推荐尺寸。
为什么图片 URL 必须是绝对地址？
社交平台会从自己的服务器获取图片，所以 og:image 必须是完整的 https:// 地址，而不是相对路径。
分享链接时我的新图片没有出现
平台会缓存预览。请用平台的调试工具重新抓取该 URL，或等待缓存过期。