배포 후 검색 엔진 크롤러가 내용을 못 읽을 때

웹사이트를 배포한 후 검색 결과에 페이지가 제대로 표시되지 않는 경우가 있다. 특히 og:title, og:description 같은 메타데이터가 빈 채로 나타나거나, 크롤러가 페이지의 실제 내용을 읽지 못하는 경우다. 이런 상황에서 확인해야 할 부분들을 정리했다.

HTML head 확인

가장 먼저 할 일은 실제 페이지의 메타데이터를 확인하는 것이다.

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

이 명령으로 크롤러가 읽게 될 정보를 확인할 수 있다. 만약 og:image 태그가 없거나 빈 상태면, SNS에서 공유할 때 썸네일이 안 나타난다.

Next.js 빌드 설정 확인

메타데이터가 정상적으로 생성되는지 빌드 로그를 확인한다.

npm run build

빌드 중 "Generating static pages" 부분을 자세히 보면, 어느 페이지가 정상 생성되고 어디가 문제인지 알 수 있다.

동적 메타데이터 생성

Next.js 13+에서는 generateMetadata 함수로 동적으로 메타데이터를 생성한다. 만약 API 호출이 실패하거나 느리면, 메타데이터 생성도 실패할 수 있다.

• API 엔드포인트가 정상 작동하는지 확인
• 필요한 환경 변수가 배포 환경에 설정되어 있는지 확인
• 빌드 중 API 응답 시간 확인

마지막 확인

1. 페이지를 새로고침하고 같은 메타데이터가 나타나는지 확인
2. 구글 Search Console에서 URL 검사 수행
3. Robots.txt와 sitemap.xml이 제대로 설정되어 있는지 확인

크롤러가 내용을 읽지 못하면 검색 순위에도 영향을 주니, 배포 직후에는 항상 이 부분을 확인하는 습관이 중요하다.