Next.js 배포 후 메타데이터 확인하기

Next.js로 관리자 페이지를 만들 때 메타데이터 설정이 제대로 반영되지 않는 경우가 있다. 로컬에서는 정상이었는데 배포하면 title, description, og:image가 다르게 나타난다.

HTML head 먼저 확인하기

Next.js 문제를 마주칠 때 한 가지 파일만 의심해서는 안 된다. 빌드 로그, 메타데이터, 실제 HTML을 모두 봐야 한다.

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

이 두 명령으로 메타데이터가 제대로 생성되었는지, 실제 페이지에 반영되었는지 확인할 수 있다.

sitemap과 RSS 확인하기

Next.js에서 SEO 관련 이슈는 복합적이다. canonical 태그, sitemap, RSS 피드 등이 모두 동기화되어야 한다.

• 먼저 볼 것: 빌드 로그에서 SEO 관련 파일 생성 메시지
• 같이 비교할 것: 정상일 때의 HTML head 구조
• 기록해둘 것: 메타데이터 설정, 빌드 환경, 배포 버전

배포 후 실제 확인하기

메타데이터는 한 번 배포한 후에는 캐시의 영향을 받을 수 있다. 실제 페이지에서 올바른 데이터가 보이는지 확인하는 것이 중요하다.

1. 로컬 빌드 결과를 확인한다
2. 빌드 로그에서 에러나 경고를 찾는다
3. 공개 페이지에서 og:image 등의 메타데이터가 올바르게 보이는지 최종 확인한다

작은 확인이 모여 속도를 낸다

Next.js 메타데이터 문제는 재설정하는 데 시간이 걸린다. 이전에 어떤 값이 달라졌는지 기록해두면 다음 문제를 훨씬 짧게 처리할 수 있다.