Next.js 배포 전에 SEO 메타데이터 확인하기

로컬과 배포 환경은 다르다

로컬에서 괜찮았던 설정도 배포 환경에서는 다르게 보일 수 있다. 특히 SEO 메타데이터는 배포 후에만 제대로 확인할 수 있다.

문제의 경계를 먼저 파악하자

웹 렌더링의 흐름을 먼저 끊어서 봐야 한다. 메타데이터가 애매하면 다른 부분을 고쳐도 결과가 바뀌지 않을 수 있다.

로컬과 운영 환경 비교하기

배포된 환경과 로컬 환경에서 뭐가 다른지 체계적으로 비교해야 한다.

먼저 봐야 할 것:

• 사이트맵과 RSS
• 정상일 때의 메타데이터
• 빌드 로그

메타데이터 확인하기

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

HTML의 head 부분에서 제목, 설명, canonical 링크, Open Graph 정보, Twitter 카드 정보가 제대로 나오는지 확인한다.

배포 전 확인 체크리스트

1. 로컬과 배포 환경의 메타데이터를 비교한다
2. 빌드 로그에서 에러나 경고를 확인한다
3. 공개 사이트에서 HTML 구조를 확인한다

위험한 수정은 피하자

HTML head 부분부터 확인하면 불필요한 변경을 줄일 수 있다. 작은 확인이 쌓이면 원인 후보가 자연스럽게 줄어든다.

배포 후 체크리스트

배포가 완료되면 실제 공개 URL에서 모든 메타데이터가 제대로 나오는지 한번 더 확인한다. 마지막 확인이 다음 배포를 훨씬 안전하게 만든다.