피드로 돌아가기
Dev.toFrontend
원문 읽기
Next.js 16 Metadata API 기반 다국어 SEO 인덱싱 최적화 전략
hreflang in Next.js 16: 3 mistakes that quietly delete your translated pages from Google
AI 요약
Context
다국어 페이지 운영 시 hreflang 설정 오류는 빌드 에러 없이 침묵하며 검색 엔진의 인덱싱 제외나 페널티를 유발함. 특히 Canonical 태그 설정 오류와 상호 참조 누락으로 인한 중복 콘텐츠 판정 문제가 주요 병목 지점으로 작용함.
Technical Solution
- Metadata API의 alternates 필드를 활용한 hreflang 태그의 자동 생성 구조 설계
- buildHreflang 헬퍼 함수를 통한 각 페이지별 실제 존재 Locale 기반의 동적 URL 매핑
- 상호 참조(Reciprocal) 원칙 준수를 위해 동일 클러스터 내 모든 페이지에 동일한 Locale 배열 적용
- Canonical URL을 English Master가 아닌 현재 페이지(Self-referential)로 설정하여 인덱싱 제거 방지
- x-default 설정을 통한 기본 언어 경로 명시로 검색 엔진의 탐색 효율 증대
- 정적 설정 파일 대신 페이지 단위의 인자로 전달하여 404 URL 노출을 원천 차단
실천 포인트
1. 동일 콘텐츠 클러스터 내 모든 언어 페이지의 hreflang 배열이 일치하는지 확인
2. hreflang이 가리키는 모든 URL이 HTTP 200 응답을 반환하는지 검증
3. 각 다국어 페이지의 Canonical 태그가 자기 자신을 가리키는지 확인
4. 소스 코드가 아닌 프로덕션 빌드의 렌더링된 <head> 섹션을 통해 최종 검증