[HTML] 캐노니컬 태그 (+ HTML 문서가 아닐 때 캐노니컬)

 

캐노니컬 태그 Canonical tag

SEO 개선을 위한 중요한 기능 중 하나로 한 페이지가 가리키는 여러 개의 주소가 존재할 때, 검색 엔진에게 어떤 주소가 원본인지 알 수 있도록 사용하는 태그이다.

 

캐노니컬 태그 필요성

파라미터(쿼리스트링)를 사용하거나, 모바일 주소와 같이 여러 주소가 나오게되면 검색엔진 로봇은 어떤 주소가 페이지를 가리키는 좋은 주소인지 알지 못한다. (https://test.com/page=1, http://m.test.com/index.jsp 와 같은 경우 외에도 쿼리스트링만 달라지는 경우에도 검색 엔진은 다른 주소로 인식한다.) 

 

이러한 문제를 해결하는 방법으로 크게 두 가지가 있는데, 검색 엔진이 스스로 어떤 URL이 표준(캐노니컬)인지 판단하도록 하는 방법과 페이지에 표기하는 방법이 있다.

 

두 방식 다 사용되는 방식이지만 첫 번째 방식으로 하게 되면 페이지 소유주가 원한 표준 URL과 검색 엔진이 판단한 표준 URL이 일치하지 않을 수도 있다. 이러한 문제를 방지하기 위해서 head 태그 안에 캐노니컬 태그로 표준 URL을 설정해준다.

 

HTML 문서에서 캐노니컬 태그 구현

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

 

HTML 문서 상에 명시하는 경우 캐노니컬 링크 엘리먼트 시멘틱 태그를 사용한다. 

<link rel="canonical" href="표준URL">

 

캐노니컬 링크 엘리먼트 태그는 두 개의 속성으로 구성되어 있으며 rel 속성 값을 canonical로, href 속성값을 표준 URL로 하면 된다. 일반적으로 HTML 문서 head 안에 작성한다.

 

 

HTML 문서가 아닐 때 캐노니컬 태그 구현

HTML 문서가 아닌 PDF와 같은 다른 형식의 경우 캐노니컬 링크 엘리먼트 태그를 사용할 수 없다. 이럴 때는 앞서 언급한 두 가지 방법 중 http 응답 헤더에 명시하는 방법을 사용할 수 있다.

HTTP/1.1 200 OK #HTTP 프로토콜 버전과 성공 상태 코드
Content-Type: application/pdf #pdf문서
Link: <표준 URL>; rel="canonical"
Content-Length: 4223 #문서 크기
...

 

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

 

캐노니컬 태그와 301 Redirection

캐노니컬 태그 외에도 301 Redirection이나 사이트맵을 활용할 수도 있지만 캐노니컬과는 다른 경우이다. 301 Redirection의 경우 해당 페이지를 더 이상 사용하지 않아 다른 페이지로 사용자를 이동시킬 때 사용한다. 즉, 301 Redirection을 설정하면 해당 페이지가 새 주소로 영구히 이전되었다는 의미로 받아들여지게 된다. 사용하는 페이지라면 캐노니컬 태그를 사용하는 것이 SEO 관리에 유리하다.

HTTP/1.1 301 Moved Permanently #301코드: 영구적인 리다이렉션을 나타냄
Location: 이전된 페이지 주소