logo

canonical 메타 태그

Client Side April 10, 2019

검색엔진 최적화를 하다보면 같은 페이지인데 url 인자에 따라서 같은 페이지를 보는데도 여러 url로 제공되는 경우가 있습니다.

 

https://erulabo.com/
https://erulabo.com/?val=1

 

이 두가지 모두 메인 홈페이지로 가는 링크고 심지어 보여지는 정보도 똑같습니다. 단지 url 뒤에 get 파라미터가 붙었다는것인데, 뷰페이지나 일부 시스템은 이 url 파라미터에 의해 페이지 내용이 크게 바뀌는경우도 있습니다.

 

사실 사용자 입장에서는 url을 보고 인터넷을 하는것이 아니라서 크게 문제될것은 없지만 검색엔진 입장에선 이것을 구분하기가 힘들다는점이죠. 그래서 검색엔진이나 봇에게 "지금 보는 페이지는 어떤 링크로 제공되도 결국 이 url 보여주는 페이지랑 같은 페이지야!" 라고 알려줄 정보가 필요하고 그게 바로 canonical 설정입니다.

 

canonical 은 html 헤더에 link 로 선언하는 구문입니다.

 

1
2
3
4
5
6
7
8
<meta>
    ...
    
    <link rel="canonical" href="https://erulabo.com/" />
 
    ...
</meta>
 
cs

 

페이지마다 그 페이지를 대표하는 url 링크를 적어주면 됩니다. 이렇게 명시를 해놓으면 위에 처럼 설령 검색엔진의 봇이 https://erulabo.com/?val=1 로 접근해도 페이지 url 은 명시된 주소로 인식해 수집하게 됩니다.