캐노니컬(Canonical) 태그란? 캐노니컬 태그의 뜻, 중요성, 설정방법

캐노니컬 태그(Canonical Tag)란 중복 페이지(콘텐츠) 문제를 해결하기 위해 웹 페이지의 HTML 코드에 삽입하여 특정 페이지가 원본임을 검색 엔진에 알려주는 메타 태그입니다.

중복 페이지가 검색 엔진에 모두 크롤링 될 경우 동일한 내용을 담은 페이지가 검색 결과로 노출되어 SEO에 부정적인 영향을 끼칠 수 있는데요. 이러한 문제를 해결할 수 있는 캐노니컬 태그란 무엇인지 알려드리겠습니다.

💡 아래에서 관심 있는 주제를 클릭하여 해당 본문으로 바로 이동해보세요.

캐노니컬 태그란?

캐노니컬 태그의 중요성

301 리디렉션과 캐노니컬 태그의 차이점

캐노니컬 태그 설정방법

캐노니컬 태그 설정 시 주의사항

캐노니컬 태그(Canonical Tag)란?

출처: incrementors

캐노니컬 태그(Canonical Tag)는 웹 페이지 상의 중복 콘텐츠 문제를 해결하기 위해 사용되는 html 요소로, 하나의 페이지로 연결되는 여러개의 주소가 존재할 경우 어떠한 주소가 원본(메인) url인지 알려주기 위한 태그입니다.

캐노니컬 태그의 역할

캐노니컬 태그는 검색엔진에게 어떠한 페이지를 우선적으로 크롤링하고 색인해야 할 지 알려주는 역할을 합니다. 예를 들어볼까요? 다음 세 주소는 모두 저희 블로그 메인 페이지로 이동하는 링크입니다.

https://seo.tbwakorea.com/blog/
https://seo.tbwakorea.com/blog

이 두가지 주소 모두 동일한 페이지 결과를 보여주지만, url 주소는 다릅니다. 이러한 경우를 ‘중복 페이지’라고 부르는데요. 검색 엔진은 이 세가지 경우를 모두 다른 페이지로 인식할 수 있습니다. 따라서 웹 사이트에서 동일한 콘텐츠가 여러 url로 제공될 경우, 검색엔진은 어떠한 페이지를 우선적으로 크롤링/색인해야 할 지 혼란을 겪을 수 있는데요. 이때 캐노니컬 태그를 사용하면 검색엔진에게 어느 페이지가 대표(원본) 페이지인지 명확히 알려줄 수 있습니다.

캐노니컬 태그의 중요성

출처: incrementors

캐노니컬 태그는 웹사이트의 중복 페이지 문제를 해결해주기 때문에 SEO(검색엔진 최적화) 측면에서 매우 중요합니다. 웹사이트 내 중복 페이지가 미치는 주요 문제점들은 다음과 같습니다.

1) 검색 순위 저하

검색엔진은 동일하거나 유사한 콘텐츠가 여러 페이지에 존재할 경우, 어떤 페이지를 우선시하여 노출해야 할 지 혼란스러워합니다. 이때, 의도와는 다르게 원래 상위에 나타나야 할 페이지의 순위가 타 중복 페이지에 밀려 낮아질 수 있습니다.

2) 트래픽 분산

캐노니컬 태그를 정의하지 않아 검색엔진 로봇이 중복 페이지를 모두 크롤링할 경우, 검색 결과에 덜 적합한 페이지가 상위에 노출되거나 모든 관련 페이지의 순위가 하락하는 등의 문제가 발생할 수 있습니다. 특히 중요한 페이지가 검색 결과 상위에서 밀려나면 해당 페이지로 들어오는 트래픽이 감소할 수 있습니다.

3) 사용자 경험 저하

검색 결과 페이지에 동일한 내용을 담은 중복 페이지가 여러개 노출될 경우, 사용자는 원래 찾고자 했던 정보에 쉽게 접근하지 못할 수 있습니다. 또한 불필요한 페이지가 많을수록 사용자가 원하는 정보를 찾기 위해 탐색하는 과정이 길어지는데, 이때 사이트에서 이탈할 가능성이 커집니다. 높은 이탈률은 결과적으로 전환율 및 사이트 성과에 부정적인 영향을 미치기 때문에, 사용자 경험을 고려한다면 캐노니컬 태그를 올바르게 설정해야 합니다.

