애드센스 본문 우측 상단 광고 배치로 티스토리 워드프레스 수익과 가독성 높이기

애드센스 본문 우측 상단 광고 설정과 티스토리·워드프레스 적용 위치

애드센스 광고 설정을 하다 보면 단순히 위·아래에만 붙이는 것보다, 본문 안에 자연스럽게 녹아드는 위치를 찾게 됩니다. 특히 본문 우측 상단에 광고를 배치하면 글을 읽는 흐름을 크게 방해하지 않으면서도 시선이 한번 더 머물기 때문에, 티스토리와 워드프레스 모두에서 많이 사용하는 방식입니다.

처음에는 플러그인으로 시작해 애드센스 광고 달기를 적용하고, 그 다음에는 HTML을 직접 수정해서 본문 상단·하단 광고를 넣어보게 됩니다. 여기까지 익숙해졌다면 한 번쯤 우측 상단 고정 광고도 시도해 볼 만합니다.

애드센스 본문 우측 상단 설정 - 티스토리 워드프레스

플러그인을 사용하면 애드센스 광고를 빠르게 붙일 수 있지만, 제공하는 광고코드 위치와 규격 안에서만 움직여야 합니다. 반대로 HTML을 직접 건드리면 코드가 꼬일 수 있는 부담은 있지만, 레이아웃을 훨씬 자유롭게 조정할 수 있다는 장점이 있습니다.

본문 우측 상단, 중간, 인용문 옆 등 다양한 위치를 실험하려면 결국 소스를 만지는 쪽이 유리합니다.

• [IT 리뷰/블로그 SEO] - 애드센스 광고 속도 최적화 방법 - 티스토리 워드프레스
• [IT 리뷰/블로그 SEO] - 티스토리 애드센스 광고 본문 상단 하단 HTML 설정
• [IT 리뷰/블로그 SEO] - 애드센스 자동광고 설정 및 수익 변화
• [IT 리뷰/블로그 SEO] - 티스토리 애드센스 광고 본문 중간 삽입 등록방법
• [IT 리뷰/블로그 SEO] - 티스토리 애드센스 광고삽입 플러그인 설정방법

애드센스 수익 확인은 기본, 배치까지 같이 본다

애드센스 광고수익 확인 방법 3가지

수익을 보려면 당연히 애드센스 수익 확인부터 익숙해야 합니다.

하지만 지금은 단순히 금액만 보는 것보다, 어떤 위치의 광고가 클릭과 노출에서 효율이 좋은지까지 같이 체크해 보는 게 중요합니다. 본문 상단, 중간, 하단, 그리고 본문 우측 상단에 각각 광고를 배치해 본 뒤, 페이지별 성과를 비교해 보면 어느 위치에 힘을 실을지 감이 잡힙니다.

티스토리 애드센스 본문 우측 상단 설정

이제 조금 더 응용해서 애드센스 코드를 살짝 변형해, 글 시작 부분 오른쪽 상단에 함께 들어가는 광고 레이아웃을 만들어보겠습니다.

이 방식은 티스토리뿐 아니라 워드프레스에서도 거의 같은 느낌으로 적용할 수 있습니다.

실제로 제 블로그에서도 글을 왼쪽에서 오른쪽으로 읽다 보면, 본문 초반부에 우측 상단 고정 광고가 자연스럽게 눈에 들어오도록 설정해두었습니다.

텍스트 덩어리만 줄줄이 이어지는 것보다, 적당한 크기의 광고 박스가 하나 붙어 있으면 레이아웃도 덜 답답하게 보입니다.

"아래와 같은 방식으로 하나씩 적용해보면 됩니다."

티스토리 스킨 HTML 편집으로 위치 잡기

티스토리 관리자에서 스킨 > 편집으로 들어가 HTML 편집을 연 뒤, 여기에 애드센스 코드를 직접 넣어주면 됩니다. 스킨에 따라 위치가 조금씩 다를 수 있지만, 전체 구조는 비슷합니다.

에디터에서 Ctrl + F로 검색을 열고, 글 내용이 나오는 부분을 찾기 위해 특정 태그를 검색하면 빠릅니다.

티스토리 애드센스 본문상단 하단 수동삽입

