Next.js에서 SEO 메타데이터가 제대로 반영되지 않을 때

검색 엔진 크롤러가 페이지를 읽지 못한다면, 먼저 로컬에서 HTML을 직접 확인하는 것이 빠르다.

핵심은 빌드가 제대로 됐는지, 메타데이터가 HTML head에 제대로 들어가 있는지 확인하는 것이다. 로그나 응답에서 눈으로 확인할 수 있는 값부터 모은다.

브라우저에서 직접 확인하기

배포된 페이지의 HTML을 다운로드하고, title, description, canonical, og:, twitter: 태그가 있는지 확인한다.

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

메타 태그가 없거나 값이 비어있다면 Next.js 메타데이터 설정을 다시 봐야 한다.

환경별 차이 파악

로컬에서는 메타데이터가 제대로 생성되지만, 배포 환경에서는 다를 수 있다. 환경변수, 빌드 변수가 영향을 미칠 수 있다.

• 먼저 볼 것: 빌드 로그와 HTML head
• 비교할 것: 정상일 때의 메타데이터
• 기록할 것: 명령어, 응답 상태, 수정한 설정

빌드 로그 읽기

빌드 중에 경고나 에러가 있는지 확인한다. 특히 동적 메타데이터를 생성하는 부분에서 에러가 나면 크롤러가 읽을 것이 없다.

빌드가 성공했다면, 다음으로 생성된 HTML이 맞는지 확인한다.

검증 루틴

1. 페이지를 방문했을 때 메타데이터가 실제로 HTML에 들어가 있나 확인한다.
2. 로그에서 오류가 있는지 확인한다.
3. 검색 엔진 미리보기 도구로 최종 확인한다.

메타데이터는 한 번 설정하면 계속 반복된다. 이번 확인을 기록해두면 다음에 비슷한 문제가 생길 때 훨씬 빠르게 해결할 수 있다.