Next.js 블로그: SEO 메타데이터 제대로 확인하기

Next.js 블로그를 운영하다 보면 SEO 메타데이터가 예상과 다르게 렌더링되는 문제를 마주친다. 대부분 로컬에선 잘 보이는데 실제 배포 환경에서 canonical, og 태그, 페이지 제목이 제대로 나오지 않는 경우다.

원인은 여러 가지인데, 문제를 빨리 찾으려면 무엇부터 확인해야 할지 순서를 정해두는 게 도움된다.

먼저 원본 HTML 확인

가장 먼저 할 일은 브라우저 개발자 도구 말고 원본 HTML을 직접 보는 것이다. 빌드된 페이지가 실제로 메타데이터를 포함하는지 확인해야 한다.

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

curl 결과에서 원하는 태그들이 보이면 SEO는 정상이고, 없으면 빌드 또는 렌더링 단계에서 문제가 생긴 것이다.

빌드 로그 확인

Next.js 빌드를 다시 실행해서 경고나 에러가 있는지 본다.

npm run build

특히 동적 메타데이터를 만드는 부분(예: generateMetadata() 함수)에서 에러가 나는지, 아니면 상수로 정의된 메타데이터가 빌드에 포함되지 않는지 확인한다.

localhost와 배포 환경 비교

로컬 개발 서버에서는 어떻게 보이는지 확인한다.

npm run dev
curl -s http://localhost:3000/post/my-article | grep -Ei 'og:'

로컬에서 나오는 메타데이터가 배포 후 사라졌다면, 빌드 설정이나 환경변수 차이 때문일 가능성이 높다.

페이지 설정 다시 확인

metadata 객체나 og 태그 생성 함수의 로직을 다시 읽어본다. 특히 조건부로 렌더링되는 부분이 있다면, 배포 환경의 조건을 만족하는지 확인한다.

캐시 무효화

CDN이나 브라우저 캐시 때문에 오래된 버전이 보일 수도 있다.

# 헤더를 확인해서 캐시 시간을 본다
curl -sI https://example.com/post/my-article | grep -i cache

메타데이터를 수정했다면, 충분한 시간이 지난 후 다시 확인해본다.

재배포 전 확인

확인 순서를 정리해두면 비슷한 문제가 나올 때 훨씬 빠르게 대응할 수 있다.

1. curl로 원본 HTML의 메타데이터 확인
2. 빌드 로그에서 경고와 에러 확인
3. 로컬과 배포 버전 비교
4. 메타데이터 생성 로직 재검토
5. 필요하면 캐시 무효화 후 재확인