turin.blog
← 전체 글로 돌아가기

Next.js

Next.js 배포 후 SEO 메타데이터 확인하기

로컬에서 봤던 제목과 설명이 배포 후 제대로 나타나지 않을 때 확인할 것들.

·1분 읽기

Next.js에서 SEO 메타데이터는 서버 사이드 렌더링의 핵심이다. 로컬에서는 완벽해도 배포 환경에서는 다르게 보인다. 특히 OG 이미지나 canonical URL이 잘못되면 소셜 공유가 엉망이 된다.

빌드 로그 확인

npm run build

빌드 중에 메타데이터 생성 과정이 에러나지 않았는지 확인한다. 만약 외부 API 호출이 실패했다면 메타데이터가 기본값으로 나온다.

배포된 페이지 검사

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

실제로 배포된 HTML을 보면 메타데이터가 제대로 렌더링됐는지 확인할 수 있다. 브라우저에서 "페이지 소스 보기"를 해도 된다.

메타데이터 체크 항목

title과 description

HTML <head>의 <title>과 <meta name="description">이 제대로 있는가.

OG 이미지

<meta property="og:image" content="https://example.com/og-image.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />

OG 이미지 URL이 절대 경로인가? 상대 경로면 소셜 미디어에서 이미지를 못 찾는다.

Canonical URL

<link rel="canonical" href="https://example.com/article/my-post" />

Canonical URL이 정확한가? 특히 staging/preview 환경에서 배포할 때 도메인이 달라지면, 검색 엔진이 중복 콘텐츠로 판단한다.

sitemap과 RSS

/sitemap.xml과 /feed.xml (또는 RSS URL)이 제대로 생성되고 배포됐는가. 이 파일들이 없으면 검색 엔진이 새 페이지를 못 찾는다.

환경 변수 확인

OG 이미지, canonical URL, 도메인이 환경에 따라 다를 수 있다.

echo $NEXT_PUBLIC_BASE_URL
echo $NEXT_PUBLIC_OG_IMAGE_DOMAIN

배포 환경의 .env.production에서 정확한 도메인으로 설정되어 있는가?

검색 엔진 검사

Google Search Console이나 페이스북 공유 디버거에서 실제로 메타데이터를 어떻게 인식하는지 확인한다.

이곳들에서 URL을 입력하면, 검색 엔진/소셜 미디어가 실제로 보는 메타데이터를 확인할 수 있다.

배포 전 확인 체크리스트

  1. 빌드 로그에 에러가 없는지 확인
  2. npm run build 후 .next/server/pages-manifest.json 확인
  3. 배포된 페이지의 HTML 메타데이터 확인
  4. OG 이미지 URL이 절대 경로인지 확인
  5. Canonical URL이 배포 도메인과 일치하는지 확인
  6. Sitemap과 RSS가 생성됐는지 확인
  7. Google/페이스북 디버거로 최종 검사

SEO는 배포 후에도 계속 확인이 필요하다. 검색 결과에 이상하게 보이는 순간 위 체크리스트를 돌려보면 대부분의 문제를 찾을 수 있다.