검색 노출이 안 될 때 Next.js 메타데이터 확인하기

블로그 글을 배포했는데 검색 엔진에 뜨지 않거나, SNS에서 카드가 이상하게 보이는 일이 생긴다. 이럴 때 sitemap.xml이나 robots.txt부터 찾는 경우가 많은데, 실제 원인은 메타데이터에 숨어 있을 수 있다.

먼저 HTML head를 직접 확인한다

브라우저에서 페이지를 열고 개발자 도구로 head 섹션을 확인하거나, curl로 HTML을 다운받아서 메타 태그를 살펴본다.

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

canonical, og:url, og:title, og:description, twitter:card 같은 태그가 제대로 있는지 확인한다. 특히 canonical이 자기 자신을 가리키지 않고 다른 URL을 가리키는 경우, 검색 엔진이 이 페이지를 부족한 버전으로 취급할 수 있다.

빌드 결과도 함께 검토한다

개발 환경에서는 동적으로 메타데이터가 생성되지만, 빌드 후 정적 파일에서는 그렇지 않을 수 있다.

npm run build

Next.js 빌드 로그에서 경고가 없는지 확인하고, 가능하면 .next/server 디렉토리의 실제 HTML 파일을 열어서 메타 태그가 들어 있는지 확인한다.

라우팅과 정적 생성을 다시 확인한다

Dynamic Routes를 사용한다면, generateMetadata 함수가 모든 경로에 대해 실행되는지 확인해야 한다. 특정 페이지만 메타데이터가 빠진다면, 라우팅 설정이나 ISR 타이밍을 의심해볼 만하다.

배포 후 실제 페이지에서 확인한다

로컬 미리보기가 아닌, 실제 배포된 URL에서 curl을 실행해서 생산 환경의 HTML을 확인하는 단계가 필수다. CDN 캐싱이나 배포 지연으로 인해 의도한 버전이 아직 적용되지 않았을 수도 있기 때문이다.

메타데이터는 검색 엔진뿐 아니라 사용자 경험에도 직결되므로, 작은 변경이라도 배포 후 반드시 확인하는 습관을 들이는 게 좋다.