Open Graph & Twitter Card 生成器
开发
生成所有社交平台和聊天应用在用户分享你的 URL 时所查找的标准预览卡元数据块。标题、描述、图片、类型和 Twitter 专用卡片变体都可配置。小预览显示链接在社交订阅中的大致呈现。把结果直接复制到页面的 `<head>`。
—
<meta> 块
<title>Site Title — Page Title</title> <meta name="description" content="A one-sentence summary used by Google, Twitter, Slack, LinkedIn, and other crawlers when they show a preview card." /> <link rel="canonical" href="https://example.com/page" /> <!-- Open Graph --> <meta property="og:title" content="Site Title — Page Title" /> <meta property="og:description" content="A one-sentence summary used by Google, Twitter, Slack, LinkedIn, and other crawlers when they show a preview card." /> <meta property="og:url" content="https://example.com/page" /> <meta property="og:image" content="https://example.com/og-image.png" /> <meta property="og:image:alt" content="Cover image describing the page" /> <meta property="og:site_name" content="Example Site" /> <meta property="og:type" content="website" /> <meta property="og:locale" content="en_US" /> <!-- Twitter Card --> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:title" content="Site Title — Page Title" /> <meta name="twitter:description" content="A one-sentence summary used by Google, Twitter, Slack, LinkedIn, and other crawlers when they show a preview card." /> <meta name="twitter:image" content="https://example.com/og-image.png" /> <meta name="twitter:image:alt" content="Cover image describing the page" /> <meta name="twitter:site" content="@example" /> <meta name="twitter:creator" content="@author" />
预览
Example Site
Site Title — Page Title
A one-sentence summary used by Google, Twitter, Slack, LinkedIn, and other crawlers when they show a preview card.
部署后用 Facebook 的 Sharing Debugger 或 Twitter 的 Card Validator 验证。
使用方法
- 填入标题、描述、规范 URL 和 1200×630 封面图 URL。
- 选择 Open Graph `og:type`（article、website、…）和 Twitter 卡片样式（summary、summary_large_image、…）。
- 把生成的块复制到页面 `<head>` — 在 HTML、Astro、Next.js 等中都能用。
常见问题
- 应该用什么图片尺寸？
- 1200 × 630 像素（1.91:1）是安全默认 — 满足 Facebook、LinkedIn、Slack 和 Twitter 的 `summary_large_image` 卡片。Twitter 纯 `summary` 卡片用 1:1，但大多数网站只用一张图通吃。
- `summary` 和 `summary_large_image` 有何区别？
- `summary` 在标题和描述旁显示小方形缩略图。`summary_large_image` 在标题上方显示整宽横幅图片。内容丰富的帖子用大的；图片只是辅助时用小的。
- 规范链接重要吗？
- 重要。爬虫用它去重 URL 变体（`?utm_source=…`、末尾斜杠等），并把社交互动（点赞、评论）路由到单一规范 URL。