open-graph

SEO 页面内优化：Open Graph

负责社交预览的 Open Graph 编写和实施规则。page-metadata 负责完整的页面生命周期和发布验证。

调用时：首次使用时，如果有帮助，可先用 1–2 句话说明此技能涵盖的内容及其重要性，然后提供主要输出。后续使用时，或用户要求跳过时，直接提供主要输出。

范围（社交分享）

• Open Graph：源自 Facebook 的协议；控制链接在社交平台上分享时显示的预览卡片

4 个必备标签

每个可分享页面都必须包含以下最低限度的标签：

<meta property="og:title" content="Your Page Title">
<meta property="og:description" content="Your description">
<meta property="og:image" content="https://yourdomain.com/image.png">
<meta property="og:url" content="https://yourdomain.com/page">

标签	指引
og:title	简洁实用，适合分享场景；与 SEO 标题指向同一页面，但文本不一定完全相同
og:description	准确的社交摘要；可以不同于 meta description，但不能改变承诺
og:image	绝对 HTTPS URL；应能代表页面；已知时注明尺寸
og:url	稳定的公开页面标识；通常与声明的规范 URL 相同

建议添加的标签

标签	用途
og:type	内容类型：website、article、video、product
og:site_name	网站名称；与标题分开展示
og:image:width / og:image:height	图片尺寸（1200×630px）
og:image:alt	无障碍替代文本
og:locale	语言/地区（例如 en_US）；适用于多语言网站

图片最佳实践

项目	指引
尺寸	使用高分辨率图片，并核实目标平台的当前要求；1200×630 是适用于多个平台的常见起始尺寸
格式	使用平台支持的 Web 图片格式，并核实部署后的响应
URL	使用 https:// 开头的绝对 URL；不要使用相对路径
唯一性	尽可能为每个页面使用一张独特的图片

常见错误

• 使用相对图片 URL，而不是绝对 https:// URL
• 图片尺寸过小或宽高比错误
• 值为空或为占位内容
• 缺少 og:url（规范 URL）
• 有能代表页面的图片时，却重复使用通用徽标或无关图片
• 机械地复制 SEO 标题/描述，而未考虑分享场景是否需要不同措辞

实施

Next.js（App Router）

export const metadata = {
  openGraph: {
    title: '...',
    description: '...',
    url: 'https://example.com/page',
    siteName: 'Example',
    images: [{ url: 'https://example.com/og.jpg', width: 1200, height: 630, alt: '...' }],
    locale: 'en_US',
    type: 'website',
  },
};

HTML（通用）

<meta property="og:title" content="Your Title">
<meta property="og:description" content="Your description">
<meta property="og:image" content="https://example.com/og.jpg">
<meta property="og:url" content="https://example.com/page">
<meta property="og:type" content="website">
<meta property="og:site_name" content="Your Site">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Alt text">

测试

• Facebook：分享调试工具
• LinkedIn：帖子检查器

预览服务会缓存元数据。请测试已部署的绝对 URL，并在服务支持时刷新缓存。同时检查原始初始 HTML；并非每个爬虫都能获取仅由客户端插入的标签。

一致性边界

由于搜索和社交信息流属于不同场景，Open Graph 和 SEO 元数据可以采用不同文案。但它们仍必须指向同一页面、描述同一产品或内容，并避免无依据的声明。不要要求字符串完全相同。

相关技能

• social-share-generator：用户分享时，分享按钮会使用 OG 标签生成丰富预览；必须设置 OG，分享按钮才能显示正确的卡片
• article-page-generator：文章或帖子页面使用 og:type article；添加文章专属标签（published_time、author）
• page-metadata：涵盖完整生命周期、事实来源实现方式和生产环境验证
• title-tag、meta-description：搜索文案；在保持页面身份一致的前提下可以有所不同
• twitter-cards：Twitter 会将 OG 用作备用内容；添加 Twitter 专属标签以获得最佳效果
• canonical-tag：og:url 应与规范 URL 一致
• og-image-generator：以编程方式生成 OG 图片——6 种视觉风格（终端/CLI、杂志编辑风、瑞士极简、像素复古、粗野主义、报纸风格）、Satori+resvg、Puppeteer、AI 图片生成工具，以及 Agent 原生的内容感知工作流。本技能介绍如何设置图片标签；og-image-generator 介绍如何创建图片。