Next.js 배포 후 페이지 메타 태그가 다르게 보일 때

로컬과 배포 환경의 차이 파악하기

로컬에서는 정상인데 배포 후 페이지 메타 태그(title, description, og:image 등)가 다르게 보일 때가 있다. 이 문제는 보통 빌드 시점의 환경 변수 차이나 정적 생성 설정에서 비롯된다.

먼저 공개 URL의 HTML head를 직접 확인해보자.

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

이 명령으로 실제 서버가 보내는 메타 태그를 확인할 수 있다. 로컬 npm run dev의 결과와 비교하면 뭐가 빠졌는지 금방 알 수 있다.

빌드 로그에서 봐야 할 부분

Next.js 빌드 시 메타 데이터 생성 로그를 자세히 봐야 한다. 특히 next build를 실행했을 때:

npm run build

이 과정에서 sitemap이나 og 이미지가 제대로 생성되었는지, 빌드 로그 끝부분에 경고가 있는지 확인한다. "Image Optimization API" 관련 에러가 있으면 og:image가 처리되지 않는 경우가 많다.

canonical과 정적 생성 설정 확인

canonical URL이 잘못 설정되면 검색 엔진이 중복 페이지로 인식할 수 있다.

# 빌드 결과물 확인
cat .next/server/pages-manifest.json | grep -i canonical

next.config.js에서 basePath나 trailingSlash 설정이 올바른지 재확인하고, metadata 함수에서 canonical을 동적으로 구성하고 있다면 배포 환경의 NEXT_PUBLIC_BASE_URL이 제대로 설정되어 있는지 확인해야 한다.

실제 확인 순서

1. 공개 URL에서 curl로 메타 태그 확인 — 예상하던 값이 정말 없는지 확인
2. 로컬과 배포 환경의 환경 변수 비교 — NEXT_PUBLIC_ 접두사가 붙은 변수들이 다른지 확인
3. 빌드 로그 재검토 — Image Optimization 관련 에러나 경고가 있었는지 확인
4. 배포 설정 재확인 — 빌드 명령어, 빌드 시간, 사용 가능한 디스크 용량 등

결과가 바뀌었다면 그 변화를 한 줄로 정리해두는 습관이 다음 문제 해결을 훨씬 빠르게 만든다.