OpenGraph 이미지란

Open Graph(OG) 이미지는 보통 우리가 링크를 공유할때 미리보기 이미지로 제공되는 것들을 이야기합니다.
미리보기 이미지가 있으면 아무래도 사람들의 관심을 유발하는 수단으로서도 좋지만, 개인적으로는 사이트의 신뢰도를 판가름하는 기준으로 생각하기도 합니다.
그래서 개인적으로는 사이트의 미리보기로서 오픈그래프 이미지를 무척 신경쓰는 편인데, 그럼에도 불구하고 OG 이미지를 고르기가 마땅치 않은 경우도 많습니다.
글을 잘 설명하는 이미지를 고르기 어렵기 때문이지요.

Opengraph-image

next.js에는 13버전부터 ImageResponse API를 통해 Opengraph 이미지를 생성할 수 있는 기능을 내장하고 있습니다. https://nextjs.org/docs/app/api-reference/functions/image-response

해당기능을 사용하는 방법은 비교적 간단한데, OpenGraph이미지를 설정해야할 곳에 opengraph-image.js 또는 twitter-image.js라는 파일을 생성하면 됩니다.

확장자는 js,ts,tsx를 지원하므로 환경에 맞게 사용하시면 됩니다.

예를 들어서 블로그 글을 작성할때마다 OpenGraph 이미지가 생성되야하고, 블로그 포스팅의 제목을 가져와서 이미지를 생성한다면 아래와 같은 소스로 만들 수 있습니다.

// app/post/[slug]/opengraph-image.tsx
import { ImageResponse } from "next/og"
import { viewPostByPublic } from "@/actions/action"  // post 정보를 데이터베이스로부터 가져오도록 직접 server action을 작성해야합니다.

// Image metadata
// 대체텍스트에 post 제목을 추가합니다.
export const alt = async ({ params }: { params: { slug: string } }) => {
  const slug = params.slug
  const slugParam = decodeURI(slug)
  const post = await viewPostByPublic(slugParam)  // 슬러그를 기반으로 post 정보를 가져옵니다.
  return post?.title || "사이트 이름"
}

export const size = {
  width: 1200,
  height: 630,
}

export const contentType = "image/png"

// Image generation
export default async function Image({ params }: { params: { slug: string } }) {
  const slug = params.slug
  const slugParam = decodeURI(slug)
  const post = await viewPostByPublic(slugParam) // 슬러그를 기반으로 post 정보를 가져옵니다.

  return new ImageResponse(
    (
      // ImageResponse JSX element
      // 슬러그를 기반으로 가져온 정보를 바탕으로 마크업으로 디자인하고, og image를 생성합니다. 
      <div
        style={{
          display: "flex",
          height: "100%",
          width: "100%",
          alignItems: "center",
          justifyContent: "center",
          flexDirection: "column",
          backgroundImage: "linear-gradient(to bottom, #dbf4ff, #fff1f1)",
          fontSize: 60,
          letterSpacing: -2,
          fontWeight: 700,
          textAlign: "center",
          padding: "48px",
          color: "rgb(54,0,160)",
        }}
      >
        {post ? post?.title : "일러스튜디오 블로그"}
      </div>
    ),
    // ImageResponse options
    {
      // For convenience, we can re-use the exported opengraph-image
      // size config to also set the ImageResponse's width and height.
      ...size,
    },
  )
}

각자의 경우에 따라 경로는 달라질 수 있습니다. 저는 app/post/[slug]/opengraph-image.tsx 경로에 파일을 만들어 이미지를 생성하도록 만들었습니다.

더 자세한 내용은 링크를 참고하시면 세부적인 API의 사용법에 대해서 더 알 수 있습니다. https://nextjs.org/docs/app/api-reference/file-conventions/metadata/opengraph-image#generate-images-using-code-js-ts-tsx