Next.js Server Component가 SEO를 먹지 않을 때

Next.js Server Component를 사용해서 SEO를 개선하려 했는데, 실제로 크롤러가 내용을 읽지 못한다면 매우 답답한 상황이다. 로컬에서는 완벽하게 작동했는데 배포 후 문제가 터지는 경우가 많다.

핵심은 확인한 값과 바꾼 값을 따로 남기는 것이다. 혼자 개발할수록 이런 습관이 필요하다.

검색해서 들어온 상황이면 먼저 재현 조건을 잡아야 한다

SEO 문제는 원인이 명확하지 않은 경우가 많다. 특정 페이지에서만 발생하는지, 모든 페이지에서 발생하는지, 특정 크롤러에서만 발생하는지 파악해야 한다.

첫 번째 단서: 모바일 화면에서 보이는 내용

Server Component가 제대로 렌더링되었다면 모바일 화면에서도 메타 정보가 보여야 한다. 브라우저 개발자 도구의 Elements 탭에서 head 태그를 확인한다.

npm run build
# 브라우저에서 모바일 폭과 키보드 입력 흐름을 확인한다

프로덕션 빌드 후 실제 렌더링 결과를 확인한다. og:title, og:description 같은 메타 태그가 제대로 있는지 본다.

두 번째 단서: 이벤트 흐름 추적

Server Component에서 동적으로 메타 정보를 생성하는 경우, 특정 조건에서만 실패할 수 있다. 예를 들어 데이터 로딩 순서나 캐시 설정에 따라 다를 수 있다.

직접 확인해보기

Google Search Console에 URL을 직접 등록하고, Google이 이 페이지를 어떻게 본다고 생각하는지 확인한다. 메타 정보를 제대로 읽었는지, 렌더링에 실패했는지 알 수 있다.

수정 후 확인

Server Component의 메타 정보 생성 로직을 수정했다면, 반드시 프로덕션 빌드 후에 테스트한다. 로컬에서 작동한다고 해서 배포 후에도 작동하는 건 아니다.

체크리스트

1. 원래 증상이 같은 조건에서 다시 나는지 확인한다
2. 로그나 응답에서 바뀐 부분을 한 줄로 설명해본다
3. 공개 화면에서 메타 정보가 보이는지 확인한다
4. Google Search Console이나 다른 크롤러 도구로 검증한다
5. 이전 버전과 현재 버전의 Server Component 로직을 비교한다

다음에 비슷한 증상이 나오면 먼저 현재 값을 기록하고, 하나씩 비교하면 된다. 관련 기록을 짧게라도 남겨두면 다음 확인이 훨씬 빨라진다.