티스토리 애드센스 광고 삽입 깨알 팁 모음

 

애드센스 승인을 받기 위해 열심히 달려오시는 많은 블로거들이 있으십니다. 내 소소한 이야기를 쓰는데 어쩌다 커피 한두잔 생기시는 정도를 원하시는 분들도 있고, 각잡고 나는 진짜 수익형으로 제대로 해서 블로그가 직업이 되겠다고 마음 먹고 하시는 분들도 있으시겠죠.

 

어떤 경우이던 티스토리에서 애드센스를 해 보려면 몇가지 알아두면 좋은 것들이 있어서 정리를 해 봅니다. 저품 블로그라 검색에는 안 나오겠지만 구독자님들 위한 스페셜 포스팅입니다.

 

[[나의목차]]

 

티스토리 애드센스 관련 깨알 팁

 

1. 일치하는 콘텐츠 넣기

 

일치하는 콘텐츠는 것은 내 티스토리에 있는 다른 글들과 애드센스 광고를 적절하게 섞어서 보여줌으로써 광고인지 아니면 해당 블로그의 다른 콘텐츠인지 헷갈리게 하여 광고를 클릭하도록 하는 낚시 광고를 말합니다. 

 

애드센스 승인이 되자마자 있는 것은 아니며, 열심히 블로그를 하다보면 어느날 애드센스 광고단위 기준에 떡하니 생기는 것입니다. 승인 조건 등에 대해서는 제가 한 번 정리를 해 본 적이 있는데 궁금하시면 참조하세요.

 

구글 애드센스 일치하는 콘텐츠 넣기 - 검색 키워드를 챙겨야 하는 이유

구글 애드센스 일치하는 콘텐츠 넣기 - 검색 키워드를 챙겨야 하는 이유

 

위 포스팅에도 내용이 있기는 한데, 많이 헷갈려 하시는 부분이 있는 것 같아서 부연 설명합니다.

 

일치하는 콘텐츠는 관리자 - 스킨편집 - HTML편집으로 들어가서 편집 창을 한 번 클릭한 후 CTRL+F 를 누르고 "article_rep_desc"를 찾으면 됩니다. 해당 치환자는 스킨에 따라 2번 또는 3번 나오는데, 검색된 공간 근처에 '보호글입니다' 이런 글씨 보이면 그곳은 아닙니다.

근처에 '태그'가 보여야 함

근처에 '태그'가 보여야 비로소 맞는 위치입니다. 우리의 글이 나올 때 본문 나오고 밑에 이어서 태그, 관련글 순으로 나오게 되어 있으므로 그 글씨가 있는 곳에다 복사한 코드를 넣으면 됩니다.

 

1-1. 일치하는 콘텐츠 레이아웃 변경

 

위에 캡쳐에서 녹색으로 하이라이트 한 코드를 잘 활용하면 PC에서와 모바일에서의 애드센스 레이아웃을 바꿀 수 있습니다. 애드센스 관리 페이지에서 복사한 코드를 그대로 사용하면 PC에서의 기본은 4x2 (4열, 2행)이고 모바일에서는 큰 광고 하나에 작은 광고 2개, 내글 1개, 광고 1개, 내글 7개? 정도 쭉 세로로 길게 나옵니다.

 

전 개인적으로 모양이 이쁘지 않다고 생각이 들어서 이 레이아웃을 좀 바꿨습니다. 자신의 스킨에서 보여지는 형태에 맞춰 조정을 하면 됩니다.

좌) 제 모바일 페이지 우) 기본 세팅인 형태

기본적인 설정에 대한 코드는 애드센스의 고객센터에서 복사 붙여넣기 하면 됩니다.

https://support.google.com/adsense/answer/7533385?hl=ko 

반응형 일치하는 콘텐츠 단위를 맞춤설정하는 방법 - AdSense 고객센터

행과 열 수 지정 가능

 

 

2. 서식에서 본문 중간 광고 삽입시 코드

 

보통 광고를 본문 중간에 서식을 만들어서 삽입할텐데, 그 때 2가지를 추가로 수정해 두면 좋습니다. 하나는 애드센스 광고 송출을 위한 자바스크립트 호출 코드이고, 다른 하나는 본문에 광고 코드 삽입 후 글수정할 때 깨지는 것을 방지하는 방법입니다.

서식 만들기

 

2-1. 애드센스 광고 자바스크립트 코드

 

코드를 복사할 때 맨 윗줄에 있는 "<script ~~ /script>" 로 중간에 adsbygoogle.js 있는 줄은 빼도 됩니다. 위에 캡쳐에서 볼 때 2번 행에 있는 한줄은 통째로 다 지우고 <ins 로 시작하는 부분부터 끝까지 복사해서 서식을 만들어 사용하면 됩니다. 

 

서식 넣은 후 기본모드에서는 윗줄이 사라짐

