블로그스팟 본문 수동 광고 자동화하는 방법!! (html편집에 이것만 넣으세요~)

혹시 글 하나 쓸 때마다 HTML 탭 열어서 광고 코드 붙여넣고, 또 H2 태그 찾아서 위치 확인하고 계신가요? 저도 처음엔 그렇게 했거든요. 그런데 글이 쌓일수록 이게 진짜 보통 일이 아니더라고요. 수정 하나 하려면 글마다 들어가서 광고 지웠다 붙였다... 생각만 해도 머리가 아프죠. 이제는 우리가 직접 배치할 필요 없습니다.

오늘은 저처럼 매번 광고 배치하기 귀찮았던 분들을 위해, 블로그스팟에 '치트키' 같은 광고 자동 삽입 스크립트를 넣는 방법을 정리해봤어요. 이거 한 번만 해두면 다음부턴 글만 쓰면 끝입니다! 같이 파헤쳐 볼까요?

📌 광고 배치, 일일이 하지 마세요

광고 배치는 정교해야 하지만, 작업은 단순해야 합니다.

매번 본문을 읽다가 광고를 넣을 위치를 고민하는 건 정말 소모적인 일이에요. 더군다나 실수로 광고 코드 하나 잘못 건드리면 글 전체 레이아웃이 깨질까 봐 겁나기도 하죠. 제가 소개해 드릴 방법은 자바스크립트를 활용해서 블로그가 스스로 '아, 여기가 H2 제목이구나! 여기 광고 넣어야지!'라고 판단하게 만드는 거예요.

와, 생각만 해도 편하지 않아요?

1
광고 코드 먼저 내 계정으로 교체하기

가장 먼저 해야 할 일은 내 애드센스 광고 코드를 준비하는 것입니다. 그대로 복사해서 사용하면 광고 수익이 다른 계정으로 들어갈 수 있기 때문에, 반드시 pub 코드와 slot 코드 값을 자신의 코드로 교체해야 해요.

필수 수정 영역

<ins class='adsbygoogle'
style='display:block'
data-ad-format='auto'
data-full-width-responsive='true'
data-ad-client='ca-pub-XXXXXXXXXXXX'
data-ad-slot='YYYYYYYYY'>
</ins>

⚠ 핵심 포인트
pub코드와 slot코드 값이 잘못되면 광고가 정상 출력 되지 않아요. 숫자 하나만 틀려도 수익 연결이 안 될 수 있으니 저장 전 꼭 다시 확인하세요.

2
본문 HTML 영역에 치트키 스크립트 적용하기

이제 블로그 본문을 감싸고 있는 HTML 태그를 찾아야 합니다. 설정 - 테마 - HTML편집으로 들어가세요! 그 다음 'Ctrl + F'를 눌러 <data:post.body/>를 입력 후 엔터를 치면 본문 영역에서 <data:post.body/>이 부분을 찾아 줄꺼에요. 스킨 테마에 따라 보통 1 또는 2개나 나오는데요. 1개면 그냥 그 한개를 고치면되고요. 2개일 경우 주변에 에 라는 것이 보이면 그 부분에 있는 것을 바꾸시면 되요!!

✅ HTML 편집기에서 기존 본문 태그 위치 확인

✅ 기존 코드(<data:post.body/>)를 삭제 후 그 자리에 아래 코드를 전체 붙여 넣기

<div class='post-body-captured' id='post-body-captured'>
  <data:post.body/>
</div>

