SEO 초보자를 위한 ‘캐노니컬 태그’ 설명하기

‘캐노니컬 태그(Canonical tag)’는 ‘SEO(Search Engine Optimization, 검색엔진 최적화)’ 개선을 위한 중요한 기능 중 하나로, 웹마스터 또는 프론트엔드 개발자, 마케터 등 외부 링크를 관리하는 직군이 알면 좋은 개념이다. 캐노니컬은 단 한 줄짜리 코드인데, 당장 개발자 도구를 열어 이 페이지의 head 부분을 보면 ‘<link href="https://yozm.wishket.com/magazine/"; rel="canonical”>’라고 써있는 코드를 볼 수 있다. 한 줄짜리 캐노니컬 태그가 어떤 영향력을 가졌는지 같이 알아보자.

캐노니컬 태그 알아보기

캐노니컬 태그는 한 페이지를 가리키는 여러 개의 주소가 존재할 때, 
검색 엔진의 로봇이 어떤 주소가 원본인지 알 수 있도록 하기 위해 사용하는 태그이다.

당신이 검색엔진의 로봇이라고 생각해보자. 수집한 주소 중 몇 개의 주소가 같은 페이지를 가리키고 있다. 그렇다면 다음 중 어떤 주소가 페이지를 가리키는 가장 좋은 주소일까?

https://www.example.com/index.html
https://example.com/index.html?page=1
http://m.example.com/index.html

이는 검색엔진이 직면한 주요 문제 중 하나로, 이 문제를 해결하기 위한 방법으로는 크게 두 가지가 있다. 첫째는 검색엔진이 스스로 어떤 URL이 표준(canonical) URL인지 판단하도록 하는 방법, 둘째는 페이지에 어떤 URL이 표준 인지 표기하는 방법이다.

구글이나 야후는 이 문제를 해결하기 위해 첫번째 방식과 두번째 방식을 모두 사용한다. 그러나 첫번째 방식은 검색엔진이 임의로 표준 URL을 설정하게 되기 때문에 페이지의 소유주가 의도한 주소가 표준 URL이 되지 않을 가능성이 있다. 그렇기 때문에 구글, 야후 등의 메인 검색 엔진은 페이지 소유주가 원하는 URL을 표준 URL로 설정할 수 있도록 캐노니컬 태그를 HTML 문서 head에 추가하는 방식을 제공한다.

캐노니컬 태그의 구현

캐노니컬 태그는 크게 html 문서 상에 명시하는 방법과 http 응답 헤더에 명시하는 두 가지 방법으로 구현할 수 있다.

html 문서 상에 명시하는 경우 ‘캐노니컬 링크 엘레먼트(canonical link element)’라 하는 일종의 시맨틱 태그를 사용한다. Link 태그에 rel 프로퍼티 값을 ‘canonical’로, href 프로퍼티 값에 표준 URL을 명시하여 사용한다. 일반적으로 html 문서의 head에 작성한다.

<link rel="canonical" href="http://www.example.com/index.html">

모든 인터넷 상의 문서가 html로 작성되어 있지는 않다. PDF와 같은 다른 파일 형식의 경우 캐노니컬 태그를 사용할 수 없다. 이러한 경우에는 http 응답 헤더에 명시하는 방법을 사용한다.

HTTP/1.1 200 OK
Content-Type: application/pdf
Link: ; rel="canonical"
Content-Length: 4223
...

응답 헤더의 Link 필드에 브라켓 스타일의 표현식을 사용하여 표준 URL을 명시하고, 세미콜론으로 구분한 뒤 rel 프로퍼티의 값을 canonical로 설정한다.

SEO를 위한 캐노니컬 태그 사용하기

구글 검색센터에 있는 고급 검색엔진 최적화 문서를 살펴보면, 중복 URL 통합 섹션에서 중복된 URL을 하나로 통합하여 구글봇에게 인식시키는 방법’으로 캐노니컬 태그를 사용하도록 안내하고 있다.

