Next.js

Next.js에서 메타데이터가 제대로 나오지 않을 때

HTML head 태그의 메타데이터, canonical, OG 태그가 빌드 후 실제 페이지에 반영되는지 먼저 확인하자.

2026년 6월 24일·1분 읽기

Next.js로 만든 블로그나 서비스를 배포했는데 카카오톡으로 공유할 때 썸네일이 안 나온다거나, SEO 검색 결과가 이상한 경우가 있다. 이런 문제는 보통 HTML의 head 태그에 있는 메타데이터가 제대로 생성되지 않았다는 뜻이다.

배포된 페이지를 직접 확인하자

로컬에서는 잘 보이지만 배포하면 문제가 생기는 경우가 많다. 직접 배포된 서버의 HTML을 다운로드 받아서 metadata 태그를 확인해야 한다.

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

HTML에 og:image, og:description 같은 태그가 제대로 들어 있는지 확인한다. 없으면 Next.js 메타데이터 설정을 다시 봐야 한다.

Next.js 버전에 따라 메타데이터를 정의하는 방식이 다르다. 13 이상에서는 metadata 객체를 export하고, 그 이전 버전에서는 next/head를 쓴다.

버전을 확인하고 맞는 방식으로 정의했는지 확인한다.

npm run build

빌드 로그에서 경고나 오류가 없는지 확인한다. 메타데이터 정의에 문제가 있으면 빌드 시점에 드러날 수 있다.

페이지가 동적이라면(예: 상품 상세 페이지, 블로그 글) 메타데이터도 동적으로 생성해야 한다. 데이터베이스에서 제목과 설명을 가져와 메타데이터에 넣는데, 이 과정에서 실수하기 쉽다.

각 페이지의 메타데이터가 개별적으로 설정되는지 확인한다. 모든 페이지가 같은 설명을 가지고 있다면 뭔가 잘못됐다는 뜻이다.

SEO를 위해서는 sitemap과 robots.txt도 필요하다. Next.js 13+ 에서는 API routes를 통해 동적으로 생성할 수 있다.

curl -s https://example.com/robots.txt
curl -s https://example.com/sitemap.xml | head -20

Google Search Console에 등록하기 전에 이 파일들이 제대로 생성되고 접근 가능한지 확인해야 한다.

SNS에서 공유할 때 나오는 썸네일 이미지도 동적으로 생성할 수 있다. Next.js 13+의 imageResponse API를 쓰면 각 페이지마다 다른 이미지를 생성할 수 있다.

캐싱을 고려해야 하므로, 동적 생성 이미지가 제대로 캐싱되는지도 확인하자.