원본 본문으로 이동하기

Ajax 기반의 해시뱅 사이트의 구글 수집 및 페이스북 오픈 그래프

박용서 - google collection and Open Graph protocol for the ajax based (hash / hashbang) site 이 방법은 구글 및 페이스북등의 일부 사이트가 이용하는 방법으로 표준적인 방법은 아닙니다. 서론 가리사니 처럼 AJAX 기반의 hash 사이트의 경우는 일반적으로 검색엔진 수집이나 오픈 그래프 등이 되지 않는 치명적인 단점이 있습니다. 때문에 검색엔진이 인식하게 하기 위해서 https://gs.saro.me/se/ 같은 수집용 페이지를 따로 만들어 둡니다. (물론 갓 구글은.... 웬만한 Ajax 이나 해시뱅 사이트도 다 수집합니다... 가리사니포함) 하지만 오픈 그래프의 경우는 아래 설명대로 서버에 요청한 경로 페이지 내에서만 찾는 방법이기 때문에 다른 방법을 사용해야 합니다. 문제 1. 엔진은 일반적으로 AJAX 사이트 여부를 알 수 없습니다. 그래서 구글이나 페이스북 같은 경우 주소에 해시뱅이 포함되어 있는지 확인합니다. 이전 가리사니 처럼 https://gs.saro.me/#m=elec 이런식의 주소라면 그냥 일반 사이트로 인지합니다. 다만 https://gs.saro.me/#!m=elec 처럼 #(해시마크)와 바로 뒤에 ! 가 붙어있는 경우 이를 ajax 기반의 해시뱅(#!) 사이트로 인식합니다. 해결 1. 사이트의 # 부분을 반드시 #!(해시뱅)으로 시작하도록 바꾸어야 합니다. 문제 2. AJAX 사이트라고 인식되면 파라미터로 _escaped_fragment_ 를 던지게 됩니다. 예를들어 주소가 https://gs.saro.me/#!m=elec 였다면 https://gs.saro.me/?_escaped_fragment_=m%3Delec 와 같이 파라미터를 던지게 됩니다. 즉, #! 뒤의 모든 값을 인코딩 한 후 동일 경로의 ?_escaped_fragment_ 로 다시 호출하게 됩니다. 해결 2. 파라미터가 _escaped_fragment_ 로 들어올 때 별도의 분기를 작성 합니다. 이유 hash는 클라이언트에서만 사용하는 값이며, 서버는 해시를 받지도 처리하지도 않습니다. 때문에 오픈 그래프 같이 요청 경로만 가지고 판단해야 하는 경우 동작하지 않으며, 이를 해결하기 위해서 _escaped_fragment_ 라는 비공식적인 방법이 등장하게 되었습니다. 주의 표준적인 방법은 아니며, 대다수 사이트와 메신저들은 아직 지원하지 않습니다. 사실 구글이랑 페이스북이 앞서가는 겁니다... 하하하;;; - HTTP HTML