Canonical 태그란?

Canonical 의 역할

Canonical 태그는 검색 엔진에게 대표 URL을 알리는 역할을 합니다.

이해를 위해 하나의 상황을 가정해 봅시다.

• https://example.com/posts/1
• https://example.com/posts/1/
• https://example.com/posts/1?utm_source=google
• https://example.com/posts/1?utm_source=facebook

위 URL들은 모두 같은 페이지로 연결됩니다.

검색엔진은 URL이 다르니 별개의 페이지로 수집을 시작합니다.
다른 페이지를 열었음에도 동일한 내용의 페이지가 노출된다면 여러분의 블로그는 중복된 콘텐츠가 많은 저품질의 사이트로 평가됩니다.

만약 저 페이지들을 열었는데 아래의 태그가 페이지에 존재한다면 어떨까요?

<link rel="canonical" href="https://example.com/posts/1">

검색 엔진은 4개의 URL을 모두 같은 페이지로 인식하고 하나의 페이지에 평가를 집중시킵니다.
(검색 엔진의 동작은 어디까지나 이해를 위한 가정입니다.)

Canonical 태그를 사용하는 경우

기본적으로 동일한 콘텐츠를 다른 URL로 접근 가능하다면 Canonical 태그를 사용하여 표준 URL를 지정해 줘야 합니다. 그렇다면 구체적으로 어떤 상황에서 사용해야 할까요?

1. 프로토콜 차이

동일한 페이지를 HTTP와 HTTPS로 접근할 수 있는 경우입니다.

• http://example.com/posts/1
• https://example.com/posts/1

이 경우 HTTPS 주소를 대표 URL로 지정합니다

2. 기기 차이

데스크톱과 모바일 환경의 페이지가 따로 존재하는 경우입니다.

• https://example.com/posts/1
• https://m.example.com/posts/1

이 경우 데스크톱 주소를 대표 URL로 지정합니다
(Alternate 태그 필요)

3. 매개 변수 사용

매개 변수에 따라 여러 URL로 접근 가능한 경우입니다
완전히 동일한 페이지에 접속하는 경우는 물론,

• https://example.com/posts/1
• https://example.com/posts/1?utm_source=google

정렬 순서나 필터링이 추가되어도 핵심 콘텐츠 자체가 변하지 않는다면 동일한 페이지로 판단합니다.

• https://example.com/posts
• https://example.com/posts?sort=latest

이 경우 매개 변수가 없는 주소를 대표 URL로 지정합니다.
다만 매개변수가 필수적으로 포함되어야 하는 구조라면 대표 URL로 사용은 할 수 있으나 표준적인 방법은 아닙니다.

번외

페이징은 서로 다른 콘텐츠입니다.

<!-- 서로 다른 콘텐츠 -->
• https://example.com/posts?page=1
• https://example.com/posts?page=2

각각의 페이지는 독립된 콘텐츠이지만, 각각이 모인 전체 목록 상태에서는 정렬순서나 필터링만 변경된 페이지는 중복 콘텐츠입니다.
쉽게 말해 최신순으로 1-10페이지를 수집했는데, 또 인기순 1-10페이지를 수집할 필요는 없습니다.

Canonical 태그로 얻는 효과

1. URL 지정

검색 결과에 노출되는 URL을 지정할 수 있습니다.

2. 평가 통합

여러 URL에 부여된 점수를 하나로 합산하여 해당 페이지의 검색 노출 순위를 높일 수 있습니다.

3. 추적 단순화

트래픽, 클릭수, 전환율 등의 방문자 통계를 하나의 URL로 통합하여 통계 데이터를 더 쉽고 정확하게 분석할 수 있습니다.

4. 크롤링 최적화

검색엔진이 중복 문서 탐색에 자원을 낭비하지 않도록 합니다.

Canonical 태그 사용법

HTML 문서의 <head> 영역에 아래와 같은 형식으로 추가하면 됩니다.

HTML

<head>
    <link rel="canonical" href="대표주소">
</head>

주의사항

Canonical 태그는 문서에 하나만 존재해야 합니다.
주소는 꼭 전체 주소 형식으로 넣어야 합니다.
대표 주소는 실제로 접속 가능한 주소여야 합니다.
서로 다른 콘텐츠는 하나의 대표 주소로 지정하면 안 됩니다.

마치며

제 블로그는 메인 페이지로 접속 시 특정 게시물의 내용이 출력됩니다.

<!-- 두 URL의 내용이 완전히 같습니다 -->
• https://kuio.dev
• https://kuio.dev/여기는-메인-페이지입니다

둘 중에 원본이라고 부를 수 있는 건 게시물 페이지이고, 대표성이 높은 건 메인 페이지인데요
과연 어떤 페이지를 Canonical 주소는 뭘로 지정해야 할까요?

이 문제를 해결하기 위해 자료를 정리하다 보니 글까지 작성하게 되었습니다.
Canonical 태그 문제를 겪고 계시는 분들께 이 글이 도움이 됐으면 좋겠습니다.
긴 글 읽어 주셔서 감사합니다.