Next.js
Next.js 동적 렌더링이 제대로 되지 않을 때 확인할 것
메타데이터가 SEO에 반영되지 않거나 canonical이 잘못되었을 때 단계별로 확인하는 방법입니다.
Next.js에서 동적 페이지를 만들 때 로컬에선 잘 보이는데 배포 후에 검색 엔진에 제대로 반영되지 않는 경우가 있다. 문제는 SSR(Server-Side Rendering) 중에 메타데이터가 제대로 생성되지 않은 것일 수 있다.
먼저 공개 URL에서 확인
배포된 페이지의 HTML 헤더를 직접 본다. 브라우저에서 "검사"로 보는 것 아니라, 실제 서버에서 전달하는 HTML을 확인해야 한다.
curl -s https://example.com | grep -Ei 'title|description|canonical|og:|twitter:'
이 명령어로 title, description, canonical 태그와 Open Graph, Twitter Card 메타데이터가 제대로 들어가 있는지 본다.
Next.js 메타데이터 설정 확인
동적 페이지라면 메타데이터 생성 로직이 올바른지 확인한다. generateMetadata 함수나 Metadata 객체가 제대로 반환되고 있는지 본다. params가 제대로 전달되는지, 데이터 페칭이 성공하는지 점검한다.
빌드와 배포 상태
npm run build
빌드 중에 경고나 에러가 없었는지 확인한다. 특히 동적 라우팅 관련 메시지가 있는지 본다.
canonical 태그 확인
canonical 태그가 누락되었거나 잘못된 URL을 가리키는 경우가 많다. 각 페이지에서 canonical이 자기 자신을 가리키는지 확인한다.
실제 증상과 원인 매칭
검색 엔진에 크롤링되지 않는 것, 이미지 미리보기가 안 뜨는 것, 제목이 이상한 것 등 증상에 따라 원인이 다르다. 증상을 정확히 파악한 후 관련 메타데이터를 확인한다.
마지막으로 수정 후 배포했다면, 검색 엔진이 다시 크롤링할 때까지 기다려야 한다. Google Search Console에서 수동으로 재크롤링을 요청할 수도 있다.