Open Graph 태그 활용
Open Graph의 제목·설명·URL·이미지 속성을 정적·동적 메타데이터로 설정해 공유 링크 미리보기를 제어합니다.
웹 페이지의 내용이 소셜 미디어 플랫폼(페이스북, X(트위터), 링크드인 등)에서 공유될 때, 단순히 링크만 표시되는 것보다 풍부한 미리보기(제목, 설명, 이미지)가 함께 표시될 때 사용자가 링크의 내용을 판단하기 쉬워집니다. 클릭률 개선 여부는 실제 이용 데이터를 통해 확인합니다.
이러한 미리보기를 제어하는 표준 프로토콜이 바로 Open Graph (OG) 프로토콜입니다.
Open Graph 태그는 HTML <head>에 포함되는 메타 태그로, 소셜 미디어 플랫폼이 페이지 콘텐츠를 해석하고 미리보기로 표시하는 데 필요한 구조화된 정보를 제공합니다.
Next.js App Router는 Open Graph 설정 API를 제공합니다.
이 절에서는 Open Graph 태그의 중요성, 주요 속성, Next.js App Router에서 이를 설정하는 방법, 그리고 효과적인 활용 전략에 대해 상세히 알아보겠습니다.
Open Graph 프로토콜이란?
Open Graph 프로토콜은 페이스북이 웹 페이지를 소셜 그래프의 객체로 통합하기 위해 2010년에 도입한 기술입니다.
이후 많은 소셜 미디어 플랫폼과 메신저 앱(카카오톡, 슬랙 등)이 이 프로토콜을 채택하여 링크 공유 시 사용자에게 일관되고 풍부한 시각적 경험을 제공하고 있습니다.
OG 태그가 제대로 설정되지 않으면, 소셜 미디어 플랫폼은 페이지의 제목, 설명, 이미지를 임의로 추출하여 표시할 수 있으며, 이 경우 미리보기가 어색하거나 정보가 누락되어 링크 클릭률이 낮아질 수 있습니다.
주요 Open Graph 태그 속성
OG 태그는 og: 접두사를 사용하여 정의됩니다.
가장 일반적으로 사용되는 필수 및 선택적 속성은 다음과 같습니다.
og:title: (필수) 웹 페이지의 제목입니다. 페이지 내용을 짧고 명확하게 나타냅니다. 표시 길이는 플랫폼과 화면에 따라 달라집니다.<meta property="og:title" content="Next.js로 배우는 SEO 가이드" />og:type: (필수) 웹 페이지 콘텐츠의 유형입니다.website(일반 웹사이트),article(블로그 게시물, 기사),book,profile,video.movie등 다양한 타입이 있습니다.<meta property="og:type" content="article" />og:image: (필수) 소셜 미디어 미리보기에서 표시될 이미지의 URL입니다. 공유 대상에서 읽을 수 있는 절대 URL을 사용합니다. 1200×630 px은 큰 미리보기용 예시 크기이며, Open Graph 프로토콜의 고정 최소 규격은 아닙니다.<meta property="og:image" content="https://commerce-lab.dev/images/seo-guide-og.png" />og:url: (필수) 웹 페이지의 표준 URL입니다. 이 URL은 페이지에 접근할 수 있는 정식 주소여야 합니다.<meta property="og:url" content="https://commerce-lab.dev/blog/nextjs-seo-guide" />og:description: (선택) 웹 페이지의 간략한 설명입니다. 제목을 보충하는 짧은 문장으로 작성합니다. 프로토콜 자체가 일정 글자 수를 보장하거나 모든 플랫폼에 같은 길이를 요구하지는 않습니다.<meta property="og:description" content="Next.js App Router에서 Open Graph 태그를 활용하여 소셜 미디어 공유를 최적화하는 방법을 알아봅니다." />og:site_name: (선택) 웹사이트의 이름입니다. 제목과 중복되지 않게 웹사이트의 브랜드를 나타냅니다.<meta property="og:site_name" content="My Next.js Blog" />og:locale: (선택) 콘텐츠의 언어 및 지역입니다 (예:ko_KR은 한국어,en_US는 미국 영어).<meta property="og:locale" content="ko_KR" />og:image:width,og:image:height: (선택)og:image에 지정된 이미지의 너비와 높이(픽셀)입니다. 이미지의 픽셀 크기를 전달하는 정보이며, 본문 이미지의 공간 예약이나 미리 로딩을 수행하는 설정은 아닙니다.<meta property="og:image:width" content="1200" /> <meta property="og:image:height" content="630" />article:published_time,article:author등 (og:type이article일 경우): 특정og:type에 따라 추가적인 메타 속성을 정의할 수 있습니다.
Next.js App Router에서 Open Graph 태그 설정하기
Next.js App Router에서는 13장 1절 정적 메타데이터 설정과 13장 2절 동적 메타데이터 생성에서 다룬 metadata 객체를 사용해 Open Graph 태그를 설정합니다.
metadata.openGraph에 속성을 정의하면 Next.js가 관련 <meta property="og:..." /> 태그를 생성합니다. 동적 메타데이터의 스트리밍과 봇별 처리 시점은 앞 절에서 구분한 방식에 따릅니다.
정적 Open Graph 태그 설정
애플리케이션 전체의 기본 Open Graph 정보를 루트 레이아웃인 src/app/layout.tsx에 설정합니다.
import type { Metadata } from 'next';
// ... (기존 임포트 및 폰트 설정) ...
export const metadata: Metadata = {
metadataBase: new URL('https://commerce-lab.dev'),
// ... (기존 title, description, keywords 등) ...
// Open Graph 설정
openGraph: {
title: '나만의 Next.js 웹사이트',
description: 'Next.js App Router를 활용하여 구축된 현대적인 웹사이트입니다.',
url: 'https://commerce-lab.dev', // 웹사이트의 기본 URL
siteName: 'Next.js 데모 사이트', // 웹사이트 이름
images: [
{
url: 'https://commerce-lab.dev/og-default.png', // 기본 OG 이미지 (공유될 때 표시)
width: 1200,
height: 630,
alt: 'Next.js 데모 사이트 로고',
},
],
locale: 'ko_KR',
type: 'website',
},
// ... (twitter, robots 등 기타 메타데이터) ...
};
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="ko">
<body>{children}</body>
</html>
);
}동적 Open Graph 태그 생성
블로그 게시물이나 상품 상세 페이지처럼 URL 파라미터에 따라 내용이 달라지는 경우, generateMetadata 함수를 사용하여 Open Graph 태그를 동적으로 생성합니다.
하위 openGraph는 상위 객체를 교체합니다. 다음 예제는 필요한 상위 이미지 배열만 parent에서 읽어 명시적으로 합칩니다.
import type { Metadata, ResolvingMetadata } from 'next';
import { notFound } from 'next/navigation';
// 가상의 상품 데이터 조회 함수
async function getProduct(id: string) {
const products = [
{ id: '1', name: '고급 Next.js 신발', description: '편안함과 스타일을 모두 잡은 신발입니다.', price: 120000, imageUrl: 'https://example.com/images/shoe1.jpg' },
{ id: '2', name: 'React 개발자 후드티', description: '개발자를 위한 편안하고 트렌디한 후드티입니다.', price: 55000, imageUrl: 'https://example.com/images/hoodie2.jpg' },
];
return products.find(p => p.id === id);
}
type Props = {
params: Promise<{ id: string }>;
searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
};
export async function generateMetadata(
{ params }: Props,
parent: ResolvingMetadata // 상위 메타데이터 (루트 layout.tsx 등)
): Promise<Metadata> {
const { id } = await params;
const product = await getProduct(id);
if (!product) {
notFound();
}
// 상위 openGraph 이미지를 가져와 현재 이미지와 병합
const previousImages = (await parent).openGraph?.images || [];
return {
title: product.name,
description: product.description,
openGraph: {
title: product.name,
description: product.description,
url: `https://commerce-lab.dev/products/${product.id}`,
siteName: 'Next.js 쇼핑몰', // 웹사이트 이름 (필요에 따라 덮어쓸 수 있음)
images: [
{
url: product.imageUrl,
width: 800,
height: 600,
alt: product.name,
},
...previousImages, // 기본 OG 이미지도 함께 포함 (선택 사항)
],
type: 'website', // Metadata 타입이 지원하는 Open Graph 유형을 사용
},
// Twitter Card도 비슷하게 설정 가능
twitter: {
card: 'summary_large_image',
title: product.name,
description: product.description,
images: [product.imageUrl],
}
};
}
export default async function ProductDetailPage({ params }: { params: Promise<{ id: string }> }) {
const { id } = await params;
const product = await getProduct(id);
if (!product) {
notFound();
}
return (
<div style={{ padding: '20px', maxWidth: '800px', margin: '20px auto', border: '1px solid #FF5722', borderRadius: '10px', boxShadow: '0 4px 8px rgba(0,0,0,0.1)' }}>
<h1 style={{ color: '#FF5722', textAlign: 'center', marginBottom: '20px' }}>{product.name}</h1>
<p style={{ textAlign: 'center', fontSize: '1.2em', color: '#666' }}>가격: {product.price.toLocaleString()}원</p>
{product.imageUrl && (
<img src={product.imageUrl} alt={product.name} style={{ maxWidth: '100%', height: 'auto', display: 'block', margin: '20px auto' }} />
)}
<p style={{ lineHeight: 1.6, fontSize: '1.1em', color: '#333' }}>{product.description}</p>
</div>
);
}이 예제의 getProduct는 고정 배열을 조회하며, generateMetadata와 본문에서 각각 호출됩니다. 자동으로 한 번만 실행되는 네트워크 요청을 시연한 코드는 아닙니다. 외부 이미지 주소도 준비된 실제 자산으로 바꾸어야 합니다.
예시
상품 id='1'의 페이지에서 부모 OG 이미지가 한 개라면, 메타데이터 함수는 상품 이미지와 부모 이미지의 순서로 OG 이미지 두 개를 반환합니다. Twitter 이미지 배열은 상품 이미지 한 개만 반환합니다. 코드를 통해 두 배열을 각각 만들었기 때문에 둘의 개수가 같을 필요는 없습니다. 어느 이미지가 공유 카드에 선택될지는 플랫폼의 처리까지 확인해야 합니다.
조건을 바꿔 보기
id='01'로 요청하면 id='1' 상품과 같다고 볼 수 있나요? 부모 이미지가 두 개일 때 정상 id='1'의 OG와 Twitter 이미지 수는 각각 얼마인가요?
식별자 비교와 배열 구성 확인
getProduct는 문자열의 엄격한 동일성을 비교하므로 '01'은 '1'과 일치하지 않습니다. 이 경우 메타데이터와 본문 모두 notFound()를 호출하는 조건입니다. 정상 상품의 OG 이미지는 상품 한 개와 부모 두 개를 합한 세 개, Twitter 이미지는 한 개입니다. 숫자처럼 보이는 문자열도 이 함수가 숫자로 변환하는 것은 아닙니다.
Next.js의 Metadata 타입에는 Open Graph의 product 유형이 없습니다.
상품명·가격·재고처럼 검색 엔진에 전달할 상품 의미는 Product JSON-LD로 별도 표현합니다.
효과적인 Open Graph 태그 활용 전략
운영 환경에서는 태그를 작성하는 것만큼 공유 디버거로 확인하고 플랫폼 캐시를 갱신하는 절차도 중요합니다.
- 고품질 이미지 사용:
og:image는 소셜 미디어 미리보기의 핵심입니다. 대상 플랫폼의 표시 크기와 자르기 방식을 고려해 페이지 내용을 잘 나타내는 이미지를 준비합니다. - 텍스트 오버레이 피하기: 이미지 위에 중요한 텍스트를 직접 오버레이하는 것은 피하는 것이 좋습니다. 소셜 미디어 플랫폼은 이미지를 축소하거나 잘라낼 수 있기 때문입니다.
- 최종 절대 URL 확인: 소셜 플랫폼에 출력되는
og:url과og:image는 절대 URL이어야 합니다. Next.js Metadata API에서는metadataBase를 설정한 뒤 상대 경로를 사용해도 절대 URL로 해석되므로, 생성된<meta>값이 올바른 공개 주소인지 확인합니다. - 캐시 문제 해결: 소셜 미디어 플랫폼은 OG 태그를 캐싱하는 경향이 있습니다. 태그를 수정한 후에는 해당 플랫폼이 제공하는 검사·재수집 기능으로 반영 상태를 확인합니다. 재수집 요청이 즉시 모든 공유 카드의 캐시를 바꾸는 것은 아닙니다.
- Facebook Sharing Debugger: https://developers.facebook.com/tools/debug/
- X (Twitter) Card Validator: https://cards-dev.twitter.com/validator
- 다양한
og:type활용: 페이지의 성격에 맞는og:type을 설정하여 검색 엔진과 소셜 미디어 플랫폼에 더 정확한 정보를 제공합니다. 예를 들어, 동영상 페이지에는video.movie, 레시피 페이지에는article또는website타입을 사용하고 추가적인article:속성을 활용할 수 있습니다. - Twitter Card와 함께 사용: 트위터는 자체
twitter:메타 태그를 사용하지만,og:태그를 폴백(fallback)으로 활용합니다. 따라서og:태그를 잘 설정해 두면 트위터에서도 기본적인 미리보기가 가능합니다. 다만 트위터 고유의 카드 타입을 활용하려면twitter:태그를 별도로 설정하는 것이 좋습니다 (예:summary_large_image). og:locale설정:og:locale과og:locale:alternate는 언어·지역 코드를 나타냅니다. 언어별 페이지 URL을 연결하는hreflang선언과는 별개입니다.- 대표 URL 구분:
og:url은 소셜 그래프의 객체 식별 주소입니다. 검색용rel="canonical"이 필요하면alternates.canonical도 선언합니다.
Open Graph 태그는 공유 미리보기의 제목, 설명, 이미지를 명확히 전달하는 메타데이터입니다.
Next.js App Router의 내장된 메타데이터 기능을 활용하면 이러한 태그들을 쉽게 관리하고, 사용자에게 최적화된 공유 경험을 제공할 수 있습니다.