Open Graph

2026年9月6日

Open Graph 是 Meta 提出的一套 og:* 元数据。微信、Slack、Discord、LinkedIn 抓链接时靠它拼卡片：图、标题、摘要。和 SEO 点击率、传播体验都有关。协议原文：ogp.me。

App Router 写 metadata.openGraph 即可，不必手写一排 <meta property>。

字段对照

苹果官网首页一类站点会输出 og:title、og:description、og:image、og:url、og:locale、og:site_name、og:type。微信里左侧图、右侧标题+摘要，就是这些。

import type { Metadata } from "next";

export const metadata: Metadata = {
  openGraph: {
    title: "技术博客",
    description: "按主题查阅学习笔记。",
    url: "https://example.com",
    siteName: "技术博客",
    locale: "zh_CN",
    type: "website",
    images: [
      {
        url: "https://example.com/og.png",
        width: 1200,
        height: 630,
        alt: "封面",
      },
    ],
  },
};
ts

文章页常用 type: "article"，再补 publishedTime、authors。type 完整列表见 ogp.me/#types，Next 的 TS 联合类型以你安装的版本为准。

metadataBase

相对路径的图要有站点根 URL：

export const metadata: Metadata = {
  metadataBase: new URL("https://example.com"),
  openGraph: { images: "/og.png" },
};
ts

已经是 https://... 的不再拼接。没配 metadataBase 又写相对路径，构建可能直接报错。

动态页继承父级图

export async function generateMetadata(
  { params }: { params: Promise<{ id: string }> },
  parent: ResolvingMetadata
): Promise<Metadata> {
  const { id } = await params;
  const product = await getProduct(id);
  const previous = (await parent).openGraph?.images ?? [];

  return {
    title: product.title,
    openGraph: {
      images: ["/product-og.jpg", ...previous],
    },
  };
}
ts

子段完全不写 openGraph 就沿用祖先；写了对象则按官方规则合并或覆盖。

文件约定

路由段里放 opengraph-image.png 或 opengraph-image.tsx（用 ImageResponse 动态画），框架自动出正确 meta，少维护「仓库里一张图、配置里一个 URL」两套。见 opengraph-image。

实践

  • 常见分享图 1200×630，主体放安全区
  • og:title 可以和页面 title 不同，分享文案可以更短
  • 改完用各平台调试器拉一次，很多平台会缓存旧卡片

下一篇：Web Vitals，体验也算排名信号。

参考文档