캐노니컬 태그로 검색엔진 최적화하기

jaedeuk lee

캐노니컬 태그란 사이트 내 URL 주소는 다르지만 동일한 내용의 중복된 페이지가 있을 때 검색엔진에 대표가 되는 URL주소를 알려주는 역할입니다.

캐노니컬 태그는 <link> 태그의 한 요소로서 rel=”canonical” 이라는 속성을 가진 HTML의 <head></head>태그를 뜻합니다. 일반적으로는 다음과 같이 작성이 됩니다.

캐노니컬 태그는 다음과 같이 작성할 수 있습니다.

<head>

</head>

우리 웹사이트에는 중복된 콘텐츠가 없기 때문에 캐노니컬 태그가 필요없다라고 생각할 수 있습니다. 하지만, 알게모르게 생성된 수 많은 중복 콘텐츠가 있습니다.

웹사이트내 중복 페이지란?

혹시 우리 웹사이트가 아래의 예시처럼 되어있지는 않은지 확인해봅니다.

https://www.mywebsite.co.kr/

https://mywebsite.co.kr/

https://www.mywebsite.com/

사용자 입장에서는 이 모든 URL들이 동일한 페이지를 의미하기 때문에 이들을 다른 페이지로 인식하지는 않습니다. 하지만, 검색엔진에게는 위 3가지 URL모두 다른 이름을 지니기 때문에 서로 다른 페이지로 인식하게 됩니다.

중복된 페이지를 제거해주는 캐노니컬은 검색 엔진이 우리 웹사이트의 페이지를 빨리 가져갈 수 있게 해주는 역할을 합니다. 만약 우리 사이트의 URL이 너무 많을 경우에는 검색 엔진이 한번에 모든 URL을 읽어가지 못합니다. 그럴 경우에는 우리 입장에서 중요하다고 여겨지는 URL들이 빠르게 업데이트되지 못하고 고객에게 노출이 되지 못하는 경우가 생깁니다.

또한 만약 하나의 콘텐츠가 여러가지 URL로 인식이 된다면 검색 랭킹에도 저해가 되는 결과가 도출됩니다. 구글의 랭킹 요소에는 공개되지 않은 수 많은 것들이 있습니다. 그 모든 랭킹 요소들을 URL단위로 계산을 하게되는데, 이러한 랭킹 요소들중 트래픽이 여러 URL들로 분산된다면 결국 우리 페이지는 상위 노출 기회를 놓치게 됩니다.

모바일 페이지와 PC 페이지 사이의 캐노니컬 태그와 alternate 태그 활용

중복 페이지에서 가장 흔히 일어나는 상황은 모바일 페이지와 PC 페이지를 구분하는 상황입니다. 반응형 웹사이트라면 동일한 URL에서 PC버전과 모바일 버전을 최적화하여 나타날 수 있습니다. 하지만, 반응형 웹사이트가 아닐 경우에는 m.mywebsite.co.kr 과 www.mywebsite.co.kr로 구분이 됩니다. 이를 캐노니컬 태그를 적용하지 않는다면, 각 기기에 최적화된 페이지가 노출이 안 되어서 트래픽 손실을 일으킵니다. 간혹 PC에서 검색을 했는데 모바일 페이지가 떠서 사용성이 저하된 페이지를 보신적이 있을 것입니다. 그런 경우가 캐노니컬 태그가 제대로 적용이 안된 경우입니다.

이럴 때에는 PC에서는 alternate 태그를 모바일에서는 캐노니컬 태그를 적용해줍니다.

Alternate 태그는 다음과 같습니다.

위를 www.mywebsite.co.kr의 head 영역에 적용해줍니다.

모바일 버전에는 캐노니컬 태그를 적용해줍니다.

위를 m.mywebsite.co.kr의 head 영역에 적용해줍니다.

최근 진행된 프로젝트에서는 이를 적용하여 각각의 기기에 맞게 페이지를 최적화 함으로써 트래픽 상승을 유발했습니다.

캐노니컬 태그 적용시 주의사항

캐노니컬 태그 적용시 중복한 페이지에만 걸어주어야 합니다.

각 페이지별로 다른 내용을 담고 있는 경우에는 캐노니컬을 걸어주면 안됩니다. 예를 들어 퍼포먼스 광고를 설명하는 페이지와 검색 엔진 최적화를 설명하는 페이지를 디지털 마케팅의 영역이라는 생각으로 캐노니컬 태그를 설정해서는 안됩니다. 캐노니컬을 설정할 경우는 동일한 세부 주제를 가지고 글을 작성했을 경우이거나 완전 동일한 워딩을 사용한 글일 경우만 해당됩니다.

절대 경로 사용하기

캐노니컬 태그는 가급적 상대 경로가 아닌 프로토콜(http, https)을 포함한 절대 경로를 입력해야 합니다.

//잘된 예

<link rel="canonical" href="https://www.mysite.com/shop.html">

<link rel="canonical" href="/shop.html">

//잘못된 예

<link rel="canonical" href="mysite.com/shop.html">