Canonical 태그란 무엇인가?

Canonical 태그는 HTML 문서의 <head> 섹션에 위치하는 특수한 태그로, 검색 엔진에게 중복된 콘텐츠 문제를 해결하는 데 사용됩니다. 여러 URL이 동일한 또는 매우 유사한 콘텐츠를 가지고 있을 때, 중복 콘텐츠가 아님을 설명하고, 원본으로 간주하라고 검색 엔진에 알려줍니다.

사용법

Canonical 태그의 기본 사용법은 다음과 같습니다.

<Head>태그 안에서 중복된 경로를 개별 URL이 모두 원본임을 알려줄 수 있습니다.

태그를 <Head> 사이에 넣어주면 됩니다. 원본 URL 지정을 하면 됩니다.

해당 기술 블로그에서는 모든 페이지를 원본 페이지의 URL로 지정했습니다.

_app.js

const App = ({ Component, pageProps: { session, ...pageProps } }) => {
    const canonicalUrl = `https://kakao.gg${router.asPath}`

    <Head>
        <title>{`${pageProps.title || ''} KAKAO.GG IT Tech Blog`}</title>
        <meta
        name="description"
        content={
            truncatedDescription ||
            'KAKAO.GG IT Tech Blog에서는 최신 IT 소식, 프로그래밍, 웹 개발, 인공지능 등 다양한 기술 주제를 다룹니다. 각종 팁, 튜토리얼, 인터뷰를 통해 여러분의 기술 역량을 향상시켜 보세요.'
        }
        />
        <link rel="canonical" href={canonicalUrl} />
    </Head>
}

주의 사항

보다 심화적인 내용은 별도로 다루겠지만, 정확한 URL 사용이 현재 내용에서는 가장 중요합니다.

  1. 정확한 URL 사용: Canonical 태그에 지정된 URL은 접근 가능하고 정확한 페이지를 가리켜야 합니다.

  2. 중복 제거: 한 페이지에 여러 canonical 태그를 사용하지 마세요. 이는 혼란을 일으킬 수 있습니다.

  3. 자기 참조: 페이지에 중복이 없는 경우에도 자기 참조하는 canonical 태그를 추가하는 것이 좋습니다.

  4. 크로스 도메인 사용 주의: 다른 도메인으로의 canonical 태그는 주의해서 사용해야 합니다. 이는 콘텐츠 소유권이 다를 수 있기 때문입니다.

  5. 검색 엔진 지침 준수: 각 검색 엔진의 canonical 태그 사용에 대한 지침을 확인하고 준수하세요.

예시

웹사이트에 https://kakao.gg/1, https://kakao.gg/2와 같이 여러 매개변수를 가진 URL이 있고, 이 모든 URL의 기본 페이지로 https://kakao.gg/post로 설정하려고 합니다.

이렇게 하면, 검색 엔진은 1,2와 같은 매개변수를 가진 페이지들을 색이화 할 때, https://kakao.gg/post를 기본 페이지로 간주하고, 중복 콘텐츠 문제를 방지 해 SEO 성능을 향상시킵니다.

_app.js

<Head>
  <link rel="canonical" href="https://www.kakao.gg/post" />
</Head>