Open Graph 与 Twitter

Open Graph 和 Twitter Card 是社交分享时的元数据标准。当用户在微信、微博、Twitter、Facebook 等平台分享你的链接时，这些标签决定了分享卡片的标题、描述和图片。

为什么需要 OG 和 Twitter 标签？

场景	没有标签	有标签
微信分享链接	只显示 URL	显示标题 + 描述 + 封面图
Twitter 分享	只显示链接	显示精美卡片
Facebook 分享	随机截取文字	显示你指定的标题和图片
LinkedIn 分享	丑陋的链接预览	专业的分享卡片

社交平台读取的优先级

首先读取 <meta property="og:*"> 标签
如果没有 OG 标签，会尝试读取 <title> 和 <meta name="description">
Twitter 平台优先读取 twitter:* 标签，没有时降级使用 OG 标签

Open Graph

Open Graph 由 Facebook 创建，被大多数社交平台支持（包括微信、微博、LinkedIn）。

基本标签

useSeoMeta({
  ogTitle: '文章标题',
  ogDescription: '文章描述',
  ogImage: 'https://example.com/og-image.png',
  ogUrl: 'https://example.com/article/1',
  ogType: 'article',
  ogSiteName: '我的网站',
  ogLocale: 'zh_CN',
})

og:type 常用值

类型	说明	适用页面
`website`	网站（默认）	首页、落地页
`article`	文章	博客文章、新闻
`profile`	个人资料	用户主页
`product`	商品	商品详情页
`video.movie`	视频	视频播放页
`music.song`	音乐	音乐播放页
`book`	书籍	书籍详情页

og:image 尺寸推荐

平台	推荐尺寸	最小尺寸	最大文件大小
通用推荐	1200 x 630	600 x 315	5 MB
Twitter 大图	1200 x 600	600 x 335	5 MB
LinkedIn	1200 x 627	200 x 200	5 MB
微信	900 x 500	-	-

OG 图片设计建议

使用 1200 x 630 作为标准尺寸（所有平台兼容）
文字内容放在中间区域（各平台裁剪方式不同）
图片背景使用对比色，确保文字可读
文件大小控制在 1MB 以内（加载更快）
格式推荐 PNG 或 JPG

文章类型额外标签

useHead({
  meta: [
    { property: 'article:published_time', content: '2025-01-01T00:00:00Z' },
    { property: 'article:modified_time', content: '2025-06-01T00:00:00Z' },
    { property: 'article:author', content: '作者名' },
    { property: 'article:section', content: '技术' },
    { property: 'article:tag', content: 'Nuxt' },
    { property: 'article:tag', content: 'Vue' },
  ],
})

文章类型标签的意义

Facebook 和其他平台可以用这些标签在分享卡片中显示文章的发布时间、作者和标签。

Twitter Card

卡片类型

类型	说明	图片布局	适用场景
`summary`	小图摘要	小图在左侧	新闻、博客摘要
`summary_large_image`	大图摘要	大图在上方	推荐，视觉效果最好
`app`	应用下载	应用信息	移动应用推广
`player`	媒体播放	视频/音频播放器	视频、音频内容

基本标签

useSeoMeta({
  twitterCard: 'summary_large_image',
  twitterTitle: '文章标题',
  twitterDescription: '文章描述',
  twitterImage: 'https://example.com/twitter-image.png',
  twitterSite: '@yoursite',      // 网站账号
  twitterCreator: '@author',     // 作者账号
})

Twitter 和 OG 的关系

如果设置了 twitterTitle 但没有 ogTitle，Twitter 会使用 twitterTitle
如果只设置了 ogTitle，Twitter 也会使用它
推荐两者都设置，确保 Twitter 显示最佳效果

twitterSite 和 twitterCreator

不是必须的，但可以让用户点击卡片后关注你的 Twitter 账号。

完整示例——文章页社交分享

vue

<script setup lang="ts">
const route = useRoute()
const config = useRuntimeConfig()
const { data: article } = await useFetch(`/api/articles/${route.params.id}`)

