Next.js에서 메타데이터 로그를 보고 SEO 문제를 진단하기

운영 중에는 작은 이상 신호도 빨리 분리해서 봐야 한다. 웹 렌더링 전체 흐름에서 원인을 좁혀야 한다.

사용자가 보는 모습과 개발자가 보는 신호

첫 단계에서는 사용자가 보는 것과 개발자 도구에서 보는 것의 차이를 파악해야 한다.

먼저 볼 값: 빌드 로그

• Next.js 빌드 중에 경고가 있나?
• 메타데이터가 제대로 생성되나?
• 로컬과 배포 환경에서 다르게 보이나?

canonical과 환경 차이 확인

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

메타데이터 문제는 로컬과 운영의 차이가 자주 숨어 있다. 환경 차이까지 함께 적어두면 원인 추적이 쉬워진다.

같이 비교할 값:

• 정상일 때의 웹 렌더링 상태
• 빌드 타임의 메타데이터
• 런타임의 메타데이터

빌드 로그와 검증 루틴

웹 렌더링 작업에서는 정상 상태를 먼저 정해두는 게 좋다. 그래야 canonical 결과가 맞는지 아닌지를 빠르게 판단할 수 있다.

남겨둘 기록:

• 명령 출력
• 응답 코드
• 수정한 설정

검증 단계

1. 원래 증상이 같은 조건에서 다시 나는지 확인한다.
2. 로그나 응답에서 바뀐 부분을 한 줄로 설명한다.
3. 공개 화면, 빌드 결과, 실제 요청 중 하나로 마지막 확인을 한다.

작은 확인을 남겨두면 다음 문제를 훨씬 짧게 처리할 수 있다. 관련 기록을 짧게라도 남겨두면 다음 확인이 훨씬 빨라진다.