정보/블로그 운영팁

티스토리 URL의 category 부분 제거하여 광고 수익 상승 시키기

아미넴 2021. 9. 10.
반응형

블로그를 운영하는 데 좋은 팁이 있어서 오랜만에 글을 씁니다.

 

목차

     

    티스토리 URL의 문제점

    같은 글에도 다음과 같이 두 가지 URL이 있습니다.

     

    https://sangminem.tistory.com/506

    https://sangminem.tistory.com/506?category=933078

     

    이는 구글 애드센스에서 각각 다른 URL로 취급하여 페이지 뷰 수를 분산시켜 광고 단가에 안 좋은 영향을 준다고 합니다. 보통 페이지 뷰 수가 높을 수록 광고 단가가 높다고 하네요.

    따라서 블로그 카테고리 페이지에서 글을 접근할 때 생기는 링크의 ?category= 이후 부분을 모두 제거하여 단일 URL로만 접근하도록 유도하는 것이 좋습니다.

     

    얼마 전까지 그냥 보기 안좋다는 정도로만 생각하고 이 문제를 해결할 생각도 없었는데 우연히 몽브르님의 포스팅을 보고 알게 된 사실입니다.

     

    링크 URL에서 category 부분 제거 방법

    검색해 보니 이미 관련 포스팅이 많이 있지만 저는 좀 다른 방법으로 해결을 해보도록 하겠습니다.

    같은 내용을 다룰 거 였으면 글을 쓰지도 않았겠죠 ㅎ

     

    저는 페이지가 로드된 이후에 현재 페이지에 포함된 모든 a 태그의 링크를 미리 검사하여 category 부분을 제거한 새로운 URL로 대체하는 방법을 사용하였습니다. history.pushState 메서드를 사용하는 방법은 세련되어 보이지만 완전하지 못한 방법 같습니다.

     

    관리 페이지 > 꾸미기 > 스킨 편집 으로 이동합니다.

     

    html 편집을 클릭합니다.

     

    그럼 위와 같은 HTML 에디터가 뜨는데 여기에서 작업을 해 보겠습니다.

     

    제일 하단 body 태그 안쪽에 script 태그를 만들어 붙여넣기 하시면 됩니다.

     

    해당 위치에 같은 함수를 하나 작성합니다.

    function replaceLink() {
        var aLink = $('a');
        for(var i=0;i<aLink.length;i++) {
            if(aLink.eq(i).attr('href')) {
                aLink.eq(i).attr('href',aLink.eq(i).attr('href').split("?category=")[0]);
            }
        }
    }

     

    그리고 페이지가 다 로드된 후 실행되는 구문에서 위 함수를 실행시키면 됩니다.

    $(document).ready(function() {
        replaceLink();
    });

     

    저는 var aLink = $('a'); 부분의 범위를 더 축소시키기 위해 var aLink = $('.inner a');로 적용하였습니다. 각자 사용하는 블로그에 맞게 a 태그의 범위를 한정하여 적용하셔도 좋습니다. 잘 모르시는 분은 그냥 그대로 해도 문제는 없습니다.

     

     

    (내용 추가)

    외부 링크를 타고 들어온 경우는 막지 못하므로 안전하게 history.pushState를 활용한 방법도 추가하겠습니다. 원본 출처가 어딘지는 모르겠지만 상당히 많은 사람들이 추천하는 방법입니다.

     

    위의 위치에 다음 코드를 붙여 넣기만 하면 됩니다.

    if (typeof(history.pushState) == 'function') {
        var CatagoryURL = location.href;
        CatagoryURL = CatagoryURL.replace(/\?category=([0-9]+)/ig, '');
        history.pushState(null, null, CatagoryURL);
    }

    category가 붙은 링크로 접근을 하더라도 정제된 주소로 히스토리를 쌓는 방법입니다. 다만 지원하지 않는 브라우저도 있으므로 둘 다 쓰는 것이 효과적입니다.

    참고로 replaceState를 사용한 방법도 있는데 현재 히스토리에 덮어 씌워 뒤로가기 시 이전 페이지로 돌아갈 수 없어서 추천드리지는 않습니다.

     

    적용 결과

    유입 경로를 보면 너저분한 링크가 사라져서 깔끔하니 보기 좋네요.

     

    어렵지 않은 사항이니 다들 꼭 적용하시기 바랍니다.

    반응형
    그리드형(광고전용)

    댓글24

    • 와우...역시나 너무 좋은 정보입니다. 저로썬 감히 시도해볼 생각도 못했을텐데 정말 대단하십니다!
      이렇게 쉽게 설명해주셨는데,
      스크립트 아래
      function replaceLink() {
      var aLink = $('a');
      for(var i=0;i<aLink.length;i++) {
      if(aLink.eq(i).attr('href')) {
      aLink.eq(i).attr('href',aLink.eq(i).attr('href').split("?category=")[0]);
      }
      }
      }
      붙혀넣기 하고 그 아래 또 스크립트 넣고 적용했는데,
      적용이 안되네요...
      답글

    • LunaCell 2021.09.11 11:35 신고

      이게 혹시 그거인가요? 아래 숫자 눌러 차례 넘어가면 광고 표시 안되는데 그걸 해결하는 방법인가용?
      답글

      • 아미넴 2021.09.11 12:30 신고

        아네 맞아요~ 아래 표시된 숫자 링크도 전부 단일 URL로 바뀝니다.
        적용이 안 된 스킨이라면 적용하시는걸 추천드릴게요!

      • LunaCell 2021.09.11 12:32 신고

        근데 이게 카테고리도 마찬가지고 페이지 넘기면 url 뒤에 ?page="숫자" 이렇게 url이 오염되어도 광고 송출이 안되네요.

        그냥 뭘 누르면 뒤에 오염 붙은 tistory.com/ 이 뒤에 붙는 url들 없애는 작업을 해주셔야 될 것 같네요 ㅋㅋㅋ 티스토리가 이상하게 개발해놨네요.

      • 아미넴 2021.09.11 12:38 신고

        아.. ?page= 붙는 경우도 있나요? ㄷㄷ 어떻게 확인할 수 있을까요?

      • LunaCell 2021.09.11 12:39 신고

        커버 다 지우시고 완전 기본 전체글에서 맨 아래 보면 버튼 누르면 페이지 넘기는 기능 있잖아요? 그거 누르면 페이지 넘기기 기능이에요 그 뒤에 page="숫자" url이 붙는데 페이지 넘길때마다 광고 표시 안되네요.

        이거는 커버 씌우면 못 보는 문제이긴하죠.

      • 아미넴 2021.09.11 12:41 신고

        아아 그렇군요! 그것도 제거하는 로직 추가해 볼게요~

      • 아미넴 2021.09.11 12:43 신고

        지금 좀 더 봐 보니 말씀하신 내용은 카테고리나 전체 글에 붙은 page 파라미터는 페이지 구분을 위한 어쩔 수 없는 부분이네요. 이건 글에만 해당하는 내용이라 조치하긴 어려워 보여요~

      • LunaCell 2021.09.11 12:44 신고

        아 그렇군요. 쓰읍 아 티스토리거 이상하게 만들어놨내요. 한번 카카오에 문의 넣어보도록 하겠습니다.

    • 아직미정 2021.09.14 23:13 신고

      음...저는 그냥 아미넴님이 올려주시는거 복붙하는 컴맹인데,,

      그냥 </body> 바로 위에

      <script>
      function replaceLink() {
      var aLink = $('a');
      for(var i=0;i<aLink.length;i++) {
      if(aLink.eq(i).attr('href')) {
      aLink.eq(i).attr('href',aLink.eq(i).attr('href').split("?category=")[0]);
      }
      }
      }
      $(document).ready(function() {
      replaceLink();
      });
      </script>

      를 넣기만 하면 되나여??

      근데 <script> 이런애들 앞에 공간??띄워쓰기?? 이거는 중요하나여??
      <script> -1번
      <script> -2번
      1번이나 2번 그냥 똑같은거죠??

      하,,,,,,,,,,너무 몰라서 죄송합니다.......
      답글

      • 아미넴 2021.09.15 00:23 신고

        네 맞습니다. 그렇게만 하시면 잘 될거예요 ㅎ
        인덴트는 맞춰주는 습관을 들이시는 것이 좋지만 대충해도 기능에는 전혀 이상이 없습니다.

    • 힘센캥거루 2021.10.02 01:24 신고

      와 형님... 이런걸 무료로 주시다니 혜자십니다. 잘쓸게요!!
      답글

    • 제이온 (Jayon) 2021.10.10 11:50 신고

      미넴 스킨에는 이미 적용되어있나요? replaceLink()를 로드하는 로직에 넣으려고 하는데, 로직 위치가 어디있는지 궁금합니다.
      답글

    • Hanna the staff 2022.04.05 02:44 신고

      좋은 정보 감사합니다!
      "그리고 페이지가 다 로드된 후 실행되는 구문에서 위 함수를 실행시키면 됩니다.

      $(document).ready(function() {
      replaceLink();
      });" 이 곳의 정확한 위치도 알 수 있을까요? 그리고 저는 문자로 url 를 지정해놔서 entry 인데, 카테고리를 entry로 바꾸면 되겠죠? 시간내주셔서 감사합니다~
      답글

      • 아미넴 2022.04.05 13:13 신고

        문자 url에도 주소 뒷 부분에 category 붙는건 똑같으므로 따로 수정하실 부분은 없습니다.
        $(document).ready 메서드는 어디와도 상관없지만 결정이 어려우시다면 body 태그 맨 하단에 script 태그를 하나 만들어서 위치시키셔도 됩니다.

      • Hanna the staff 2022.04.05 20:06 신고

        아 그렇군요 감사합니다 :):):)

    • Easy Work Aid 2022.05.06 05:48 신고

      /entry/ 이게 주소 사이에 들어가던데 이걸 삭제할 방법은 없나요? 아미넴님 주소url에는 그게 안떠서요
      답글

    💲 추천 글