자바 스크립트 history.pushState() 함수를 이용한 구글 애스센스 중복 페이지 로스(loss) 최소화 하기

티스토리의 경우 페이지 내에 관련 카테고리의 다른 글을 선택하면 /?categori=55555와 같은 매개 변수를 넘깁니다. 이는 같은 내용 같은 동일 페이지 일지라도 SEO측면에서도 바람직 하지 않고 애드센스를 운영하는 웹마스터라면 페이지가 분산되어 광고 게재율과 입찰가 등에 영향을 끼칩니다.

가령 본 블로그의 글 번호 /50으로 포스팅을 하면 최초 방문자가 페이지를 보게 됩니다. 이는 애드센스서버에 새로운 페이지가 생성되었다고 알리는 행위로도 해석 될 수 있습니다. 구글 애드센스는 일정의 절차(자동심사)를 거쳐 이 페이지에 광고를 게시합니다. 그런데 차후 방문자가 제 블로그의 다른 포스트를 보다 위의 포스트를 클릭하면 /50?category=675840라는 별도의 url을 사용합니다. 아무래도 대표 글 격인 /50보다 방문자도 적고 관련 해서 평판도 낮아 광고가 재대로 게시되지 않거나 게시된다 하더라도 입찰가가 낮은 광고가 게시될 확률이 큽니다.

필자는 이 블로그를 운영하기 전에 여러 블로그를 운영 한 적이 있는데 그때 쌓였던 애드센스 데이터 자료를 보면 확연히 차이가 났습니다. 위 자료는 모 블로그의 게시 글 /50의 이번 달 게시자 수익 자료입니다. 대표 글(url)격인 /50과 /50?category=675840의 차이를 보면 무슨 얘기를 하는지 잘 이해가 되실 겁니다. 물론 /50?category=675840이 수익에 미치는 부분은 미비하다 고는 하나(위의 자료는 한 달치 임을 감안) 1년 2년 또는 그 이상의 데이터가 쌓인다고 가정하면 이 로스(loss)가 그리 작아만 보이지도 안습니다.

HTML5는 사용자가 히스토리 엔트리를 추가하거나 변경할 수 있는 history.pushState()와 history.replaceState() 메서드를 제공합니다. 이를 잘 활용하면 페이지 새로 고침 없이(no page refresh) 관련 매개변수를 넘기거나 url 등을 처리 할 수 있습니다.

    <!-- 티스토리 카테고리 매개변수 지우기 -->
    <script type="text/javascript">		
    //브라우저가 pushState가 지원되지 않는다면 사용하지 않도록 설정
    if(typeof(history.pushState) == 'function')
    {
    //현재 주소를 가져온다.
    var CatagoryURL = location.href;

    //게시글 중 매개변수 category가 붙으면 없애버린다.
    CatagoryURL = CatagoryURL.replace(/\?category=([0-9]+)/ig,'');

    //페이지 새로 고침 없이 갱신
    history.pushState(null, null, CatagoryURL);
     }		
    </script>

위의 간단한 자바스크립트 코드로 페이지 교체 없이(refresh) 이 문제를 해결 할 수 있습니다. 티스토리 뿐만 아니라 네이버 블로그 등 모든 웹사이트 페이지에 적용할 수 있습니다. 이상 입니다.