블로그스팟에 애드센스 광고 코드 삽입하기, 완전 가이드
애드센스 승인 후 가장 중요한 작업은 ‘광고를 올바른 위치에 배치하는 것’입니다.
애드센스 승인을 받았다고 끝이 아닙니다. 수익을 내기 위해서는 내 블로그에 광고가 제대로 노출돼야 하고, 방문자가 자연스럽게 볼 수 있는 위치에 배치해야 합니다.
구글 블로그스팟(Blogspot)은 워드프레스처럼 플러그인 방식이 없어서 광고 코드 삽입을 직접 해줘야 하지만, 그만큼 단순하고 깔끔하게 설정할 수 있습니다.
이 글에서는 초보자도 그대로 따라 할 수 있는 단계별 가이드와 함께, 수익을 높이는 팁까지 알려드립니다.
1. 방법 1: '가젯'을 이용한 광고 코드 삽입 (초보자에게 추천)
HTML을 건드리지 않고도 사이드바·푸터·헤더 같은 고정 영역에 광고를 쉽게 추가할 수 있는 방법입니다.
언제 사용하나요? 블로그의 고정된 구역에 광고를 배치하고 싶을 때, 즉 ‘모든 페이지에 동일하게 나타나는 광고’를 추가하고 싶을 때 가장 편리합니다. 예를 들어 사이드바 배너, 헤더 광고, 푸터 광고 같은 것이 여기에 해당합니다.
장점:
- HTML 코드를 직접 수정할 필요가 없어 오류 발생 확률이 매우 낮습니다.
- 위치 추가·삭제가 쉽고, 실수하더라도 되돌리기가 간단합니다.
- 블로그 초보자도 마우스 클릭만으로 쉽게 설정할 수 있습니다.
단점
- 문맥에 맞춰 적절한 위치에 광고를 배치하지는 못합니다. 맥락없이 광고가 등장하는 아쉬움이 있습니다.
위와 같은 장단점이 있지만, 그래도 손쉽게 광고를 배치하고 관리할 수 있다는 것은 최고의 장점입니다.
단계별 가이드:
- Step 1: 블로그 스팟 관리자 페이지(대시보드)에서 '레이아웃' 메뉴로 이동합니다.
- Step 2: 광고를 넣고 싶은 위치(예: 사이드바)의 '+ 가젯 추가' 버튼을 클릭합니다.
 |
| 레이아웃에서 가젯 추가하기 |
- Step 3: 가젯 목록에서 'HTML/자바스크립트'를 찾아 선택합니다.
 |
| 가젯추가 ->>> html/자바스크립트 |
- Step 4: 애드센스에서 생성한 광고 코드를 '콘텐츠' 입력란에 그대로 붙여넣습니다. (제목은 비워두어도 됩니다.)
- Step 5: '저장'을 클릭하면 광고가 바로 적용됩니다.
 |
| 코드는 붙여넣고, 제목은 비워두세요 |
TIP: 광고를 여러 개 넣을 때는 ‘광고 간격’을 적절히 띄워서 방문자가 답답하지 않게 만드세요. 동일 영역에 광고를 두세 개 이상 붙이면 오히려 클릭률이 떨어질 수 있습니다.
2. 방법 2: 'HTML 편집'을 이용한 광고 코드 삽입 (고급 사용자에게 추천)
본문 중간, 특정 위치, 자동 광고 코드 삽입 등 ‘자유도 높은 배치’를 원하면 HTML 편집을 사용합니다.
언제 사용하나요? 글 본문 중간에 광고를 삽입하거나 블로그 전체 특정 위치에 광고를 자유롭게 배치하고 싶을 때 활용합니다. 특히 애드센스의 ‘자동 광고’ 코드를 블로그 전체에 적용할 때 유용합니다.
장점:
- 광고 게재 위치를 세밀하게 제어할 수 있어 수익 최적화에 유리합니다.
- 블로그 테마에 한 번 삽입하면 모든 페이지에 자동으로 적용되므로 관리가 편리합니다.
2-1. 블로그 전체(테마)에 적용하는 방법
모든 페이지에 동일한 광고를 적용하려면 테마 HTML 편집을 이용합니다.
- Step 1: 블로그 스팟 관리자 페이지에서 '테마' 메뉴로 이동합니다.
- Step 2: '맞춤설정' 옆의 작은 화살표를 눌러 'HTML 편집'을 선택합니다.
- Step 3:
</head>태그를 찾아 그 바로 위에 애드센스 ‘자동 광고’ 코드를 붙여넣고 '저장'합니다.
 |
