[문서] Next.js App Directory에서 Canonical 태그 작성

Canonical이란?

Canonical(정식 URL)은 검색 엔진에 여러 유사한 페이지 중 "원본" 또는 "선호되는" 버전을 알려주는 HTML 요소입니다. 이는 중복 콘텐츠 문제를 해결하고 검색 엔진 최적화(SEO)를 개선하는 데 중요한 역할을 합니다.

검색 엔진에 우선순위가 높은 URL을 알려줍니다.
여러 유사한 페이지의 SEO 가치를 하나로 통합합니다.
URL 파라미터나 세션 ID로 인한 중복 콘텐츠 문제를 해결합니다.

모든 페이지에서 설정해야 하는가?

동일한 콘텐츠가 여러 URL로 접근 가능한 경우
모바일과 데스크톱 버전의 페이지가 별도로 존재하는 경우
제품 페이지에서 필터링이나 정렬 옵션으로 인해 여러 URL이 생성되는 경우
프린트 버전 페이지가 별도로 존재하는 경우

Canonical 태그를 사용하면 SEO에 도움이 될 수 있으므로, 가능하면 모든 페이지에 설정하는 것을 권장합니다.

Next.js App Directory에서 Canonical 설정하기

Next.js App Directory에서는 메타데이터 API를 사용하여 Canonical URL을 쉽게 설정할 수 있습니다.

1. 정적 메타데이터 사용

정적 페이지의 경우, layout.tsx 또는 page.tsx 파일에서 직접 메타데이터를 정의할 수 있습니다.

import type { Metadata } from 'next'

export const metadata: Metadata = {
  title: '페이지 제목',
  description: '페이지 설명',
  canonical: 'https://kakao.gg/canonical-article',
}

export default function Page() {
  // 페이지 컴포넌트
}

2. 동적 메타데이터 생성

동적 라우팅을 사용하는 페이지의 경우, generateMetadata 함수를 사용하여 동적으로 Canonical URL을 설정할 수 있습니다.

import type { Metadata } from 'next'

type Props = {
  params: { id: string }
  searchParams: { [key: string]: string | string[] | undefined }
}

export async function generateMetadata(
  { params, searchParams }: Props,
  parent: ResolvingMetadata
): Promise<Metadata> {
  const id = params.id

  // 데이터 fetching 로직
  const product = await fetchProduct(id)

  return {
    title: product.title,
    description: product.description,
    canonical: `https://kakao.gg/frontend/${id}`,
  }
}

export default function Page({ params, searchParams }: Props) {
  // 페이지 컴포넌트
}

주의사항

자기 참조 Canonical: 페이지의 Canonical URL은 항상 해당 페이지 자신을 가리켜야 합니다.
절대 URL 사용: Canonical URL은 항상 절대 URL을 사용해야 합니다.
일관성 유지: 한 번 설정한 Canonical URL은 가능한 한 변경하지 않는 것이 좋습니다.
HTTPS 사용하기.

Future Engineering