Next.js SEO 메타데이터 확인하는 흐름

Next.js 작업을 하다 보면 개발 환경에선 문제가 없는데 배포 후에 갑자기 메타데이터가 제대로 반영되지 않는 경우가 있다.

먼저 확인할 것들

HTML head를 직접 확인하는 게 가장 빠르다. 배포된 페이지의 source를 보면 open graph와 twitter 카드 메타데이터가 제대로 들어가 있는지 확인할 수 있다.

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

sitemap과 RSS도 함께 확인한다. 이 둘이 정상이면 검색 엔진 크롤러는 대체로 문제없이 콘텐츠를 수집한다.

빌드 결과 확인

메타데이터 문제는 보통 빌드 단계에서 발생한다. Next.js가 정적 생성(SSG)을 제대로 수행했는지 확인해야 한다.

npm run build

빌드 로그를 보면 각 페이지가 정상적으로 pre-render되었는지 알 수 있다. 만약 특정 페이지가 동적 라우팅으로 표시되면 getStaticParams가 제대로 구현되지 않은 걸 의심해봐야 한다.

단계별 확인

작은 것부터 확인하는 게 시간을 절약한다.

1. 로컬에서 개발 서버로 확인
2. 빌드 후 프로덕션 빌드 결과 확인
3. 배포 후 실제 URL에서 최종 확인

각 단계에서 메타데이터 변화를 기록하면 문제 원인을 훨씬 빨리 찾을 수 있다.