웹 개발
배포 후 미리보기가 깨질 때 확인할 것
로컬에서는 맞는데 배포 후 소셜 미리보기나 메타데이터가 깨진다면, 실제 배포된 페이지의 HTML을 먼저 확인해야 한다.
Next.js를 배포하고 나서 가장 흔한 문제 중 하나가 메타데이터 관련 이슈다. 로컬 개발에서는 완벽해 보이지만, 실제 배포 환경에서는 미리보기 이미지가 안 나오거나 제목이 이상하게 표시되기도 한다.
배포된 페이지의 HTML 구조 확인
가장 먼저 할 일은 실제 HTML을 본다는 것이다:
curl -s https://example.com | head -100
또는 더 정확하게 필터링하면:
curl -s https://example.com | grep -Ei '<title>|<meta\s+(name|property)="(description|og:|twitter)'
이 출력에서 다음을 확인한다:
<title>태그가 있는가og:title,og:description,og:image가 있는가twitter:card관련 태그가 있는가
로컬 빌드와 비교
로컬에서 빌드한 결과도 본다:
npm run build
cat .next/server/app/page.html | head -100
배포 환경과 다르다면 빌드 환경 변수가 다를 가능성이 높다.
캐시 문제인지 확인
응답 헤더를 본다:
curl -I https://example.com
Cache-Control: s-maxage=...이 설정돼 있으면 CDN이 캐시 중일 수 있다. 재배포해도 반영되지 않으면 캐시를 무효화해야 한다.
메타데이터가 동적이면
Open Graph 이미지가 동적으로 생성되는 경우, 이미지 생성 엔드포인트가 배포 후에도 작동하는지 확인한다:
curl -I https://example.com/api/og?title=Test
200 응답이 오는지, 이미지 타입이 맞는지 본다.
정리 순서
- 배포된 페이지의 실제 HTML을 본다.
- 로컬 빌드 결과와 비교한다.
- 응답 캐시를 확인한다.
- 필요하면 CDN 캐시를 무효화한다.
대부분의 경우 이 순서대로 확인하면 원인을 찾을 수 있다.