Erzsamatory Weblog


[애드센스 최적화] 블로그 본문 상단에 애드센스 광고를 넣는 방법


구글 애드센스를 통해서 많은 수익을 창출하기 위해서는 최적화라는 단계를 반드시 거쳐야만 합니다. 광고 위치 선정은 구글 애드센스 최적화의 한 방법입니다. 인터넷에 존재하는 수많은 블로그와 사이트는 모두 다른 스킨과 레이아웃을 가지고 있습니다. 따라서 방문자의 눈에 보이는 디자인은 모두 다릅니다. 디자인이 다르기 때문에, 방문자의 눈에 가장 잘 띄는 광고 위치 또한 모두 달라집니다. 수익을 높이기 위해서는 우선적으로 광고 클릭율을 높여야 하는데, 광고 클릭율을 높이기 위해서는 반드시 애드센스 광고가 방문자의 눈을 잘 사로잡을 수 있는 위치에 삽입되어야만 합니다. 이 글에서는 국내 블로그에서 자주 사용되고 있는 광고 위치에 대해서 알아볼 것입니다.



1. 본문 상단에 광고 두 개를 배치하는 방법


티스토리 블로그에서 가장 많이 사용되고 있는 광고 위치 최적화 방법입니다. 블로그의 디자인을 해치지 않으면서도 광고의 클릭율은 높일 수 있기 때문에, 가장 많은 블로거가 이 방법을 사용하고 있습니다. 일반적으로 스크롤을 하지 않아도 볼 수 있는 광고 즉, 첫 페이지에 나타나는 광고는 그렇지 않은 광고보다 클릭율이 훨씬 높다는 통계가 있습니다. 이 섹션에서 소개하는 본문 상단에 광고 두 개를 삽입하는 방법이 블로그 방문자가 스크롤을 하지 않고도 광고를 볼 수 있게 하는 방법이기 때문에, 이 방법이 다른 방법들보다는 클릭율이 매우 높다고 할 수 있습니다.

하지만 이 방법이 무조건 좋은 것만은 아닙니다. 왜냐하면 이 방법은 PC용으로만 사용이 가능하기 때문입니다. 모바일은 화면이 작기 때문에 나란히 배치되는 두 개의 광고를 모두 표시할 수가 없습니다. 따라서 모바일 화면에서는 한 개의 광고만 표시되고 나머지 한 개의 광고는 화면에 가려 보이지 않게 됩니다. 하지만 이것은 구글 애드센스 광고 게재 정책에 위반되는 것이기 때문에, 이 방법은 PC와 모바일을 하나의 스킨으로 처리하는 반응형 스킨에서는 적당하지 않습니다.

이 방법을 반응형 스킨에서 무조건 사용할 수 없는 것은 아닙니다. 자바스크립트를 통해서 모바일에서만 광고의 위치를 수정할 수가 있기 때문입니다. 자바스크립트를 활용한 광고 위치 최적화 방법은 나중에 다시 설명하도록 하겠습니다.

상단에 두 개의 광고를 표시하고자 할 때에는 다음과 같은 방법을 사용하면 됩니다.

