Next.js 메타데이터 설정, SEO와 소셜 공유 이미지가 제대로 나오게 하기

Next.js로 블로그나 서비스를 만들 때 메타데이터 설정은 정말 중요하다. 검색 결과에 제목과 설명이 제대로 나오는지, SNS에서 공유할 때 이미지가 제대로 나오는지가 전부다.

혼자 개발할수록 확인한 값과 바꾼 값을 따로 남기는 습관이 필요하다.

메타데이터 설정을 한 줄로 정리하기

Next.js의 웹 렌더링 문제는 로컬과 운영의 차이가 자주 숨어 있다. 환경 차이까지 같이 적어두면 원인 추적이 훨씬 쉽다.

확인해야 할 것:

• HTML head 태그: 제목, 설명, OG 이미지가 있는지
• 정상일 때의 상태: 다른 페이지와는 뭐가 다른지
• 마지막 수정 파일: 메타데이터 설정 부분에서 뭘 바꿨는지

서버에서 메타데이터를 확인하기

Next.js 문제는 화면만 보고 판단하면 놓치는 값이 많다.

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

실제 배포된 서버에서 curl로 확인해야 제대로 된 HTML을 볼 수 있다. 로컬 개발 서버와 프로덕션 빌드는 메타데이터 생성 방식이 다를 수 있다.

브라우저와 검색 엔진의 관점에서 확인하기

메타데이터는 여러 곳에서 사용된다:

• 검색 엔진 (Google, Naver)
• SNS 공유 (카톡, 페이스북, 트위터)
• 메신저 프리뷰
• 북마크

각각에서 제대로 보이는지 확인해야 한다.

1. 원래 증상이 같은 조건에서 다시 나오는지 확인한다.
2. 로그와 응답을 보고 뭐가 다른지 정리한다.
3. 배포된 화면, 빌드 결과, 실제 서버의 HTML을 확인한다.

정리하며

메타데이터는 결과가 바뀐 이유를 로그와 응답으로 설명할 수 있으면 충분히 정리된 것이다. 블로그나 서비스 페이지를 배포할 때마다 메타데이터 설정을 기록해두면 다음 번이 훨씬 쉽다.