이렇게 해 두면 서식에서 광고를 넣을 때는 아래 SCRIPT 하나만 나옵니다. 윗줄은 필요 없습니다. 우리는 이미 스킨의 헤드에서 애드센스 광고 호출을 위해서 자바스크립트를 이미 로드해 두었기 때문에 반복해서 호출함으로써 블로그 로딩 속도를 떨어뜨릴 요인을 제거해 줍니다.

 

2-2. <DIV> , </DIV>로 묶기

 

두번째는 1번 행과 11번 행에 있는 <div> 와 </div>입니다. 서식을 만들때 이렇게 묶어두면 본문 중간 광고 코드를 삽입 후 본문 내용을 수정하는 과정에서 광고 코드가 사라져 버리는 불상사를 막을 수 있습니다. 

 

묶어두지 않고 작업을 하면 보통 <ins ~~ /ins> 코드 부분이 어느 순간 사라집니다. 그것을 방지하기 위해 저 코드를 꼭 추가합시다.

 

 

3. HTML 편집에서 맞는 위치 확인하는 방법

 

1번 팁에 이어지는 것인데 HTML편집에서 이 자리가 맞는지 아닌지 여부를 쉽게 확인할 수 있습니다. 넣으려는 위치를 찾았다 생각했을 때 코드를 넣을 자리에 글을 미리 써 보고 미리보기에서 확인해 보는 것입니다.

예시

예를 들어 이렇게 입력해 본 후 우측 상단의 '적용'을 누르고 스킨편집 화면의 왼쪽 위 드롭다운 메뉴에서 두번째 위치한 '글'로 바꿉니다.

두번째 위치한 글

그렇게 하고 나오는 화면을 보면 제대로 된 위치면 글자가 미리보기에 나와야 합니다.

확인 완료

저렇게 보여지지 않으면 엉뚱한 장소에 작업중이니 맞는 위치를 확인한 후 코드를 삽입하면 됩니다.

 

 

 

4. 태그나 관련글 글자 지우기

 

제 블로그에서는 본문 하단에 '태그'라던가 '관련글'이라는 글자가 보이지 않습니다. 마치 일치하는 콘텐츠가 3행으로 나오는 것처럼 만들어 두었는데, 이렇게 하는 것은 굉장히 쉽습니다.

예시

일단 티스토리 글쓰기 하단의 '태그입력'에 입력되는 것은 인스타에서 검색되는 태그 넣는 것과는 달리 검색과 하나도 연관이 없는 것은 아시죠? 모르셨으면 이제 아셔야합니다. 저도 저 태그에 신중에 신중을 기해 입력했는데, 다음이나 구글 검색에 하등 도움이 안 되는 입력입니다. 

 

태그 입력에 힘을 뺄 필요도 없어서 저는 태그가 아예 안 나오게 해 두었습니다. 방법은 일치하는 콘텐츠 넣은 위치 아래쪽을 보시면 <div class="tag"> 라고 나오는 부분이 있습니다. 이 부분의 묶음 앞에 주석처리로 바꾸는 <!-- 를 입력하고, 닫힘 코드 뒤에서 주석의 종료를 의미하는 --> 를 입력하면 해당 코드들은 주석처리로 바뀌어서 나오지 않게 됩니다.

 

 그 밑에 '관련 글'이라고 나오는 부분도 글자만 없애고 싶으면 아래처럼 관련글 이라는 글자 나오는 줄만 주석 처리로 바꾸면 됩니다. 

관련글 글자도 없애기

 

그렇게 없앤 결과물

그렇게 없애면 위 예시화면처럼 그냥 4*3의 형태로 추가 콘텐츠로만 나오게 됩니다. 뭐, 이부분은 특별히 효과가 더 있거나 한 것은 아닙니다. 전 그냥 좀 더 깔끔하게 디자인이 나왔으면 하는 생각에 적용한 내용입니다.

 

어디까지나 개인의 선호도에 따라 선택하세요. 제 모바일 화면에서도 일치하는 콘텐츠와 아래쪽 관련글이 모두 2열로 비슷하게 나오고 있어서 디자인 완성도를 원할 때 취사 선택하시기 바랍니다.

 

 

5. 모바일 자동연결 사용하지 않기 설정

 

애드센스 광고 노출이 제대로 되길 원하신다면, 티스토리에서 제공하는 모바일 화면을 사용하지 않음으로 해 두셔야 합니다. 거의 대부분 반응형 스킨을 쓰고 있기 때문에 스킨에서 제공되는 모바일 화면이 훨씬 깔끔할 뿐 아니라 광고도 제대로 노출됩니다.

 

관리자 - 꾸미기 - 모바일 - 모바일웹 자동 연결을 '사용하지 않습니다'로 변경

모바일 메뉴

사용하지 않습니다 설정

그리 해 두어야 현재 사용하는 스킨의 모바일 화면이 제대로 표시됩니다. 꼭 바꿔두세요.

 

 

추가로 궁금하신 것 있으면 댓글로 알려주세요. 능력이 닿는데까지는 깨알팁을 공유해 볼게요. 이상 끝.