<script type='text/javascript'>
//<![CDATA[
window.addEventListener('load', function() {

  var postBody = document.getElementById('post-body-captured');
  if (!postBody) return;

  function createAdUnit() {

    var adWrapper = document.createElement('div');

    adWrapper.className = 'h2-custom-ad';

    adWrapper.style.cssText = [
      'display:block',
      'width:100%',
      'max-width:100%',
      'margin:30px 0',
      'text-align:center',
      'overflow:hidden',
      'box-sizing:border-box'
    ].join(';');

    var insTag = document.createElement('ins');

    insTag.className = 'adsbygoogle';

    insTag.style.cssText = [
      'display:block',
      'width:100%',
      'min-width:250px',
      'max-width:100%'
    ].join(';');

    insTag.setAttribute('data-ad-format', 'auto');
    insTag.setAttribute('data-full-width-responsive', 'true');

    insTag.setAttribute('data-ad-client', 'ca-pub-XXXXXXXXXXXX'); // 👈 본인 애드센스 pub 코드 ID

    insTag.setAttribute('data-ad-slot', 'YYYYYYYYY'); // 👈 본인 슬롯


    var scriptTag = document.createElement('script');

    scriptTag.textContent =
      '(adsbygoogle = window.adsbygoogle || []).push({});';

    adWrapper.appendChild(insTag);

    adWrapper.appendChild(scriptTag);

    return adWrapper;
  }

  // 본문 최상단 광고
  var firstChild = postBody.firstElementChild;

  if (firstChild) {
    postBody.insertBefore(createAdUnit(), firstChild);
  }

  // H2 태그 뒤 광고
  var h2Tags = Array.from(postBody.getElementsByTagName('h2'));

  var maxAds = 5;

  var adCount = 0;

  for (var i = 0; i < h2Tags.length; i++) {

    if (adCount >= maxAds) break;

    var h2 = h2Tags[i];

    if (!h2.textContent.trim()) continue;

    h2.parentNode.insertBefore(
      createAdUnit(),
      h2.nextSibling
    );

    adCount++;
  }

});
//]]>
</script>

✅ 저장 전 따옴표(") 누락 여부 재확인

💡 처음 작업할 때 가장 많이 발생하는 실수는 따옴표 하나 빠뜨리거나 광고 코드 일부를 잘못 복사하는 경우입니다. 저장 전에 코드 줄 끝까지 한 번 더 체크하는 습관이 중요합니다. 참고로 위 스크립트 코드 복사는 H2태그 밑 광고 뿐만 아니라 본문 상단 고정 광고도 함께 포함되어 있어요. 본문 광고의 최대 5개로 셋팅을 해 놓았어요!

3
광고 개수와 H2 태그 설정 꼭 확인하기

광고 개수는 코드 내부의 var maxAds = 5; 숫자를 수정하면 조절할 수 있습니다. 실제 운영에서는 2~3개 정도가 가장 자연스럽고 클릭률도 안정적인 편입니다.

var maxAds = 5;

H2 태그를 꼭 사용해야 하는 이유

글 작성 시 제목은 반드시 H2 태그로 지정해야 합니다. 단순히 글자 크기만 키운 텍스트는 검색엔진이 제목으로 인식하지 못할 수 있습니다. 광고 삽입 위치 자동화나 SEO 구조 최적화에도 H2 태그가 매우 중요합니다.

📌 SEO 최적화 팁
H2 태그 기반 구조는 광고 배치뿐 아니라 네이버·구글 검색 노출 구조에도 긍정적인 영향을 줍니다.

⚠️ 중요!

본문 H2 밑에 광고를 자동으로 넣어주는 수동광고는 애드센스 광고 설정에서 인페이광고를 꺼둬야 충돌이 안생겨요! 나머지(전면,앵커광고)는 다 켜놓으셔도 되지만 인페이지만 꼭 끄세요! 그래야 이쁘게 광고가 나와요. 아니면 광고로 도배됩니다.

🎬 결론

📌 오늘 이야기 3줄 요약

반복 작업 탈출: 광고 자동 배치는 블로거의 시간을 아껴주는 필수 기능입니다.
코드 치환 필수: ca-pub과 slot 번호는 내 것으로 정확히 바꿔야 합니다.
개수 제한 설정: maxAds 숫자를 조절해 독자에게 쾌적한 환경을 만들어주세요.

저도 처음엔 이런 코드 건드리는 게 무서웠거든요. 혹시라도 블로그 망가질까 봐요. 근데 한 번 해보니 왜 진작 안 했나 싶더라고요. 코드 한 줄로 광고 관리에서 해방되니까 글 쓰는 재미가 더 살아났어요.

적용하시다가 막히는 부분 있나요? 아니면 더 좋은 광고 배치 꿀팁이 있다면 댓글로 알려주세요! 😊

ratings

블로그스팟 본문 수동 광고 자동화하는 방법!! (html편집에 이것만 넣으세요~)

📌 광고 배치, 일일이 하지 마세요

1광고 코드 먼저 내 계정으로 교체하기

2본문 HTML 영역에 치트키 스크립트 적용하기

3광고 개수와 H2 태그 설정 꼭 확인하기

🎬 결론

Related Posts

댓글 쓰기

1
광고 코드 먼저 내 계정으로 교체하기

2
본문 HTML 영역에 치트키 스크립트 적용하기

3
광고 개수와 H2 태그 설정 꼭 확인하기