const ogImage = computed(() =>
  article.value?.coverImage ?? `${config.public.siteUrl}/default-og.png`
)

const pageUrl = computed(() =>
  `${config.public.siteUrl}/blog/${route.params.id}`
)

useServerSeoMeta({
  // 基础 SEO
  title: () => `${article.value?.title} - 我的博客`,
  description: () => article.value?.excerpt ?? '',

  // Open Graph（微信、微博、Facebook、LinkedIn）
  ogTitle: () => article.value?.title ?? '',
  ogDescription: () => article.value?.excerpt ?? '',
  ogImage: () => ogImage.value,
  ogUrl: () => pageUrl.value,
  ogType: 'article',
  ogSiteName: '我的博客',
  ogLocale: 'zh_CN',

  // Twitter
  twitterCard: 'summary_large_image',
  twitterTitle: () => article.value?.title ?? '',
  twitterDescription: () => article.value?.excerpt ?? '',
  twitterImage: () => ogImage.value,
  twitterSite: '@myblog',
  twitterCreator: () => article.value?.authorTwitter ?? '',
})

// canonical + 文章额外标签
useHead({
  link: [
    { rel: 'canonical', href: () => pageUrl.value },
  ],
  meta: [
    { property: 'article:published_time', content: () => article.value?.publishedAt ?? '' },
    { property: 'article:author', content: () => article.value?.author ?? '' },
  ],
})
</script>

动态 OG 图片

使用服务端 API 动态生成 OG 图片，每篇文章自动生成专属分享图：

// server/routes/og.png.ts
export default defineEventHandler(async (event) => {
  const title = getQuery(event).title as string

  // 使用 satori 生成图片
  const svg = await generateOgImage({ title })
  const png = await sharp(Buffer.from(svg)).png().toBuffer()

  setResponseHeader(event, 'content-type', 'image/png')
  setResponseHeader(event, 'cache-control', 'public, max-age=3600')
  return png
})

在页面中使用：

useSeoMeta({
  ogImage: computed(() =>
    `${config.public.siteUrl}/og.png?title=${encodeURIComponent(article.value?.title ?? '')}`
  ),
})

动态 OG 图片的优势

每篇文章自动生成专属封面图
标题、作者、日期等信息直接在图片上
不需要设计师手动做图

推荐工具

Satori（Vercel 出品，将 JSX/HTML 转为 SVG）+ Sharp（SVG 转 PNG）。

测试工具

平台	工具	URL
Facebook	Sharing Debugger	https://developers.facebook.com/tools/debug/
Twitter	Card Validator	https://cards-dev.twitter.com/validator
LinkedIn	Post Inspector	https://www.linkedin.com/post-inspector/
通用	Open Graph Checker	https://www.opengraph.xyz/
通用	HeyMeta	https://www.heymeta.com/

调试技巧

部署后用工具测试分享效果
Facebook 缓存可能不更新——点击"Scrape Again"强制刷新
确保图片 URL 可以公开访问（不需要登录）

知识脉络

text

Head 管理 → SEO Meta → 你在这里：Open Graph 与 Twitter
                       │
                       ├─→ 下一步：链接预取
                       │
                       └─→ 相关：服务端开发 → 服务路由（动态 OG 图片）

Open Graph 与 Twitter ​

为什么需要 OG 和 Twitter 标签？ ​

Open Graph ​

基本标签 ​

og:type 常用值 ​

og:image 尺寸推荐 ​

文章类型额外标签 ​

Twitter Card ​

卡片类型 ​

基本标签 ​

完整示例——文章页社交分享 ​

动态 OG 图片 ​

测试工具 ​

知识脉络 ​

Open Graph 与 Twitter

为什么需要 OG 和 Twitter 标签？

Open Graph

基本标签

og:type 常用值

og:image 尺寸推荐

文章类型额外标签

Twitter Card

卡片类型

基本标签

完整示例——文章页社交分享

动态 OG 图片

测试工具

知识脉络