article_rep_desc

많은 스킨에서 article_rep_desc라는 부분이 본문 내용을 감싸는 영역으로 쓰입니다. 이 태그를 기준으로 위쪽에 코드를 넣으면 본문 상단 광고가 되고, 아래에 넣으면 하단 광고가 됩니다. 이번에는 상단에 붙이되, float:right를 활용해 우측으로 붙여줄 예정입니다.

검색해서 위치를 찾았다면, 코드가 읽기 쉬우도록 엔터로 여유 공간을 조금 만들어두고, 그 사이에 애드센스 코드를 넣을 준비를 합니다. 그대로 붙여넣기보다는, 아래처럼 클래스와 스타일을 한 번 정리해 두는 편이 나중에 수정하기도 편합니다.

본문 우측 상단 애드센스 코드 예시

<style> .high { width: 336px; height: 280px;} @media(max-width: 499px) { .high { width: 200px; height: 200px; } } @media(min-width: 500px) { .high { width: 250px; height: 250px; } } @media(min-width: 800px) { .high { width: 336px; height: 280px; } } </style> <div style="float: right; margin: 5px 0px 0px 10px;"> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle high"      style="display:inline-block"      data-ad-client="■"      data-ad-slot="▲"      ></ins></div> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script>

위 코드를 그대로 복사해 붙여 넣으면 기본 틀은 완성됩니다. 윗부분의 .high 클래스는 디바이스 가로 길이에 따라 광고 사이즈를 바꿔주는 역할을 하고, 아래쪽 float:right 스타일은 광고 박스를 본문 오른쪽 상단으로 붙여주는 역할을 합니다.

data-ad-client="■" data-ad-slot="▲"

가장 중요한 부분은 이 두 줄입니다. 애드센스에서 발급받은 광고 코드를 확인해 보면 data-ad-client와 data-ad-slot에 각각 고유 값이 들어 있습니다. 여기서 클라이언트 ID와 슬롯 ID를 그대로 가져와 위 코드의 ■, ▲ 자리에 넣어주면 실제 광고가 노출됩니다.

저장까지 끝냈다면 글을 하나 열어 실제로 본문 우측 상단에 광고가 잘 붙었는지 확인해보는 것이 좋습니다.

광고가 글 위쪽을 너무 많이 가린다면 margin 값을 조금 늘려 숨을 틔워주고, 모바일에서 너무 작거나 깨져 보인다면 @media 쿼리로 잡힌 사이즈를 취향에 맞게 조정해 주면 됩니다.

그리고 티스토리에서만 끝낼 필요는 없습니다. 서식 기능을 활용하면 이 코드를 템플릿처럼 저장해 두고, 본문 중간에도 같은 모양으로 불러와 쓸 수 있습니다. 워드프레스에서는 숏코드나 재사용 블록으로 비슷한 구조를 만들 수 있기 때문에, 티스토리·워드프레스를 같이 운영하는 블로그에도 잘 어울립니다.

추가로 활용해 볼 만한 애드센스 위치 아이디어

본문 우측 상단 한 곳만 잘 만들어도 레이아웃이 훨씬 안정적으로 느껴지지만, 실전에서는 페이지 구조에 따라 다른 위치도 같이 실험해 보는 편이 좋습니다.

예를 들어 짧은 글에는 광고가 너무 많아 보이지 않도록 상·하단만 두고, 글 분량이 큰 튜토리얼성 글에는 본문 중간 + 우측 상단 조합을 섞어볼 수 있습니다.

현재 애드센스에서는 자동 광고 기능이 꽤 똑똑해졌기 때문에, 수동으로 우측 상단에 고정 광고를 넣은 뒤 나머지 영역은 자동 광고에 맡기는 방식도 생각해 볼 수 있습니다.

다만 자동 광고가 본문을 너무 조밀하게 채우면 UX와 체류시간에 영향을 줄 수 있으니, 실제 페이지를 여러 번 새로고침하면서 노출 정도를 눈으로 체크해보는 편이 좋습니다.

