캐노니컬 태그, 다양한 역할 이해하고 활용하기

캐노니컬 태그, 다양한 역할 이해하고 활용하기

캐노니컬 태그는 Title태그와 같이 일반적으로 프론트엔드 개발에서 사용하는 태그가 아닌 SEO를 할 때만 사용이 되다보니, 그만큼 그 개념에 대해 혼동이 되기도하고 어떻게 쓰는 것이 검색엔진에게 정확하게 시그널을 주는 방식으로 사용하는 것인지 궁금증이 많이 생기는 것 같다. 이번 글에서는 캐노니컬 태그라는 것이 정확히 무엇이고 어떤 역할을 하는지, 어떤 상황에서 사용되는지, 일반적으로 어떻게 ‘잘못’ 사용하고 있는지 자세히 알아보도록 한다.

캐노니컬(Canonical) 태그란?

캐노니컬 태그(Canonical)는 웹페이지의 콘텐츠 자체와 관련한 역할을 하는 태그는 아니지만 SEO 측면에서는 아주 중요한 역할을 하는 태그다. 실제로 구글에서는 별도의 섹션으로 가이드를 제공하고 있을 정도로 구글에서도 중요하게 생각하는 태그이다.

캐노니컬 태그는 정확히 말하자면 태그는 아니지만 <link>태그의 rel속성 값 중 하나로서 편의상 캐노니컬 태그라고 하며, <head> </head> 상에 위치하며 대게 아래의 예시처럼 메타 태그들을 설정한 후에 그 다음에 설정해준다. 

<title>어센트 코리아</title>
<meta name=”description” content=”어센트 코리아는 검색 데이터 리서치를 바탕으로 검색엔진최적화 (SEO)와 콘텐츠 마케팅 서비스를 제공하는 데이터 드리븐 마케팅 기업입니다. 검색데이터 분석의 다년간의 경험과 AI와 빅데이터 기술을 바탕으로 인텐트 기반 마케팅 데이터 플랫폼 리스닝마인드를 개발하고 있습니다.” />
<meta name=”robots” content=”index, follow” />|
<link rel=”canonical” href=”https://ascentkorea2024.mycafe24.com/” />

왜 캐노니컬 태그를 사용하는가?

캐노니컬 태그(일명 “rel canonical”)의 기본 역할은 이 태그가 설정된 페이지가 어떤 URL의 사본임을 검색엔진에게 알려주는 것이다. 말을 바꾸면 원본 URL(구글에서는 공식적으로 ‘표준 URL’이라고 하나 이해의 편의상 ‘원본 콘텐츠’로 표현)이 무엇인지를 알려주는 태그라고 할 수 있다. 이런 역할의 태그가 필요한 이유는 웹 사이트 내에 다른 URL을 가지고 있지만 내용상 동일한 콘텐츠를 가진 웹페이지들이 존재 할 수 있는데 이 때 아무 조치도 취하지 않으면 구글은 웹 사이트 안에 동일한 콘텐츠를 가진 중복 페이지가 존재한다고 인식하는 문제가 발생하는데 이를 막기 위함이다.

중복 페이지가 존재하는 것이 왜 문제인가에 대해 좀 더 이해를 해보자면 검색엔진의 입장에서는 웹사이트의 콘텐츠를 크롤링하는 것은 많은 시스템 리소스가 소요되는 일이다. 따라서 효율성을 제고하기 위해서 검색엔진은 중복 콘텐츠가 많을 경우 이런 웹사이트에 대해 크롤러를 보내는 빈도나 크롤하는 대상 페이지의 수를 줄인다. 웹사이트의 입장에서는 크롤러 방문 횟수나 읽어가는 페이지 수가 줄면 정작 방문을 유도해야할 중요한 콘텐츠의 크롤이 안되고, 이게 색인이 안되는 문제로 이어지고 결국에 노출도 되지 못하는 문제로 이어질 위험을 가지게 된다. 또한 다량의 복제 페이지들은 중복된 콘텐츠 때문에 주요 유입 검색어의 검색 결과에서 낮은 순위를 얻게 되는 위험성도 생길 수 있다. 

이런 중복 콘텐츠로 인식되는 페이지들은 왜 생기는가?

1. 여러 도메인을 갖는 경우

아래의 예시 처럼 다양한 URL이 동일한 콘텐츠를 가진 하나의 웹페이지를 표현하는 경우를 자주 보아왔다.

https://www.ascentkorea.com/
https://ascentkorea2024.mycafe24.com/
https://ascentkorea.com/
https://ascentkorea2024.mycafe24.com/index.php
http : //ascentkorea.cm/index.php?atg…

최근의 콘텐츠 관리 시스템(CMS)이나 동적 코드 기반의 웹 사이트들은 이런 형태로 동일한 콘텐츠에 대한 다양한 URL로부터의 접근을 인정해주고 있고, UTM코드, 검색, 정렬, 기타 옵션 등에 의한 매개변수를 URL 매개 변수로서 추가할 수 있게 해주고 있다. 이런 이유로 한 사이트에 많은 수의 중복 URL이 있을 수 있지만 이를 인식하지 못할 수도 있는 것이다.

이런 이유로 발생한 위 예시와 같은 URL들은 검색엔진의 입장에서 볼 때 모두 고유한 웹 페이지다. 하지만 각 URL에 들어갔을 때 우리가 보게되는 콘텐츠는 모두 동일하기 때문에 하나의 콘텐츠가 4개의 복사본을 가지고 있는 것이라고도 말할 수 있다. 이런 경우에 어느 것이 원본인지를 검색엔진에게 알려주기 위해 나머지 4개의 복사본 페이지에서 설정하는 것이 캐노니컬 태그라고 할 수 있다.

