[문서] 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) {
  // 페이지 컴포넌트
}

주의사항

1. 자기 참조 Canonical: 페이지의 Canonical URL은 항상 해당 페이지 자신을 가리켜야 합니다.

2. 절대 URL 사용: Canonical URL은 항상 절대 URL을 사용해야 합니다.

3. 일관성 유지: 한 번 설정한 Canonical URL은 가능한 한 변경하지 않는 것이 좋습니다.

4. HTTPS 사용하기.