301 리디렉션과 캐노니컬 태그의 차이점

사실, 중복 페이지 문제를 해결하는 방법엔 캐노니컬 태그 외에도 ‘301 리디렉션‘을 설정하는 방법도 존재합니다. 301 리디렉션과 캐노니컬 태그는 모두 중복 페이지 문제를 해결할 수 있지만, 그 목적과 사용 방식에 차이가 있는데요. 301 리디렉션과 캐노니컬 태그의 차이점에 대해 설명드리겠습니다.

301 리디렉션이란?

301 리디렉션은 ‘영구 리디렉션’으로, 특정 url을 다른 url로 영구적으로 이동시킬 때 사용합니다. 사용자가 특정 url에 접속했을 때, 브라우저가 자동으로 다른 url로 전환되도록 설정하는 방식입니다. 301 리디렉션을 설정할 경우, 검색엔진에게도 원래 페이지가 영구적으로 타 페이지로 이동되었다고 알릴 수 있습니다. 따라서 검색엔진의 인덱스 역시 새로운 url로 업데이트됩니다.

301 리디렉션을 사용하는 경우

1. 도메인을 변경했을 때

회사가 새로운 도메인으로 이전했을 경우, 301 리디렉션을 지정하면 효과적으로 사용자를 유입시킬 수 있습니다.

ex. www.oldsite.com/about > www.newsite.com/about

2. 사용하지 않는 페이지 처리

서비스 페이지가 삭제되었거나, 더이상 판매하지 않는 제품 페이지 같은 경우에 사용자가 404 오류 페이지를 보지 않도록 관련된 타 페이지로 리디렉션 시킬 수 있습니다.

ex. www.website.com/old-product > www.website.com/new-product

3. https 프로토콜 변경

웹사이트 프로토콜은 http(hyper transfer protocol)과 https(hypertext transfer protocol secure) 방식 두가지로 나뉩니다. 두 방식의 차이는 보안여부인데요. https는 http의 보안 버전으로, 브라우저와 서버간의 통신이 암호화된다는 장점이 있습니다.

웹사이트 보안을 강화하기 위해 주소를 http에서 https로 변경한 경우, 모든 페이지를 301 리디렉션해야 합니다.

ex. http://example.com/page1 > https://example.com/page1

캐노니컬 태그를 사용하는 경우

캐노니컬 태그는 페이지의 원본을 검색엔진에 명시하는 html요소입니다. 중복 페이지가 여러 Url에 나뉘어 있을 때, 캐노니컬 태그를 설정하여 중복 페이지가 여러개 노출되는 것을 방지하는 것을 목적으로 합니다.

1) 세션 ID가 포함된 url

웹사이트에서 사용자의 세션을 추적하기 위해 세션 id를 url에 삽입한 경우, 동일한 페이지가 여러 세션 id로 노출될 수 있습니다.

ex. www.example.com/page?session=1234 , www.example.com/page?session=5678

이 두개의 페이지는 동일한 콘텐츠를 담고 있지만, 세션 Id로 인해 다른 url 주소를 보유하고 있습니다. 이때 캐노니컬 태그를 사용하여 www.example.com/page를 원본으로 지정할 수 있습니다.

2) 동일 콘텐츠가 여러 카테고리 페이지로 지정된 경우

웹사이트에 동일한 기사/콘텐츠가 여러 카테고리에 게시되는 경우, 각 카테고리 별로 다른 Url이 생성됩니다.

ex. A에 관한 기사를 블로그의 tech 카테고리와 science 카테고리에 중복으로 올릴 경우, 해당 기사는 www.blog.com/technology/article 와 www.blog.com/science/article 두가지의 url 주소를 갖게 됩니다.

이때 캐노니컬 태그를 설정해 www.blog.com/technology/article를 원본으로 지정할 수 있습니다.

301 리디렉션과 캐노니컬 태그 비교

구분	301 리디렉션	캐노니컬 태그
목적	사용자를 한 페이지에서 다른 페이지로 영구적으로 이동	동일한 콘텐츠를 가진 여러 URL 중 원본을 명시
사용자 경험	사용자가 방문 시 즉시 새로운 URL로 이동	사용자는 변동 없이 중복 페이지에 접근 가능
SEO 처리방식	새로운 URL을 인덱싱하고, 기존 URL은 크롤링하지 않음	검색 엔진이 원본 페이지만 인식하도록 하여 중복 문제 해결
적용 범위	모든 사용자와 검색 엔진에 적용되어, 브라우저가 직접 타 페이지로 전환시킴	검색 엔진에만 적용되며, 사용자에게 페이지 전환은 일어나지 않음

