Next.js seed 데이터 문제: 검색엔진 크롤러가 보는 페이지

검색해서 들어온 사용자에게만 페이지가 이상하게 보인다면, SEO 렌더링 과정에서 뭔가 달라지는 게 있다는 뜻이다. seed 데이터가 제대로 주입되지 않았을 가능성이 크다.

공개 URL에서 실제 HTML 보기

가장 빠른 방법은 배포된 URL의 HTML 소스를 직접 확인하는 것이다:

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

이 결과를 로컬에서 npm run dev로 본 것과 비교한다. 뭐가 다른지 한눈에 보인다.

빌드 로그 확인

local에서는 문제가 없는데 배포 환경에서 문제가 난다면, 빌드 과정에서 뭔가 다르게 동작한다는 뜻이다:

npm run build

빌드 과정에서 seed 데이터를 읽는 부분이 제대로 실행되는지 확인한다. 환경 변수가 설정되었는지, 파일이 올바른 경로에 있는지 체크해야 한다.

HTML head 태그 확인

canonical 태그, og:image, description 같은 메타데이터가 제대로 들어갔는지 보자. seed에서 데이터를 가져올 때 null 체크가 제대로 되어 있는지 확인한다.

동적 경로를 쓰는 페이지라면 generateMetadata 함수나 getServerSideProps가 seed 데이터를 제대로 받아오는지 봐야 한다.

한 가지씩 확인하기

한 번에 여러 설정을 바꾸지 말자. seed 데이터 형식을 바꿨다면, 그 다음엔 메타데이터를 수정하는 식으로 한 가지만 바꾼다. 각 단계에서 빌드가 성공하고, 결과가 어떻게 바뀌는지 기록한다.

재발 방지 기록

나중에 비슷한 문제가 생기면 이번에 기록해둔 정보를 쓸 수 있다. 언제 무엇을 바꿨을 때 문제가 생겼는지, 빌드 로그에 뭐가 나타났는지, 실제 HTML이 어떻게 바뀌었는지 정리해두자.

작은 기록이 모이면 다음 확인이 훨씬 빨라진다.