해당 문서에 따르면, 구글봇은 비슷한 페이지를 가리키는 URL을 여러 개 발견하면 가장 적절하다고 생각되는 페이지의 URL을 표준으로 설정한다. 이것이 위에서 설명한 첫 번째 방식이다. 어떤 페이지가 표준 URL로 지정되면, 구글봇은 해당 표준 페이지를 가장 자주 크롤링하며, 중복된 페이지는 검색엔진의 자원을 절약하기 위해 표준 페이지보다 훨씬 적게 크롤링한다.

캐노니컬 태그를 사용해 표준 URL을 설정하면 같은 페이지를 가리키는 다른 URL들을 하나의 표준 URL로 이동시켜주기 때문에 SEO에서 이점을 가져갈 수 있다. 검색엔진은 설정된 표준 URL을 통해 어떤 페이지가 표준인지 확인할 수 있고, 해당 페이지의 URL을 표준 URL로 설정한 다른 페이지들의 수를 파악할 수 있다.

SEO에 관련된 질문을 보면 ‘페이지 주소가 https://exaple.com/index.php로 확실함에도 캐노니컬 태그를 설정해주어야 하는지’가 자주 올라온다. 구글에 의하면, 이러한 경우에도 캐노니컬 태그를 사용하는 것이 좋다. 대부분의 사이트가 URL에 쿼리를 통해 parameter 전달을 허용하는데, 이 경우 쿼리가 있는 URL과 없는 URL이 서로 다른 URL로 취급되기 때문이다.

이러한 SEO에서의 이점을 챙기기 위해서는 캐노니컬 태그 외에 ‘301 redirection’이나 ‘사이트맵’ 등의 기능을 활용하는 방안도 있다. 하지만 해당 방안들은 캐노니컬 태그를 사용하는 경우와 다르다.

올바르게 캐노니컬 태그 사용하기

상대경로가 아닌 절대경로로

구글 가이드를 보면 rel="canonical" 태그에 ‘/dresses/green/greendress.html’ 같은 상대 경로가 아닌, ‘https://example.com/dresses/green/greendress.html’과 같은 절대 경로를 권장한다. 문서 내에 ‘base’ 경로가 지정되어 있다면 상대 경로를 사용하여도 문제가 없지만, 대부분의 경우 base 경로를 설정하지 않거나 설정하는 것을 잊기 때문에 절대 경로로 설정해 두는 것을 권장한다.

중복 캐노니컬 태그를 적용하지 않기

검색 로봇의 구현에 따라 조금씩 다르지만, 구글은 캐노니컬 태그 여러 개가 중복 등록되어 있는 경우 해당 태그들을 전부 무시한다. 따라서 캐노니컬 태그가 두 개 이상 등록되지 않도록 주의하여야 한다.
 

순환 참조가 생기지 않게 하기

페이지 A가 캐노니컬 태그를 이용해 페이지 B를 표준 URL로 지정하고, 페이지 B가 캐노니컬 태그를 이용해 페이지 A를 표준 URL로 지정하는 경우 무한 순환이 발생할 수 있다. 무한 순환이 발생하는 경우, 의도한 표준 URL이 무엇인지 파악할 수 없으므로 A와 B의 캐노니컬 태그는 모두 무시되고 다른 요인들에 의해 표준 URL이 결정된다.

적절한 캐노니컬 태그 활용이 중요

SEO 작업을 위해 모든 경우에 캐노니컬 태그만을 이용하는 것은 최선이 아니다. 상황에 적절하게 캐노니컬 태그 혹은 위에서 잠깐 언급한 301 Redirection 등을 사용해야 검색엔진에게 보다 정확한 표준 URL을 전달할 수 있다. 앞으로 올바른 캐노니컬 활용으로 검색엔진에게 제대로 된 오리지널 페이지를 알려주도록 하자.

요즘IT의 모든 콘텐츠는 저작권법의 보호를 받는 바, 무단 전재와 복사, 배포 등을 금합니다.