Next.js App Router는 기존 next/head 패턴을 대체하는 일급 Metadata API를 제공합니다. 2026년에는 잘 구성된 Next.js 앱이 추가 플러그인 없이 기술 SEO 점수 100점을 달성할 수 있습니다. 이 가이드는 사용 가능한 모든 메타데이터 레버를 복사-붙여넣기 코드 예제와 함께 다룹니다.

Metadata API

모든 page.tsx와 layout.tsx는 metadata 객체나 generateMetadata() 함수를 내보낼 수 있습니다. Next.js는 레이아웃과 페이지의 메타데이터를 병합하며, 페이지 메타데이터가 우선합니다. 루트 layout.tsx는 사이트 전체 기본값을 설정하기에 적합합니다.

타이틀 템플릿

루트 레이아웃에서 title.template을 사용하여 사이트 이름을 자동으로 추가하세요:

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

하위 페이지는 title: 'PNG를 WebP로 변환'만 설정하면 PNG를 WebP로 변환 | Picovert로 렌더링됩니다.

Open Graph 및 Twitter Card

소셜 미리보기에는 Open Graph 메타 태그가 필요합니다. OG 이미지는 정확히 1200×630 픽셀이어야 합니다. 링크 미리보기에서 최상의 로드 시간을 위해 /public/og/에서 WebP로 제공하세요.

다국어 사이트를 위한 hreflang

사이트가 여러 언어를 지원하는 경우, hreflang 태그는 Google에 각 로케일에 표시할 URL을 알려줍니다. Next.js에서는 alternates 필드를 사용하세요. 항상 기본 언어 URL을 가리키는 x-default를 포함하세요.

JSON-LD 구조화 데이터

구조화 데이터는 Google 검색에서 풍부한 결과(별점, FAQ, 이동 경로)를 가능하게 합니다. 페이지의 <head>에 <script type='application/ld+json'> 태그를 추가하세요. 블로그 포스트의 경우 BlogPosting 스키마, 제품의 경우 Product, FAQ의 경우 FAQPage를 사용하세요. Google의 리치 결과 테스트로 파싱이 올바른지 확인하세요.

robots.txt

app 디렉토리에 robots.ts 파일을 만드세요. 크롤러가 접근을 허용하는 경로와 차단할 경로(예: /api/)를 명시하고, 사이트맵 URL을 포함하세요.

Canonical URL

페이지네이션 페이지, URL 파라미터, 별도로 인덱싱되어서는 안 되는 로케일 변형으로 인한 중복 콘텐츠 페널티를 방지하려면 항상 canonical URL을 설정하세요.

체크리스트

모든 페이지에 고유한 타이틀과 설명
타이틀 60자 이하, 설명 155자 이하
Open Graph 이미지 1200×630
모든 언어 변형에 hreflang
블로그 포스트, 제품, FAQ에 JSON-LD 구조화 데이터
Search Console에 사이트맵 제출
모든 인덱싱 가능 페이지에 Canonical URL
크롤러를 허용하고 비공개 경로를 차단하는 robots.txt
LCP 2.5초 이하, INP 200ms 이하, CLS 0.1 이하