Next.js 메타데이터 & SEO 완벽 정리

📌 개요

웹 서비스에서 SEO(Search Engine Optimization)는
검색 엔진 노출과 유입에 직접적인 영향을 준다.

Next.js(App Router 기준)는 Metadata API를 통해
SEO 설정을 매우 간단하고 강력하게 관리할 수 있다.

이 글에서는 다음 3가지를 핵심으로 정리한다:

• Metadata 설정
• 동적 메타데이터
• SEO 최적화 전략

---

🏷 1. Metadata 설정

✅ Metadata란?

• 페이지의 정보를 담는 메타 태그
• 검색 엔진 & SNS 공유 시 사용됨

대표적으로:

• title
• description
• og:image
• keywords

---

✅ 기본 사용법

import type { Metadata } from 'next'

export const metadata: Metadata = {
  title: 'My Page',
  description: 'This is my page',
}

👉 layout.tsx 또는 page.tsx에서 선언 가능

---

✅ 주요 옵션

export const metadata: Metadata = {
  title: '페이지 제목',
  description: '페이지 설명',
  keywords: ['nextjs', 'seo'],
  openGraph: {
    title: 'OG 제목',
    description: 'OG 설명',
    images: ['/og-image.png'],
  },
}

---

✅ title 템플릿

export const metadata = {
  title: {
    default: 'Panzy',
    template: '%s | Panzy',
  },
}

👉 페이지별 title 자동 구성 가능

---

⚡ 2. 동적 메타데이터

✅ 왜 필요한가?

• 상품 상세 페이지
• 블로그 글
• 숙소 상세 페이지

👉 각각 다른 title/description 필요

---

✅ generateMetadata 사용

import type { Metadata } from 'next'

export async function generateMetadata({ params }): Promise<Metadata> {
  const data = await fetch(`https://api.example.com/${params.id}`).then(res => res.json())

  return {
    title: data.title,
    description: data.description,
  }
}

---

✅ 예시 (숙소 상세)

export async function generateMetadata({ params }) {
  const accommodation = await getAccommodation(params.id)

  return {
    title: accommodation.name,
    description: accommodation.description,
  }
}

---

⚠️ 주의사항

• 서버 컴포넌트에서만 사용 가능
• fetch는 캐싱 전략 고려 필요

---

🔍 3. SEO 최적화 전략

✅ 1. 메타데이터 최적화

• title: 핵심 키워드 포함
• description: 클릭 유도 문장
• 중복 제거 필수

---

✅ 2. Open Graph 설정

SNS 공유 최적화

openGraph: {
  title: '제목',
  description: '설명',
  images: ['/image.png'],
}

---

✅ 3. 구조화된 URL

❌ 나쁜 예

• /page?id=123

✅ 좋은 예

• /accommodation/123

---

✅ 4. SSR 활용

• 검색 엔진은 JS 실행 제한적
• 서버 렌더링이 SEO에 유리

---

✅ 5. 이미지 SEO

• alt 속성 필수
• next/image 사용 권장

<Image src=\"/image.png\" alt=\"숙소 이미지\" />

---

✅ 6. 사이트맵 & robots.txt

• sitemap.xml 생성
• robots.txt 설정

👉 검색 엔진 크롤링 최적화

---

✅ 7. 성능 최적화

• Core Web Vitals 중요
• LCP, CLS, TTI 개선 필요

👉 SEO 랭킹에 직접 영향

---

📌 한눈에 정리

Metadata

• title, description 설정
• Open Graph 포함

동적 메타데이터

• generateMetadata 사용
• 페이지별 SEO 대응

SEO 전략

• 키워드 최적화
• SSR 활용
• URL 구조 개선
• 성능 최적화

---

🚀 결론

Next.js에서는 Metadata API를 활용하면
SEO 설정을 매우 효율적으로 관리할 수 있다.

👉 핵심 요약

• 정적 페이지 → metadata 사용
• 동적 페이지 → generateMetadata 사용
• 전체 전략 → SEO + 성능 최적화

이 구조만 제대로 잡아도
검색 유입과 클릭률이 크게 개선된다.