Next.js에서 canonical URL이 제대로 안 나올 때

Next.js로 다중 언어 사이트나 매개변수 기반 페이지를 운영하면, canonical URL을 제대로 설정하는 게 중요하다. 중복 콘텐츠로 판단되지 않으려면, 각 페이지가 자신의 올바른 canonical을 가져야 한다.

현재 상태 파악

배포된 페이지에서 canonical이 어떻게 나오는지 직접 확인한다.

curl -s https://example.com/page | grep canonical

canonical이 없으면 빈 줄만 나온다. canonical이 잘못된 주소를 가리키고 있을 수도 있다.

빌드 로그 확인

npm run build

Next.js 빌드 중에 모든 페이지가 정상적으로 생성되었는지 확인한다. 특히 동적 라우팅 페이지들이 SSG(Static Site Generation)로 올바르게 생성되었는지 본다.

canonical 생성 로직 검토

canonical은 보통 getMetadata 또는 generateMetadata 함수에서 설정된다. 현재 로직을 확인한다:

• 기본 도메인이 정확한가
• 현재 페이지의 경로가 제대로 들어가 있는가
• 언어 코드나 기타 매개변수가 올바르게 포함되어 있는가

curl -s https://example.com | grep -Ei 'title|description|canonical|og:|twitter:'

HTML head의 모든 메타데이터를 한 번에 확인하면, 다른 문제가 있는지도 알 수 있다.

환경별 차이

canonical은 배포 환경의 도메인을 사용해야 한다. 로컬에서는 localhost:3000이지만, 운영에서는 실제 도메인이어야 한다.

환경 변수에서 기본 도메인을 제대로 설정했는지 확인한다:

• 로컬: http://localhost:3000
• 운영: https://example.com

검증 및 테스트

1. 페이지별로 canonical이 자신의 주소를 가리키는지 확인
2. 구글 Search Console에서 대표 페이지 설정 확인
3. 다른 페이지에서 사용된 canonical도 체크 (중복 참조 방지)

올바른 canonical을 설정하면 검색 엔진 최적화에 직결되므로, 배포 직후 반드시 확인해야 한다.