이번 포스팅은 티스토리 상단 애드센스 광고 2개 삽입 방법 대해서 정리한 내용을 기반으로 작성하도록 하겠습니다.
수익 메뉴가 생기기 전까지는 플러그인이 제공되어 상단 광고 2개 적용이 가능했지만, 지금은 수동으로 HTML에 구현을 해주셔야 합니다.
티스토리 플러그인 활용 – 구버전
: 티스토리 운영하시는 이유가 여러 가지가 있지만 그중 하나는 구글 애드센스를 적용하여 추가적인 수익을 얻기 위한 것일 겁니다.
그래서 그렇게 어렵다는 애드고시까지 보고 구글 애드센스 승인을 받으려고 노력하시는 걸로 인지하고 있습니다.
구글 애드센스 승인 후에는 광고 선정, 타입, 위치 등 구글 애드센스 사용법에 대해서 공부를 하셔서 애드센스 광고를 적용을 하실 겁니다.
여러 가지 방법 중에 하나가 상단에 구글 애드센스 광고 노출을 위해서 티스토리 글 상단 애드센스 광고 2개를 넣는 경우가 많습니다.
물론 “상단 2개의 광고 적용이 효과가 있다, 없다” 는 의견이 분분하지만 확실히 동일한 면에 많은 광고를 노출시키는 것만으로 수익이 조금이나마 상승할 수 있는 가능성은 있다고 판단이 됩니다.
예전에는 티스토리 글 상단 애드센스 광고 2개 넣는 방법은 플러그인이 있었을 때는 플러그인을 이용해서 삽입을 하면 간단하게 적용이 가능하였습니다.
하지만 관리 페이지에서 수익 메뉴가 생기면서 해당 부분은 자동적으로 들어가게 설정만 가능하게 되었습니다.
이런 플러그인 기능이 사라지고, 관리 페이지에 수익 메뉴가 적용이 됨으로써 수동으로 HTML에 삽입하지 않으면 이전에 구현했던 티스토리 글 상단 애드센스 광고 2개를 구현이 불가능한 상태입니다.
물론 이 포스팅을 통해서 소개 드리는 방법 말고도 여러 가지 방법이 있을 수 있으니 원하시는 방향으로 적용하시면 좋을 거 같습니다.
HTML 직접 삽입 방법
: 그럼 위에서 설명 드린 플러그인 없이 수작업으로 티스토리 상단 애드센스 광고 2개 삽입 방법 대해서 설명드리도록 하겠습니다.
참고로 스킨 본문 영역이 좁은 경우에는 광고 2개가 들어가지 않고 깨질 수 있는 점 참조 부탁드립니다.
단계 1 – 일단 티스토리 설정 창에서 사전 작업을 해주셔야 합니다.
사전 작업으로는 티스토리 관리 페이지에서 수익 메뉴에 상단의 광고를 해제를 해주셔야 합니다.
광고 설정 해제를 위해서는 “관리 페이지”에 “수익 메뉴”로 들어가셔서 애드센스 관리를 들어가시면 됩니다.

본문 상단 광고를 사용 안 함으로 토글을 변경하여 비활성화를 해주셔야 합니다.
글을 작성하고 자동 광고를 선호하시는 분들이 계시는데 저는 개인적으로 중간 중간에 수동으로 광고를 넣기 때문에 다른 부분은 토글이 비활성화가 되어 있습니다.
만약 수익 메뉴를 적극적으로 사용하시는 분들이라면 본문 상단만 비활성화해 주시면 됩니다.
– 본문 상단 광고 비활성화 경로 : 설정 – 수익 – 본문 상단 광고 비활성
단계 2 – 해당 코드를 입력하였음에도 불구하고 모바일에는 상단에 2개가 보이지 않고 하나만 보입니다.
그래서 모바일 웹 자동 연결을 해제를 해주셔야 합니다. 즉 기본 모바일 웹에서는 적용이 안되므로 사용 안 함으로 설정을 해주시면 됩니다.
“모바일웹 자동연결 해제” 는 관리 페이지에서 모바일 메뉴를 선택해서 “모바일 웹 자동연결을 사용하지 않습니다.”를 선택해주시면 됩니다.

▶ 인스타그램 맞팔 확인 방법 (feat. 글로빙 어플)
애드센스 광고 단위 2개 생성
단계 3 – 위에 설명 드린 것처럼 티스토리에서 사전 작업이 완료가 되면 상단에 넣을 애드센스 광고 단위를 2개 생성을 해주셔야 합니다.
광고 단위는 간단하게 말씀드리면 애드센스 사이트에서 광고를 디스플레이 형태로 2개만 생성을 해주시면 됩니다.
참고로 광고 크기는 반응형(기본값)으로 해주시면 됩니다.
그럼 2개 애드센스 광고 단위를 생성을 해주셨다면, 구글 애드센스의 고유 코드와 해당 광고 단위에 있는 코드를 아래와 같은 폼에 “광고 단위 1 코드 삽입”, “광고 단위 2 코드 삽입”에 넣어 주시면 됩니다.
<div style="text-align: center; margin-bottom: 15px;">
<style>
.adsbygoogle.post-top-first {display:block}
.adsbygoogle.post-top-second {display:none}
@media (min-width: 768px) {
.adsbygoogle.post-top-first {display:inline-block;min-width:336px;max-width:336px;width:100%;height:280px;}
.adsbygoogle.post-top-second {display:inline-block;margin-left:20px;min-width:336px;max-width:336px;width:100%;height:280px;}
}
</style>
<ins class="adsbygoogle post-top-first"
data-ad-client="ca-pub-1234567890"
data-ad-slot="광고 단위 1 코드 삽입"
data-ad-format="rectangle"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<ins class="adsbygoogle post-top-second"
data-ad-client="ca-pub-1234567890"
data-ad-slot="광고 단위 2 코드 삽입"
data-ad-format="rectangle"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
그리고 완성한 광고 코드 폼 그리고 HTML 스킨 편집 메뉴를 이용해서 [##_article_rep_desc_##] 바로 위에 넣어 주시면 됩니다.

예제로 아래와 같이 정리해서 보여 드리도록 하겠습니다. 참고로 s_article_rep – s_permalink_article_rep 하위에 있는 치환자입니다.
->> 여기에서 넣어 주시면 됩니다.
[##_article_rep_desc_##]

해당 광고 코드 폼은 위에서 설명 드린 코드를 이용하시면 됩니다.
Sample 이기 때문에 본인의 pub 코드를 입력을 해주셔야 합니다.
이렇게 해주시고 일정 시간이 흐른 후에는 상단에 광고가 2개 위치하는 걸 확인하실 수 있을 겁니다.
참고로 아래 사진처럼 보이실 겁니다.
그리고 참고로 해당 코드 폼을 적용하기 전에 HTML 전체 코드를 메모장이나 워드에 백업을 해놓고 작업을 하시는 걸 추천드립니다.
왜냐하면 작업하다가 다른 코드를 지우게 되면 초보자 입장에서는 복귀하기가 너무 힘들기 때문입니다.
관련 글
함께 보면 도움이 되는 글
마무리
이상입니다. 티스토리 상단 애드센스 광고 2개 삽입 방법 대해서 포스팅을 하였습니다.
제 포스팅을 통해서 구글 애드센스 광고 적용하시는데 도움이 되었으면 합니다.
참고로 해당 적용하는 사항에 대해서 개인적으로 판단해보고 괜찮다고 생각하시면 적용하시는 걸 추천 드립니다. 감사합니다.