Next.js 배포 후 SEO 메타데이터가 안 보일 때

Next.js로 블로그나 마케팅 사이트를 만들면, SEO는 정말 중요하다. 로컬에서는 다 잘 보이는데, 실제 배포 환경에서 크롤러가 제대로 읽지 못하는 경우가 자주 생긴다.

먼저 실제 HTML을 확인하기

SEO 문제는 로그나 콘솔 에러로는 안 보인다. 브라우저에서 직접 HTML을 받아서 메타데이터가 있는지 확인해야 한다. 중요한 건 head 태그 안의 <meta>, <title>, <link rel="canonical"> 같은 것들이 실제로 있는지 보는 것이다.

• 먼저 볼 값: 페이지의 HTML head 섹션
• 같이 비교할 값: 로컬 개발 환경의 같은 페이지
• 기록해둘 것: 빌드 로그, 배포 환경 설정, 메타데이터 값

curl로 빠르게 확인하기

브라우저에서 페이지를 열면 JavaScript 이후의 상태를 보게 되는데, 크롤러는 초기 HTML만 본다. 따라서 curl이나 wget으로 받은 원본 HTML을 확인해야 한다.

# 페이지의 메타데이터 확인
curl -s https://example.com | grep -Ei 'title|description|canonical|og:|twitter:'

# 전체 head 섹션 보기
curl -s https://example.com | head -50

빌드 시점의 환경 변수 확인

Next.js에서 메타데이터가 동적으로 생성될 때는 빌드 시점의 환경 변수가 중요하다. 배포 환경의 API 엔드포인트, 도메인 URL 같은 게 로컬과 다르면 메타데이터도 달라진다. 빌드 로그를 보면서 어떤 값들이 포함되었는지 확인한다.

# 빌드 로그 확인
NEXT_PUBLIC_SITE_URL=https://example.com npm run build

배포 직후 한 번 더 빌드하기

때론 캐시나 이전 빌드 결과가 남아있어서 최신 메타데이터가 배포되지 않을 수 있다. 배포 후에 다시 한 번 빌드하거나, 캐시를 명시적으로 지우는 게 좋다.

sitemap과 RSS도 함께 확인

SEO를 위해 sitemap.xml과 RSS 피드도 메타데이터처럼 중요하다. 크롤러가 제대로 따라갈 수 있도록 이 파일들도 배포되었는지 확인한다. 그리고 그 안의 URL들이 정확한지도 본다.

# sitemap 확인
curl -s https://example.com/sitemap.xml | head -20

# RSS 피드 확인
curl -s https://example.com/feed.xml | head -20

결과적으로, SEO 문제는 눈에 띄지 않기 때문에 체계적으로 접근하는 게 중요하다. HTML 원본을 먼저 확인하고, 그다음에 빌드 환경과 배포 설정을 맞춰가면서 진행하면 대부분의 문제를 해결할 수 있다.