워드프레스에서는 같은 원리로, 본문 템플릿(single.php 등)에서 본문 태그 근처에 애드센스 코드를 넣고 float:right나 flex 레이아웃을 이용해 우측에 붙이는 방식으로 구현할 수 있습니다. 티스토리와 구조는 다르지만, “콘텐츠 영역 바로 위쪽에 우측 정렬된 광고 박스를 올린다”는 개념만 같으면 결과는 거의 비슷하게 나옵니다.

결국 중요한 건 광고를 얼마나 많이 넣느냐가 아니라, 본문을 읽는 리듬을 크게 깨지 않는 위치에 광고를 자연스럽게 올려두는 것입니다. 그런 의미에서 본문 우측 상단 애드센스는 지금도 여전히 유효한 선택입니다.

FAQ – 애드센스 본문 우측 상단·티스토리·워드프레스 관련 자주 묻는 질문

Q. 본문 우측 상단에 광고를 넣으면 애드센스 정책에 문제가 되지 않을까?
A. 기본적으로 콘텐츠를 가리지 않고, 사용자가 실수로 클릭하도록 유도하는 디자인(클릭 유도 문구, 오해를 부르는 버튼 등)만 피하면, 본문 옆 광고 자체는 일반적으로 허용되는 편입니다. 다만 글 첫 문단을 거의 덮어버릴 정도로 크게 붙이거나, 광고를 실제 콘텐츠처럼 보이게 만드는 연출은 피하는 게 좋습니다.

Q. float:right 대신 다른 방식으로 정렬해도 될까?
A. 가능합니다. 최근에는 flex 레이아웃이나 grid를 이용해 본문과 광고 박스를 나란히 배치하는 방식도 많이 씁니다. 다만 티스토리 기본 스킨에서는 float 기반 구조가 여전히 많기 때문에, 스킨 구조를 잘 모를 때는 float:right + margin 조합이 가장 안전한 편입니다.

Q. 모바일에서는 우측 상단 광고가 너무 작게 보이는데 어떻게 조정할 수 있을까?
A. 위 코드처럼 @media를 활용해 max-width, min-width 조건을 나누고, 모바일 구간에서 width와 height 값을 조금 넉넉하게 잡아주면 됩니다. 필요하다면 모바일에서는 오른쪽 정렬을 없애고 가운데 정렬 블록 광고로 바꾸는 것도 하나의 방법입니다.

Q. 티스토리 말고 워드프레스에서도 같은 코드를 그대로 써도 될까?
A. 애드센스에서 발급받는 광고 코드 구조는 거의 동일합니다. div, ins, script 태그 구조는 워드프레스에서도 똑같이 동작하니, 테마의 single.php나 콘텐츠 템플릿에 넣고 CSS만 테마에 맞게 손보면 됩니다. 숏코드나 위젯에 등록해 두고 재사용하는 방식도 많이 씁니다.

Q. 자동 광고와 수동 광고를 같이 쓰면 광고가 너무 많아 보이지 않을까?
A. 실제로 그렇게 느껴질 수 있습니다. 그래서 고정으로 꼭 필요한 위치 한두 곳만 수동 광고로 고정하고, 자동 광고는 페이지당 최대 개수를 줄이거나, 특정 영역(사이드바, 본문 중간 등)을 선택적으로만 활성화하는 식으로 조정하는 것이 좋습니다.

Q. article_rep_desc가 스킨에 없을 때는 어떻게 찾아야 할까?
A. 스킨에 따라 태그 이름이 다를 수 있습니다. 이럴 때는 article, entry, post, content 같은 단어를 검색해보면서 실제 본문 텍스트가 나오는 부분을 찾아내면 됩니다. 그 주변에 광고 코드를 넣으면 티스토리 애드센스 본문 우측 상단 구조를 비슷하게 만들 수 있습니다.

Q. 코드가 꼬여서 레이아웃이 깨졌을 때 되돌리는 가장 쉬운 방법은?
A. 수정하기 전에 HTML 전체를 한 번 복사해서 메모장이나 별도 파일에 백업해 두면, 레이아웃이 망가졌을 때 그대로 붙여넣어 복구할 수 있습니다. 이후에는 광고 코드만 천천히 다시 추가하면서 어느 지점에서 문제가 생기는지 확인해 보는 것이 좋습니다.