301 리디렉션과 캐노니컬 태그 비교

정리하자면, 두 방법 모두 중복 페이지 문제를 해결하는 데 도움을 주지만 그 해결 방식이 다릅니다. 301 리디렉션은 중복된 페이지로의 트래픽을 원본 페이지로 완전히 이동시키는 반면, 캐노니컬 태그는 검색엔진에게 중복 페이지 중 원본이 무엇인지 지정하여 중복 페이지 문제를 해결합니다. 두 방식 모두 SEO를 고려하여 중복 콘텐츠를 해결하지만, 사용 목적과 유형이 다르기 때문에 자신의 상황에 어울리는 방식을 선택해야 합니다.

캐노니컬 태그 설정 방법

캐노니컬 태그를 설정하는 방법은 다음과 같습니다.

html 문서 상에 명시하기

html 문서 상에 직접적으로 canonical 값을 설정할 수 있습니다. 이해를 돕기 위해 예시를 들어보겠습니다.

https://www.example.com/target-page-url 라는 주소를 캐노니컬 페이지(원본 페이지)로 지정하고 싶다고 가정한다면, link 태그의 rel 값을 ‘canonical’로 정의하고, href 값에 url을 작성하면 됩니다. 일반적으로 캐노니컬 태그는 <head> 섹션 아래에 위와 같은 형식으로 정리합니다.

위의 코드가 캐노니컬 태그를 지정하는 태그입니다. 이 태그는 웹페이지의 Html 문서에서 직접 편집할 수 있습니다. 이렇게 캐노니컬 태그를 작성하면 검색 엔진은 https://www.example.com/target-page-url를 페이지의 원본 주소로 인식합니다.

따라서 https://www.example.com/target-page-url#page1, https://www.example.com/target-page-url?utm_event , http://www.example.com/target-page-url 등의 중복된 다른 url이 아닌, 원본 페이지만을 크롤링합니다.

캐노니컬 태그 설정 시 주의사항

1. 절대 경로로 작성하기

캐노니컬 태그는 상대 경로가 아닌 절대 경로로 입력하는 것이 좋습니다.

절대경로는 프로토콜 (https://), 도메인 (www.example.com), 경로(/about-us)를 모두 포함하는 경로입니다. 반면 상대경로는 현재 페이지의 위치에 따라 경로를 작성하며, 도메인이나 프로토콜을 포함하지 않습니다.

절대 경로 예시

<a href=”https://www.example.com/about-us”>About Us</a>

상대 경로 예시

<a href=”/about-us”>About Us</a>

2. 캐노니컬 태그 중첩 피하기

하나의 페이지에 여러 개의 캐노니컬 태그를 설정하지 않아야 합니다. 여러 개의 캐노니컬 태그가 중첩된 경우, 검색 엔진은 올바른 페이지를 판단하지 못할 수 있습니다.

3. Noindex 태그와 함께 사용 금지

Noindex 태그는 페이지를 색인에서 제외하는 태그입니다. 이 태그가 작성된 페이지는 검색 엔진이 인덱싱하지 않기 때문에, 캐노니컬 태그의 의미와는 상충되는 태그입니다. 따라서 캐노니컬 태그를 적용하기 전에 페이지 내부에 Noindex 태그가 설정되어 있는지 확인해야 합니다.

이 외에도 캐노니컬 태그에 관한 자세한 내용이 궁금하시다면, 구글의 중복 페이지 URL 표준화 및 표준 태그에 관한 글을 읽어보세요.

캐노니컬 태그는 검색 엔진이 우리 웹사이트의 중요 페이지를 인식할 수 있도록 돕는 중요한 SEO 요소입니다. 검색 엔진의 인덱싱과 크롤링 효율을 높이고, 사용자에게 더 나은 검색 결과를 제공하기 위해서는 중복 페이지 문제를 해결하는 것은 필수적입니다. 웹사이트 크롤링 및 인덱싱에 대해 궁금한 내용이 있으시다면 하단의 링크로 문의 남겨주세요.

TBWA 데이터랩 SEO 컨설팅 서비스 알아보기!