| 테마 수정하는 방법 |
TIP: 테마 HTML을 수정하기 전에 ‘백업’ 기능으로 기존 테마를 저장해두세요. 혹시라도 발생할 수 있는 오류에 대응 할 수 있습니다.
2-2. 개별 게시물(본문)에 적용하는 방법
글마다 다른 위치에 광고를 넣고 싶다면 글쓰기 에디터에서 HTML 보기로 전환해 삽입합니다.
- Step 1: 블로그 글쓰기 에디터에서 광고를 넣고 싶은 위치에 커서를 두고 'HTML 보기' 버튼을 클릭합니다.
- Step 2: 원하는 위치에 애드센스 코드를 붙여넣습니다.
- Step 3: '업데이트' 또는 '게시'를 눌러 저장합니다.
TIP: 본문 중간 광고는 글의 흐름을 해치지 않는 선에서 적절한 간격으로 배치하세요.
3. 가장 쉽게 광고를 넣는 방법(복사·붙여넣기) 가이드
초보자도 따라 하기 쉬운 ‘복사·붙여넣기’ 방식으로 광고를 바로 넣는 방법입니다.
- 구글 애드센스에 로그인 후 광고 메뉴로 들어갑니다.
- 광고 단위를 새로 만들고 광고에서 제공하는 HTML 코드를 복사합니다.
 |
| 애드센스 광고단위 생성 |
이후, 블로그스팟 편집 화면(HTML보기)에서 원하는 위치에 HTML 모드로 전환해 아래와 같이 붙여넣을 수 있습니다.
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:block; text-align:center; margin:20px 0;"
data-ad-client="ca-pub-xxxxxxxxxxxxxx"
data-ad-slot="0000000000"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>- 블로그 글 작성 화면에서 HTML 모드(또는 코드 모드)로 전환합니다.
- 원하는 위치에 복사한 광고 코드를 붙여넣습니다.
 |
| html 보기 메뉴 진입 |
 |
| html 보기 메뉴 진입 |
TIP: HTML 모드에 붙여넣으면 코드가 깨지지 않고 그대로 적용됩니다.
위치별 붙여넣기 예시
아래 예시처럼 “광고코드” 부분에 애드센스에서 복사해 온 코드를 그대로 붙여넣으시면 깔끔하게 적용됩니다.
글 상단(제목 바로 아래)
<!-- 글 상단 광고 -->
<div style="text-align:center; margin:20px 0;">
광고코드
</div>
본문 중간(소제목 사이)
<!-- 본문 중간 광고 -->
<div style="text-align:center; margin:20px 0;">
광고코드
</div>
글 하단(결론 앞)
<!-- 글 하단 광고 -->
<div style="text-align:center; margin:20px 0;">
광고코드
</div>
TIP: 이렇게 하면 복사와 붙여넣기만으로도 광고를 깔끔하게 넣을 수 있습니다. 여백 등 스타일 속성은 그대로 두셔도 되고 필요하면 수치를 조정할 수 있습니다.
5. 공통 유의사항 및 팁
광고는 즉시 노출되지 않을 수 있으며, PC·모바일 모두에서 꼭 확인하세요.
- 즉시 노출되지 않음: 광고 코드 삽입 후 구글 시스템이 인식하는 데 시간이 걸릴 수 있습니다.
- PC와 모바일 동시 확인: 반드시 PC와 모바일 환경에서 광고가 올바르게 표시되는지 확인
- 수정 금지: 애드센스 코드 임의 수정 시 오류 발생 가능
- 데이터 분석: 애드센스 보고서를 통해 수익이 높은 광고 단위를 주기적으로 확인
추가 팁: 방문자의 경험을 해치지 않는 선에서 배치하는 것이 장기적인 수익에 가장 좋습니다.
댓글 쓰기