Canonical 태그란 무엇인가?

clock icon

posted 2 months ago

Canonical 태그는 HTML 문서의 <head> 섹션에 위치하는 태그로, 검색 엔진에 중복 콘텐츠 문제를 해결하도록 돕습니다. 이 태그는 여러 URL이 동일하거나 유사한 콘텐츠를 가질 때 사용되어, 검색 엔진에 어떤 URL을 원본으로 간주해야 하는지 알립니다. 이를 통해 중복 콘텐츠로 인한 문제를 방지하고, SEO 성능을 향상시킬 수 있습니다.

사용법:

  • <head> 태그 안에 Canonical 태그를 넣어, 중복되는 콘텐츠를 가진 개별 URL이 모두 원본임을 명시합니다.
  • 원본 URL을 지정하여 <head> 섹션에 넣습니다.

예를 들어, 특정 기술 블로그에서는 모든 페이지에 대해 원본 페이지의 URL을 Canonical 태그로 지정하여, 검색 엔진이 모든 페이지를 원본으로 인식하도록 설정할 수 있습니다. 이 방식은 SEO 최적화에 중요한 역할을 하며, 웹사이트의 가시성과 검색 엔진에서의 순위를 개선하는 데 도움이 됩니다.

 

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 성능을 향상시킵니다.

 

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

Top Questions