13장 : SEO 및 메타데이터
정적 메타데이터 설정
검색 엔진 최적화(SEO, Search Engine Optimization)는 웹사이트가 검색 결과에서 더 높은 순위를 차지하고 더 많은 트래픽을 유치하도록 돕는 필수적인 과정입니다. SEO의 핵심 요소 중 하나는 웹 페이지의 메타데이터(Metadata) 를 적절하게 설정하는 것입니다. 메타데이터는 웹 페이지의 내용에 대한 정보를 검색 엔진과 소셜 미디어 플랫폼에 제공하여, 페이지가 어떻게 인덱싱되고 사용자에게 표시될지 결정합니다.
Next.js 13부터 도입된 App Router는 라우트별로 정적 메타데이터(Static Metadata) 를 쉽게 설정할 수 있는 강력한 기능을 제공합니다. 이 절에서는 정적 메타데이터의 중요성, Next.js App Router에서 이를 설정하는 방법, 그리고 SEO에 도움이 되는 주요 메타데이터 속성들을 상세히 알아보겠습니다.
메타데이터란 무엇이며 왜 중요한가요?
메타데이터는 "데이터에 대한 데이터"를 의미하며, 웹 페이지의 맥락에서는 해당 페이지의 콘텐츠를 설명하는 정보입니다. HTML <head> 태그 내에 <meta> 태그, <title> 태그 등을 통해 정의됩니다.
메타데이터가 중요한 이유
- 검색 엔진 최적화 (SEO): 검색 엔진 크롤러는 메타데이터를 읽어 페이지의 주제와 관련성을 파악하고 검색 결과에 반영합니다. 정확하고 풍부한 메타데이터는 검색 엔진 순위를 높이는 데 기여합니다.
- 소셜 미디어 공유: Open Graph (OG) 및 Twitter Card 메타데이터는 웹 페이지가 Facebook, Twitter, LinkedIn 등 소셜 미디어 플랫폼에 공유될 때 미리보기(제목, 설명, 이미지)가 어떻게 표시될지 정의합니다. 이는 링크 클릭률을 높이는 데 중요한 역할을 합니다.
- 사용자 경험 개선: 브라우저 탭의 제목, 북마크 이름 등은 메타데이터를 통해 결정됩니다. 명확한 제목과 설명은 사용자에게 페이지의 내용을 미리 알려주는 역할을 합니다.
App Router에서 정적 메타데이터 설정하기
Next.js App Router에서 정적 메타데이터를 설정하는 가장 일반적이고 권장되는 방법은 metadata 객체를 layout.tsx 또는 page.tsx 파일에서 export하는 것입니다.
Next.js는 빌드 시점에 이 metadata 객체를 읽어 HTML <head> 태그에 필요한 메타 태그들을 자동으로 생성합니다.
기본 메타데이터 설정
애플리케이션 전체에 적용될 기본 메타데이터는 루트 layout.tsx 파일에서 설정합니다.
// app/layout.tsx
import type { Metadata } from 'next'; // Metadata 타입 임포트
import { Inter } from 'next/font/google';
import './globals.css';
const inter = Inter({ subsets: ['latin'] });
// 1. Metadata 객체 export
export const metadata: Metadata = {
title: 'Next.js 튜토리얼 - 성능 최적화와 SEO', // 웹사이트의 기본 제목
description: 'Next.js App Router를 사용하여 성능 최적화 및 SEO 설정을 학습하는 튜토리얼입니다.', // 웹사이트의 기본 설명
keywords: ['Next.js', 'React', '성능 최적화', 'SEO', '웹 개발'], // 관련 키워드
authors: [{ name: 'Your Name', url: 'https://yourwebsite.com' }], // 개발자 정보
creator: 'Your Name', // 제작자 정보
publisher: 'Your Company', // 발행자 정보
// Open Graph (소셜 미디어 공유 최적화)
openGraph: {
title: 'Next.js 튜토리얼 - 성능 최적화와 SEO',
description: 'Next.js App Router를 사용하여 성능 최적화 및 SEO 설정을 학습하는 튜토리얼입니다.',
url: 'https://yourwebsite.com', // 웹사이트의 표준 URL
siteName: 'Next.js 학습 사이트', // 웹사이트 이름
images: [
{
url: 'https://yourwebsite.com/og-image.png', // 소셜 미디어 공유 시 표시될 이미지
width: 1200,
height: 630,
alt: 'Next.js 튜토리얼 이미지',
},
],
locale: 'ko_KR', // 언어 및 지역 (예: 한국어)
type: 'website', // 페이지 타입 (website, article 등)
},
// Twitter Card (트위터 공유 최적화)
twitter: {
card: 'summary_large_image', // 카드 타입 (summary, summary_large_image, app, player)
title: 'Next.js 튜토리얼 - 성능 최적화와 SEO',
description: 'Next.js App Router를 사용하여 성능 최적화 및 SEO 설정을 학습하는 튜토리얼입니다.',
creator: '@yourtwitterhandle', // 트위터 계정
images: ['https://yourwebsite.com/twitter-image.png'], // 트위터 공유 시 표시될 이미지
},
// robots.txt 설정과 유사한 역할 (페이지 인덱싱 및 팔로우 제어)
robots: {
index: true, // 이 페이지를 인덱싱할지 여부
follow: true, // 이 페이지의 링크를 따라갈지 여부
nocache: true, // 캐시를 사용하지 않을지 여부
googleBot: { // GoogleBot 전용 설정
index: true,
follow: false,
noimageindex: true, // 이미지 인덱싱 방지
'max-video-preview': -1,
'max-snippet': -1,
},
},
// 기타 메타 태그 (예: 뷰포트, 테마 색상 등)
viewport: {
width: 'device-width',
initialScale: 1,
maximumScale: 1,
},
themeColor: '#FFFFFF', // 웹사이트 테마 색상 (모바일 브라우저 주소창 색상 등)
};
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="ko">
<body className={inter.className}>{children}</body>
</html>
);
}페이지별 메타데이터 설정
특정 페이지에만 적용되는 메타데이터는 해당 페이지의 page.tsx 파일에서 metadata 객체를 export하여 설정합니다. 페이지 레벨의 메타데이터는 레이아웃 레벨의 메타데이터를 덮어씁니다.
// app/dashboard/page.tsx
import type { Metadata } from 'next';
// 1. Dashboard 페이지의 metadata 객체 export
export const metadata: Metadata = {
title: '대시보드 - 내 계정 요약', // 이 페이지의 고유 제목 (루트 레이아웃의 제목을 덮어씀)
description: '사용자 계정의 대시보드입니다. 최신 활동, 알림 및 설정에 접근하세요.', // 이 페이지의 고유 설명
// Open Graph 등 다른 속성도 여기에 추가하거나 덮어쓸 수 있습니다.
openGraph: {
title: '대시보드 - Next.js 학습',
description: '나만의 Next.js 대시보드 페이지입니다.',
images: ['https://yourwebsite.com/dashboard-og.png'],
},
// robots: { index: false, follow: false }, // 특정 페이지를 검색에서 제외하고 싶을 때
};
export default function DashboardPage() {
return (
<div>
<h1>대시보드</h1>
<p>환영합니다! 이곳은 대시보드 페이지입니다.</p>
</div>
);
}메타데이터 병합 규칙
Next.js는 여러 레벨(루트 레이아웃, 중첩 레이아웃, 페이지)에서 metadata 객체가 정의될 경우, 이를 스마트하게 병합합니다.
- 하위 레벨의 메타데이터는 상위 레벨의 동일한 속성을 덮어씁니다.
- 배열 형태의 속성(예:
keywords,images)은 기본적으로 병합됩니다. (덮어쓰기 동작을 변경하려면 함수 사용)
주요 메타데이터 속성 상세 설명
Metadata 타입은 다양한 SEO 및 소셜 미디어 관련 속성을 제공합니다.
title<title>태그에 해당하는 값입니다. 브라우저 탭에 표시되며, 검색 엔진 결과의 제목으로 사용됩니다.- 페이지의 내용을 간결하고 명확하게 요약해야 합니다.
- 권장 형식:
페이지 제목 | 웹사이트 이름또는웹사이트 이름 - 페이지 제목
description<meta name="description" content="..." />태그에 해당합니다. 검색 엔진 결과의 스니펫(요약)으로 사용될 수 있습니다.- 페이지의 내용을 1~2문장으로 요약하며, 관련 키워드를 포함하는 것이 좋습니다.
keywords<meta name="keywords" content="..." />태그에 해당합니다. 과거에는 중요했지만 현재 검색 엔진에서는 중요도가 낮아졌습니다. 그래도 관련 키워드를 포함하는 것이 좋습니다.
authors,creator,publisher- 콘텐츠의 저자, 제작자, 발행자 정보를 제공합니다.
openGraph(OG)- Facebook, LinkedIn 등 Open Graph 프로토콜을 사용하는 소셜 미디어 플랫폼에 페이지가 공유될 때 표시될 정보를 정의합니다.
title,description,url,siteName,images,locale,type등의 속성이 있습니다.images는 배열로 여러 이미지를 지정할 수 있습니다.
twitter- Twitter Card를 정의하여 트위터에 페이지가 공유될 때 표시될 정보를 제어합니다.
card타입 (summary,summary_large_image등),title,description,creator,images등의 속성이 있습니다.
robots<meta name="robots" content="..." />태그에 해당하며, 검색 엔진 크롤러에게 페이지를 어떻게 처리할지 지시합니다.index: true/false,follow: true/false등이 주요 속성입니다.index: false는 해당 페이지를 검색 결과에서 제외하라는 의미입니다.
viewport<meta name="viewport" content="..." />태그에 해당하며, 모바일 기기에서 페이지가 올바르게 렌더링되도록 뷰포트 설정을 정의합니다. 반응형 웹 디자인에 필수적입니다.
themeColor<meta name="theme-color" content="..." />태그에 해당하며, 모바일 브라우저의 주소창 색상 등을 설정하여 브랜드 색상과 일치시킬 수 있습니다.
icons- 파비콘(favicon) 및 기타 웹 아이콘을 설정합니다.
-
icons: { icon: '/favicon.ico', // 기본 파비콘 shortcut: '/shortcut-icon.png', apple: '/apple-icon.png', // iOS 홈 화면 아이콘 other: { rel: 'apple-touch-icon-precomposed', url: '/apple-touch-icon-precomposed.png', }, },
정적 메타데이터 설정 시 고려사항
- 일관성 유지: 웹사이트 전체에서 메타데이터의 형식과 내용에 일관성을 유지하는 것이 중요합니다.
- 중복 피하기: 각 페이지마다 고유하고 관련성 높은 제목과 설명을 제공하여 중복된 콘텐츠로 인한 SEO 문제를 피합니다.
- 키워드 스터핑 지양:
keywords나description에 과도하게 키워드를 나열하는 것은 검색 엔진에 부정적인 영향을 줄 수 있습니다. 자연스러운 문장으로 작성하세요. - 이미지 경로 확인:
openGraph.images나twitter.images에 사용되는 이미지 경로는 절대 경로(Full URL)를 사용해야 하며, 해당 이미지가 실제로 접근 가능한지 확인해야 합니다. - 정확성: 웹 페이지의 실제 내용을 정확하게 반영하는 메타데이터를 작성해야 합니다.
- 모바일 친화적:
viewport설정을 통해 모바일 기기에서의 표시를 최적화해야 합니다. - 테스트: 페이지를 배포한 후 Google Search Console, Open Graph Debugger (Facebook), Twitter Card Validator 등의 도구를 사용하여 메타데이터가 올바르게 인식되는지 확인합니다.
Next.js App Router의 정적 메타데이터 기능을 활용하면, 개발자가 쉽게 SEO 친화적인 웹 페이지를 구축하고 소셜 미디어 공유 환경을 개선할 수 있습니다. 이는 웹사이트의 가시성과 접근성을 높이는 데 핵심적인 역할을 합니다.