← 全部文章
阅读约 5 分钟

在 Next.js 中为每个页面生成动态 OG 图片

一个路由就能根据每个页面的标题和元数据渲染出一张品牌化的社交图片——不需要设计工具，也不用手动导出。这是实现模式。

为每个页面单独设计一张分享图片是行不通的。更好的做法是用一个动态路由，按需根据每个页面自身的标题和元数据绘制一张品牌化卡片。

opengraph-image 路由

Next.js 会读取路由段中的 opengraph-image 文件，并把它返回的内容作为该路由的 og:image 提供。用 next/og 渲染，它其实就是绘制成图片的 JSX。

import { ImageResponse } from "next/og";

export default function Image() {
  return new ImageResponse(
    <div style={{ fontSize: 64, padding: 60 }}>Your title</div>,
    { width: 1200, height: 630 },
  );
}

让它做到逐页定制

  • 从路由的 params 或你的数据层取出标题。
  • 用你的品牌强调色为卡片配色，让整个站点观感一致。
  • 把它控制在平台的尺寸上限之内，确保它总能加载出来。

「OG 图片」技能会搭建这个路由并按你的站点主题定制，同时在你的各个页面上接好 openGraph.images，让任何两个路由都不会共用同一张预览图。

在 Next.js 中为每个页面生成动态 OG 图片