Next.js에서 메타데이터와 canonical이 제대로 렌더링되는지 확인하기

Next.js로 만든 웹사이트를 배포한 후 검색 엔진이나 소셜 미디어에서 제대로 미리보기가 나오지 않으면, 메타데이터 렌더링 문제일 가능성이 높다.

로컬 개발 환경에서는 잘 보이던 OG 이미지나 설명이 배포 후에는 안 나타날 수 있다. 이런 경우는 몇 가지 확인 포인트가 있다.

curl로 렌더링된 HTML 확인하기

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

curl로 페이지의 HTML을 받은 후, grep으로 필요한 메타 태그들만 필터링한다. 출력 결과로 다음을 확인한다:

• <title>: 페이지 제목
• <meta name="description">: 검색 결과에 표시될 설명
• <link rel="canonical">: 정식 URL (SEO 중복 제거용)
• <meta property="og:title">, <meta property="og:image">: 소셜 미디어 공유용 메타데이터
• <meta name="twitter:card">, <meta name="twitter:image">: 트위터 공유용

빌드 후 정적 사이트 생성 확인

Next.js가 정적 사이트 생성(SSG)을 사용한다면, 빌드 단계에서 메타데이터가 제대로 생성됐는지 확인해야 한다.

npm run build

빌드가 완료되면, .next/server/pages 디렉토리의 HTML 파일을 직접 열어서 필요한 메타 태그가 있는지 확인한다. 만약 없다면, getStaticProps나 metadata 객체의 설정을 점검해야 한다.

동적 라우트에서 메타데이터 설정하기

동적 라우트(/posts/[id] 형태)에서는 각 페이지마다 다른 메타데이터를 생성해야 한다.

// app/posts/[id]/page.tsx
export async function generateMetadata({ params }) {
  const post = await fetchPost(params.id);
  return {
    title: post.title,
    description: post.excerpt,
    openGraph: {
      title: post.title,
      description: post.excerpt,
      images: [post.ogImage],
    },
  };
}

이렇게 설정하면, Next.js가 빌드할 때 각 포스트별로 고유한 메타데이터를 생성한다.

로컬과 배포 환경 비교

로컬에서는 npm run dev로 개발 서버를 실행할 때와 npm run build 후 빌드 결과물을 실행할 때 메타데이터가 다르게 렌더링될 수 있다.

확인 방법:

1. 로컬 npm run build && npm run start로 프로덕션 빌드 실행
2. curl로 메타 태그 확인
3. 배포된 사이트에서 같은 curl 명령 실행
4. 결과 비교

체크리스트

1. 빌드 로그에서 에러나 경고 메시지 확인
2. curl로 실제 HTML에 필요한 메타 태그가 포함되어 있는지 확인
3. canonical URL이 올바른 도메인을 가리키는지 확인
4. OG 이미지 경로가 절대 경로(https://로 시작)인지 확인
5. 동적 라우트라면 각 페이지마다 다른 메타데이터가 생성되었는지 몇 개 샘플로 확인

이런 식으로 배포 전과 배포 후에 각각 한 번씩 확인하면, SEO나 소셜 미디어 공유 문제를 예방할 수 있다.