[HTML] 캐노니컬 태그로 SEO 구현하기 (Canonical Tag)

캐노니컬 태그 (Canonical Tag)

  캐노니컬 태그는 한 페이지를 가리키는 여러 주소가 존재할 때 그 중 어떤 주소가 메인(원본)인지 알려주는 태그이다. 구글 문서에도 볼 수 있듯이 한 페이지가 여러 URL을 통해 접근되거나 유사한 컨텐츠가 서로 다른 페이지에 존재하는 경우(ex. 특정 컨텐츠의 모바일 전용 페이지, 데스크탑 전용 페이지) 검색 엔진은 표준 URL 하나를 기준으로 크롤링을 수행하고 나머지는 크롤링 빈도를 고의적으로 낮춘다. 만약 캐노니컬 태그를 사용하지 않는다면 검색 엔진은 임의로 표준 URL을 판단할 것이다. 그것은 우리가 원하는 표준 URL과 일치하지 않을 수도 있고 검색엔진마다 다른 표준 URL이 지정되는 결과로도 이어질 수 있다. 캐노니컬 태그를 사용하여 분명하게 표준 URL을 명시해준다면 이와 같은 문제를 해결할 수 있다.

  캐노니컬 태그를 적용하는 방법에는 두 가지가 있다. 하나는 html 문서의 head에 시멘틱 태그를 추가하는 것이고 또 다른 하나는 http response 헤더에 캐노니컬 태그를 명시하는 방법이다. 기본적으로 우리는 전자를 사용하며 pdf 문서와 같이 시멘틱 태그를 사용할 수 없는 방법에 한해 두 번째 방법을 사용한다.

 

  캐노니컬 태그를 사용할 때 주의할 점은 다음과 같다.

(1) URL이 분명하게 존재할 때에도 캐노니컬 태그는 가급적 사용하기

  만약 URL에 쿼리 파라미터를 이용하는 경우 실질적으로 동일한 페이지이지만 쿼리 파라미터에 따라 서로 다른 URL로 처리되는 문제가 발생한다. 캐노니컬 태그를 사용하면 쿼리 파라미터와 무관하게 표준 URL을 설정해줄 수 있다.

 

(2) 상대 경로가 아닌 절대 경로 사용하기

  구글 가이드에서는 상대 경로보다는 절대 경로를 사용하는 것을 추천한다. (만약 html document 안에 base가 지정되어 있다면 상대 경로를 사용해도 되나 일반적으로 base 경로를 지정하지 않기 때문에 그냥 절대 경로를 삽입하는 것으로 습관을 들이면 될 듯 하다.)

 

(3) 캐노니컬 태그는 하나만 사용하기

  구글 검색 엔진은 하나의 문서가 여러 캐노니컬 태그를 가지는 경우 모든 캐노니컬 태그를 무시해버린다. 따라서 캐노니컬 태그는 딱 하나만 사용하도록 하자.

 

(4) 순환 참조 주의하기

  두 개 이상의 페이지가 캐노니컬 태그로 서로를 지정하면 무한 순환 참조가 발생한다. 그렇게 되면 표준 URL이 제대로 파악되지 않는다.