2. 동일한 콘텐츠를 다른 웹사이트에 게재하는 경우

좀 더 현실성이 높은 케이스를 소개해본다면 도메인이 다른 여러 개의 사이트에 동일한 기사를 매일 게재해야하는 언론사가 있다고 생각해보자. 이 사이트는 콘텐츠를 다른 도메인에 제공을 하기는 하지만 이 중에서 원본이 게재되는 웹사이트만 검색엔진 결과 페이지에 노출되기를 바란다고 생각해보자. 이 경우 동일한 기사가 배포되는 모든 웹사이트에 원본 사이트로 캐노니컬 태그를 설정하면 구글은 원본 사이트 하나에 모든 평가를 모아주게되어 이 페이지만 검색 결과 페이지에 노출된다. 

3. 경로에 따라 다른 파라미터를 사용하는 경우

D2C몰이나 e-commerce몰에서 자주 발생할 수 있는 경우로 동일한 콘텐츠로 진입하는 경로에 따라 파라미터를 달리하는 경우이다.

https://www.ascentmall.com/goods/detail.php?category=012&productNo=12345
https://www.ascentmall.com/goods/detail.php?category=012&productNo=12345&page=3
https://www.ascentmall.com/goods/detail.php?brand=ascent&productNo=12345
https://www.ascentmall.com/goods/detail.php?productNo=12345

일반적으로 이런 경우 모두 12345번 상품 상세페이지가 노출되는데, 대표적으로 중복이 발생하는 페이지 유형이라고 볼 수 있다.

모바일 사이트와 데스크톱 사이트의 관계를 선언하는 캐노니컬 태그 활용

이런 중복 콘텐츠에 대한 검색엔진의 나쁜 평가를 막기 위한 역할 외에 캐노니컬에는 또 다른 중요한 역할이 있는데 바로 운영하는 웹사이트의 모바일 페이지들과 데스크톱 페이지들이 서로 다른 서브 도메인을 가지고 있는 경우에 rel=”canonical” 및 rel=”alternate”요소로 link태그를 지정하여 모바일 페이지와 테스크톱 페이지들간의 관계를 알려준다.

www.example.com 형식의 데스크톱 페이지 URL에 대해서 m.example.com 형식의 모바일 페이지 URL이 존재한다고 할 때 구글에게 이 두 URL이 서로 다른 웹사이트가 아니라 서로 다른 디바이스를 대응하기 위한 하나의 웹 사이트라는 것을 알려줄 필요가 있다.

데스크톱 페이지의 URL: 
https://www.example.com/what-is-canonical.html

모바일 페이지의 URL: 
https://m.example.com/what-is-canonical.html

이렇게 두개의 다른 URL이지만 동일한 콘텐츠를 가진 웹페이지가 있다고 할 때 이 두 페이지 중에서 데스크톱 페이지를 원본으로 인식시키려고 한다면 아래와 같이 Link태그를 선언해줘야한다.

데스크톱 페이지의 URL: 
< link rel=”alternate” media=”only screen and (max-width 640x) href=”https://m.example.com/what-is-canonical.html” />

모바일 페이지의 URL: 
< link rel=”canonical” href=”https://www.example.com/what-is-canonical.html” />

이러한 양방향 사이트 설정은 구글보트가 콘텐츠를 찾고, 구글 알고리즘이 데스크톱 페이지와 모바일 페이지 간의 관계를 이해하고 이에 맞게 처리하는 데 도움을 준다. 서로 다른 URL을 사용하여 다른 형식으로 같은 콘텐츠를 게재하면 사이트 설정은 2개의 URL에 같은 콘텐츠가 있으며 2개가 아닌 하나의 요소로 처리해야한다고 구글에게 알려주는 것이다.

만약 이런 설정을 하지 않으면 어떤 문제가 생길까? 우선 구글과 같은 검색엔진은 이 두개 URL을 서로 다른 웹페이지로 판단하여 동일한 키워드에 대해서 두 페이지 모두가 검색결과에 나타날 수 있다. 두개 페이지의 관계를 구글이 알고 있을 때에 비해 오히려 더 낮은 순위를 가지게 되는 경우도 생길 수 있다. 

캐노니컬 태그 설정에서 주의할 점

첫번째는 캐노니컬의 설정은 n:1이 가능하지만 rel=”alternate”와 rel=”canonical”마크업은 반드시 1:1을 유지해야한다는 점이다.단일 모바일 페이지는 단일 데스크톱 페이지가 참조해야한다. 복수의 데스크톱 페이지가 하나의 모바일 페이지를 참조할 수는 없다는 점을 기억해야한다.

두번째는 페이지A에서는 페이지B로 캐노니컬 태그를 설정하고 페이지B에서는 페이지A로 캐노니컬을 순환 설정하는 경우이다.또한 페이지A에서는 페이지B로 다시 페이지B에서는 페이지C로 연결하는 것도 좋지 못한 예이다.이 모든 것들은 검색에게 잘 못된 신호를 전달해서 제대로 페이지를 평가하는 것을 방해하기 때문에 피해야한다.

그리고 세번째는 유사하지 않은 콘텐츠를 가진 웹페이지 간의 관계를 캐노니컬로 연결을 해서는 안된다는 점이다. 가끔 검색결과에서 높은 순위를 가지고 있던 상품 페이지의 상품 판매가 끝나고 나서 새로운 상품이 출시되는 시점에 상품이나 콘텐츠의 동일성이 없는데에도 기존 상품페이지에 새로운 상품 페이지로 캐노니컬을 설정하는 경우가 있다. 이럴 경우 검색은 콘텐츠가 너무 다르기 때문에 이 캐노니컬 태그 설정 자체를 무시할 수 있다.