Next.js 웹사이트 SEO 최적화 완벽 가이드

Next.js와 SEO의 관계

Next.js는 React 기반의 풀스택 프레임워크로, 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG)을 지원하여 SEO에 매우 유리합니다. 일반 React 앱(CSR)은 검색 엔진이 콘텐츠를 제대로 인덱싱하지 못하는 문제가 있지만, Next.js는 이를 해결합니다.

렌더링 방식별 SEO 영향

CSR (Client Side Rendering)

• 검색 엔진 봇이 빈 HTML만 봄
• JavaScript 실행 후에야 콘텐츠 표시
• Google은 JS 렌더링 지원하지만 지연이 있음

SSR (Server Side Rendering)

• 서버에서 완성된 HTML 전송
• 검색 엔진이 즉시 콘텐츠 인덱싱 가능
• 동적 콘텐츠에 적합

SSG (Static Site Generation)

• 빌드 타임에 HTML 생성
• 가장 빠른 로딩 속도
• 블로그, 문서 사이트에 최적

Next.js SEO 최적화 핵심 기법

1. Metadata 설정

App Router에서 metadata 객체를 export하여 메타 태그를 설정합니다.

각 페이지별로 고유한 title과 description을 설정하고, Open Graph 태그도 함께 설정하여 소셜 미디어 공유 시 올바른 미리보기가 표시되도록 합니다.

2. 동적 메타데이터

상품 페이지나 블로그 포스트처럼 동적 콘텐츠의 경우, generateMetadata 함수를 사용하여 데이터베이스에서 가져온 정보로 메타데이터를 생성합니다.

3. 구조화된 데이터 (JSON-LD)

검색 엔진이 콘텐츠를 더 잘 이해할 수 있도록 JSON-LD 형식의 구조화된 데이터를 추가합니다. Article, Product, FAQ 등 다양한 스키마 타입을 활용할 수 있습니다.

4. 이미지 최적화

Next.js의 Image 컴포넌트는 자동으로 WebP 변환, lazy loading, 반응형 이미지를 처리합니다. alt 속성을 반드시 설정하여 접근성과 SEO를 모두 개선하세요.

5. Sitemap과 robots.txt

next-sitemap 패키지를 사용하면 빌드 시 자동으로 sitemap.xml과 robots.txt를 생성할 수 있습니다. 대규모 사이트의 경우 동적 sitemap 생성도 가능합니다.

성능 최적화 = SEO 최적화

Core Web Vitals는 Google 랭킹 요소입니다.

LCP (Largest Contentful Paint)

• 메인 콘텐츠 로딩 시간
• 목표: 2.5초 이내
• 개선법: 이미지 최적화, 서버 응답 시간 단축

FID (First Input Delay)

• 첫 상호작용 응답 시간
• 목표: 100ms 이내
• 개선법: JavaScript 최적화, 코드 스플리팅

CLS (Cumulative Layout Shift)

• 레이아웃 안정성
• 목표: 0.1 이내
• 개선법: 이미지 크기 명시, 폰트 최적화

실전 체크리스트

1. 모든 페이지에 고유한 title, description 설정
2. Open Graph, Twitter Card 메타 태그 추가
3. JSON-LD 구조화 데이터 적용
4. next/image로 모든 이미지 최적화
5. sitemap.xml 자동 생성 설정
6. robots.txt 적절히 설정
7. canonical URL 설정으로 중복 콘텐츠 방지
8. Core Web Vitals 점수 90점 이상 유지

마무리

Next.js는 SEO 친화적인 웹사이트를 만들기 위한 최고의 선택지 중 하나입니다. SpacePlanning은 Next.js 기반 SEO 최적화 웹사이트 개발 서비스를 제공합니다.