<html>
    ..........
    <div class="googleAd" style="margin:0px auto; width:687px; padding:10px;">
        <div style="float:left; width:336px; height:280px; margin-right:15px;">
            <!-- 첫 번째 애드센스 광고 코드 (336 x 280) -->
        </div>
        <div style="float:left; width:336px; height:280px; ">
            <!-- 두 번째 애드센스 광고 코드 (336 x 280) -->
        </div>
        <div style="clear:both;"></div>
    </div>
    [##_article_rep_desc_##]
    ..........
</html>


300 x 250 광고를 배치하고자 할 때에는 width 속성을 300px로, height 속성을 250px로 변경하면 됩니다.
[##_article_rep_desc_##] 는 티스토리 스킨에서 사용되는 치환자입니다.

이렇게 함으로써 블로그 본문 상단에 애드센스 광고 두 개를 나란히 배치할 수 있습니다. 위 소스코드는 티스토리에서만 사용할 수 있습니다. 그 이유는 티스토리 블로그 스킨에서만 사용되는 [##_article_rep_desc_##] 치환자를 사용하고 있기 때문입니다. 이 치환자는 블로그의 본문이 표시되는 위치를 나타냅니다. 따라서 이 치환자의 위쪽에 내용을 입력하면 본문의 위쪽에 그 내용이 나타나고, 아래쪽에 입력하면 본문의 아래쪽에 그 내용이 나타납니다.

아래 스크린샷은 본문 상단에 두 개의 광고를 삽입하는 방법이 실제로 적용된 모습입니다.

블로그 글 상단에 광고 두개를 넣었을 때의 모습

블로그 글 상단에 광고 두개를 넣었을 때의 모습



블로그 상단에 광고 두 개를 넣는 것이 무조건 좋은 방법은 아닙니다. 왜냐하면 블로그 레이아웃이 광고 두 개를 완전히 감싸고 있는 경우에는 매우 훌륭한 디자인을 보여주지만, 이 블로그와 같이 본문의 넓이가 광고 틀보다 넓은 경우에는 빈 공간이 너무 많아져 디자인적인 면에서 약간 좋지 않을 수 있기 때문입니다. 그렇다 하더라도 글 상단에 광고 두 개를 넣는 것이 클릭율을 높이는 가장 좋은 방법임에는 틀림이 없기 때문에, 디자인을 생각할 것인지, 수익을 생각할 것인지는 블로거 본인이 선택해야 합니다.

2. 본문 우측 상단에 광고를 끼워 넣는 방법


이 방법은 뉴스 사이트에서 많이 사용되는 방법입니다. 구글 애드센스 교육 세션에서도 추천했던 방법이기 때문에 수익성 증대에 있어서는 그 효과가 입증되었다고 보면 됩니다. 일반적으로 사람의 눈은 왼쪽에서 오른쪽으로 글을 읽기 때문에 본문과 합쳐진 광고가 있다면 그 광고에 어쩔 수 없이 눈이 가게 된다는 것이 이 방법의 논리입니다. 우측 상단에 광고를 배치시키는 것이 이 방법의 주된 내용이지만, 실제로는 사이드바의 위치에 따라서 광고의 위치가 달라져야 합니다. 사이드바가 오른쪽에 있다면 광고 역시 오른쪽에 배치시켜야 하며, 사이드바가 왼쪽에 있다면 광고 역시 왼쪽에 배치시키는 것이 좋습니다. 왜냐하면 블로그 전체 틀의 가장 외곽에 광고가 삽입되면, 그 광고가 방문자에게 쉽게 발견되지 않기 때문입니다.

이 방법 역시 모바일에서의 환경을 반드시 유의해야만 합니다. 왜냐하면 본문의 최상단에 직사각형 광고를 넣었을 경우, 모바일에서는 스크롤 하지 않아도 되는 영역에 광고만 표시될 수 있기 때문입니다. 위에서 설명했던 것과는 조금 다른 것으로, 구글 애드센스 광고 게재 정책에서는 모바일 환경에서 스크롤 하지 않아도 되는 부분 즉, 첫 페이지에 본문이 하나도 표시되지 않고 광고만 출력되는 경우를 정책 위반으로 간주하고 있습니다. 일반적으로 본문 상단에 광고를 넣으면 PC 화면에서는 아무런 이상이 없지만, 모바일에서는 정책 위반이 될 수도 있으므로, 반응형 스킨을 사용하고 있는 블로거라면 반드시 PC와 모바일에서의 모든 변수를 고려한 후, 광고를 배치해야 합니다.

이 방법을 반응형 스킨에서 무조건 사용할 수 없는 것은 아닙니다. 자바스크립트를 통해서 모바일에서만 광고의 위치를 수정할 수가 있기 때문입니다. 자바스크립트를 활용한 광고 위치 최적화 방법은 나중에 다시 설명하도록 하겠습니다.

본문 우측 상단에 광고를 표시하고자 할 때에는 다음과 같은 방법을 사용하면 됩니다.

<html>
    ..........
    <div class="googleAd"  style="float:right; width:336px; height:280px;
    border:1px solid; margin-right:15px; margin-bottom:15px;">
        <!-- 구글 애드센스 광고 코드 -->
    </div>
    [##_article_rep_desc_##]
    ..........
</html>


300 x 250 광고를 배치하고자 할 때에는 width 속성을 300px로, height 속성을 250px로 변경하면 됩니다.
[##_article_rep_desc_##] 는 티스토리 스킨에서 사용되는 치환자입니다.

위에서 소개한 소스코드 역시 티스토리에서 사용할 수 있습니다. 그렇다고 무조건 티스토리에서만 사용할 수 있는 것은 아닙니다. 워드프레스와 XE 텍스타일 등 다른 블로그 서비스를 사용하고 있을 때에는, 티스토리의 [##_article_rep_desc_##] 치환자와 같은 역할을 하는 부분을 찾은 후, 그 부분의 상단에 위에서 소개한 소스코드를 넣으면 같은 결과를 구현할 수 있습니다.

이 방법이 기존의 방법과 다른 것은 본문의 내용이 광고로 인하여 아래로 내려가지 않는다는 점입니다. 기존의 방법은 광고를 추가했을 때, 본문이 아래쪽으로 내려가는 문제가 발생하였지만, 우측 상단에 한 개의 광고를 삽입하는 방법에서는 float 속성을 사용하였기 때문에, 본문이 광고 영역만 침범하지 않는 범위 내에서 그대로 출력이 됩니다. 이것이 클릭율를 높이는 원인이 되기도 합니다. 방문자가 글을 읽을 때 광고를 몇 번이나 쳐다봐야 하는 구조이기 때문에, 방문자는 광고의 내용이 궁금하여, 어쩔 수 없이 광고를 클릭하게 되는 것이지요.

아래 스크린샷은 우측 상단에 한 개의 광고를 삽입하는 방법이 실제로 적용된 모습입니다.

블로그 글 중간 우측에 광고가 삽입된 모습

블로그 글 중간 우측에 광고가 삽입된 모습



마무리


지금까지 총 두 개의 애드센스 광고 위치 최적화 방법에 대해서 알아보았습니다. 여기에서 설명한 것은 아주 기초적인 것에 불과합니다. 따라서 이를 응용하면, 더욱 다양한 애드센스 광고 위치 최적화가 가능합니다. 다른 사람이 사용하지 않는 본인만의 스킨을 사용하고 있을 때에는 여기에서 설명했던 최적화 방법이 적용되지 않을 수도 있습니다. 왜냐하면 위에서도 설명했듯이 각각의 블로그나 사이트마다 사람들의 시선이 움직이는 패턴이 다르기 때문입니다. 하지만 위에서 설명한 애드센스 위치 최적화 방법은 아주 기본적인 것이므로, 현존하는 대부분의 블로그나 사이트에 적용이 가능할 것입니다.

블로그 관리를 금전적인 대가를 바라고 하는 것은 아니지만, 블로그를 통해서 소소한 수입을 얻을 수 있다는 것은 정말 즐거운 일입니다.
http://www.erzsamatory.net/trackback/71
  1. Tracked from 직장인 재테크 상식
    2016/05/28 22:38
    저는 현재 블로그를 5개 운영하고 있습니다. 이유는 애드센스의 맞춤 채널 설정 때문에 포스트 주제별로 블로그를 분리했기 때문이죠. 맞춤 채널의 기본 개념은 "특정 블로그엔 되도록, 특정 주제의 광고만 송출" 한다는 것입니다. 수익이 높은 분들의 (온오프 모임을 포함한 여러 방법으로) 조언을 접하다 보면, 맞춤 채널을 적절히 사용해야 수익이 높아진다는 결론이 나옵니다. 근데, 문제는 방문자 수입니다. 즉, 노출 횟수와 관련이 있지요. 저는 5개의 블로..

건전한 댓글 문화를 만들어주시기 바랍니다 ^^
불건전한 댓글이 등록되는 경우 관리자의 임의적 판단으로 삭제될 수 있음을 미리 공지드립니다.

비밀글로 작성하기
  1. 2014/03/07 10:44
    Floating 방식의 광고를 시도해 보지 않았는데 넣어봐야겠네요. 예전에 다음이 측면에 광고를 넣었었기에 이 자리를 고려치 않았었거든요. 좋은 정보 잘 보고 갑니다. 감사합니다.
    • Walter E.
      Walter E.
      2014/05/06 09:55
      켈리라는 분도 이러한 형태의 광고를 추천하시더라구요.

      그냥 넣으면 정책에 위반될 수도 있겠지만, 이 방법을 쓰면 정책 위반을 피할 수 있어서 좋죠. 그리고 클릭률도 늘어나구요..
  2. 아리솔
    아리솔
    2014/03/24 20:41
    본문 우측 상단에 광고 코드에 style="float:left; 로 되어 있는데요. 이렇게 쓰는 것이 혹시 왼쪽으로 옮기는 것인지 궁금해서요. 혹시 right 로 바꿔야 오른쪽으로 가는지..ㅠㅠ
    • Walter E.
      Walter E.
      2014/05/06 09:54
      아.. !
      오류 발견해주셔서 감사합니다.
      float: right 로 해야 오른쪽으로 배치가 됩니다. ^^
  3. Danpung
    Danpung
    2014/04/20 18:32
    초보에게 이 블로그가 많은 도움이되었고
    발전하는 계기가 되었습니다
    블로그를 꾸미는도중 궁금한점이 생겼습니다
    본문 하단에 광고를 삽입하는 방법은 어떻게하나요?
    Html을 잘몰라서 위 소스에서 수정하는게 있나 봤는데 없는거같아서요..
    • Walter E.
      Walter E.
      2014/05/06 09:54
      광고를 하단에 넣으려면

      스킨 HTML 중에서

      [##_article_rep_desc_##]

      아래쪽에 광고 코드를 넣으면 됩니다. ^^
  4. 즈칸루하
    즈칸루하
    2015/06/25 17:07
    좋은 팁 주셔서 감사합니다. 약간의 팁입니다.
    세번째 줄에 <div class="googleAd" style="margin:0px auto; width:687px; padding:10px;">
    이부분에서요 패딩을 10을 줬으니 width:678px; 이 아니라 708 픽셀로 변경하셔야 제대로 한줄로 보입니다.
    이 부분때문에 30분을 매달렸네요. 제가 익스 버전에 따라 다른 건지 모르지만...
    정확하게 하시기 위해서는 패딩을 10을 줫으니 총합이 +20이 더되어야 한다는 팁입니다.
    • Walter Erzsa
      Walter Erzsa
      2015/06/26 17:40
      아, 그 부분을 빠뜨렸군요!
      CSS3를 지원하는 웹브라우저에서는 box-sizing: border-box 스타일을 지정하면 패딩에 상관 없이 넓이가 그대로 출력됩니다!
  5. 2015/07/20 03:13
    광고의 크기 등이 많이 비례를 하지 않는다는 부분에서 많이 공감이 되네요.