카톡에 링크보내면 나오는 "그거", Open Graph로 쉽게 설정하기

카카오톡, 페이스북, 트위터에 링크를 공유할 때 보이는 미리보기 정보, 바로 이 기능은 Open Graph 메타 태그를 통해 설정할 수 있습니다.
이 글에서는 Next.js의 app 디렉토리 구조를 활용해 페이지별로 Open Graph를 설정하는 방법을 상세히 다룹니다. 또한, 이미지를 동적으로 생성하여 활용하는 방법까지 알아보겠습니다.

Open Graph란?

Open Graph는 Facebook에서 만든 표준 프로토콜로, 웹 페이지의 메타데이터를 정의하여 링크를 공유할 때 보이는 정보를 제어합니다.
이를 통해 링크를 공유할 때 나타나는 제목, 설명, 이미지 등을 설정할 수 있습니다.

Next.js에서 Open Graph 설정하기

1. `metadata`를 활용한 기본 설정

Next.js의 app 디렉토리에서는 페이지별로 메타데이터를 설정할 수 있습니다.
예를 들어, 특정 페이지에 Open Graph 정보를 추가하려면 아래와 같이 설정합니다.

페이지 파일: `app/blog/[slug]/page.tsx`

import { Metadata } from 'next';
 
export const generateMetadata = async ({
  params
}: {
  params: { slug: string };
}): Promise<Metadata> => {
  const slug = params.slug;
 
  return {
    title: `블로그 포스트 - ${slug}`,
    description: `${slug}에 대한 상세 정보`,
    openGraph: {
      type: 'article',
      title: `블로그 포스트 - ${slug}`,
      description: `${slug}에 대한 상세 정보`,
      url: `https://example.com/blog/${slug}`,
      images: [
        {
          url: `https://example.com/og-images/${slug}.png`,
          width: 1200,
          height: 630,
          alt: `${slug} 미리보기 이미지`
        }
      ]
    }
  };
};
 
export default function BlogPost({ params }: { params: { slug: string } }) {
  return (
    <div>
      <h1>블로그 포스트: {params.slug}</h1>
    </div>
  );
}

generateMetadata 함수: 각 블로그 포스트의 slug에 따라 동적으로 Open Graph 데이터를 생성합니다.

2. `app/og` 를 활용한 기본 설정

Open Graph 이미지를 동적으로 생성하려면 app 디렉토리 내에 og라는 폴더를 만들고, route.tsx를 설정합니다.

app/
├── og/
│   └── route.tsx

app/og/route.tsx

import { ImageResponse } from 'next/og';
 
export const runtime = 'edge';
 
export async function GET(request: Request): Promise<ImageResponse> {
  const { searchParams } = new URL(request.url);
  const title = searchParams.get('title') || 'Default Title';
 
  return new ImageResponse(
    (
      <div
        style={{
          width: '1200px',
          height: '630px',
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
          backgroundColor: '#f8f9fa',
          fontFamily: 'Arial'
        }}
      >
        <h1
          style={{
            fontSize: '60px',
            fontWeight: 'bold',
            color: '#333'
          }}
        >
          {title}
        </h1>
      </div>
    ),
    {
      width: 1200,
      height: 630
    }
  );
}

URL 파라미터: title을 URL의 쿼리스트링으로 받아 Open Graph 이미지를 동적으로 생성합니다.
동적 경로: https://example.com/og?title=MyTitle 처럼 사용할 수 있습니다.

Open Graph에 동적 이미지를 연결 이제 동적으로 생성한 이미지를 Open Graph에 추가합니다.

페이지 파일: app/blog/[slug]/page.tsx

export const generateMetadata = async ({
  params
}: {
  params: { slug: string };
}): Promise<Metadata> => {
  const slug = params.slug;
 
  return {
    title: `블로그 포스트 - ${slug}`,
    description: `${slug}에 대한 상세 정보`,
    openGraph: {
      type: 'article',
      title: `블로그 포스트 - ${slug}`,
      description: `${slug}에 대한 상세 정보`,
      url: `https://example.com/blog/${slug}`,
      images: [
        {
          url: `https://example.com/og?title=${encodeURIComponent(slug)}`,
          width: 1200,
          height: 630,
          alt: `${slug} 미리보기 이미지`
        }
      ]
    }
  };
};

결론

이렇게 Next.js의 app 디렉토리 구조를 활용해 Open Graph를 설정하고, 동적 이미지를 생성하는 방법을 알아보았습니다.

텍스트

카톡에 링크보내면 나오는 "그거" 어떻게하는거에요?