목차
일단 저는 제가 다시 티스토리로 돌아올 줄은 몰랐는데요. 올해 3월 쯤 애드센스 승인을 받아서 이후로 몇개월 빈둥 빈둥 쉬면서 정말 할 거 없을때 아니 이젠 정말 해야한다고 느껴지면 포스팅 한두개 하고 말았는데 수익은 4달러정도가 나고 있었던 차에, 카카오 자체광고와 광고 게재 제한 이슈 대란이 오게 됩니다. 이에 대해서 좀 더 얘기해보고 이를 해결하기 위한 방법으로 떠오른 티스토리 썸네일 상단고정 방법 등에 대해서 알아봅니다.
카카오 자체광고 시작, 어디어디?
시기적으로는 2023년 6월 27일부터 였는데요. 이후로 일주일간 실제 체감해보니 갑자기 수익이 뚝 끊기게 됩니다. 한마디로 제 애드센스 광고에선 전혀 수익이 나지 않았는데, 제 글을 보니 광고가 더 달린 것 같긴 하더군요. 카카오 자체광고는 상,하단에 랜덤으로 송출되게 했다는데, 이로 인하여 정확한 원인은 알지 못해도 많은 분들이 광고 게재 제한을 당한 것으로 파악 됩니다. 보통은 상단에서 제일 광고 수익이 많이 나는 것으로 알려졌는데 카카오가 이 영역을 차지해버린 것이고 내 광고는 그 밑에 나오게 되는데, 또 연달아 노출되다 보니 무효클릭,무료트래픽(의도치 않은 클릭, 즉 실수로 누른 것도 차단에 해당) 등의 이슈로 노출 제한까지 받고 하는 문제들이 생겼던 것일 텐데요. 저는 뭐 글 수가 적어서 피해간 거 같은데, 어떤 유튜버가 워드프레스로 옮겨가는 김에 하나의 계정에 티스토리와 워드프레스를 운영하고 있다면 티스토리 광고 게재 제한 때문에 전체 광고 수익이 중단되는 것이니 아에 티스토리에서 애드센스를 연동 끊는다고 해서 이때 따라서 끊었다가...다소 경솔했던 것 같은 후회를 했습니다.
다음에서 알아보는 자체 광고의 영향을 피해서 내 광고를 상단에 위치시킬 수 있는 방법을 알게 되었으니까요.
어쨌든 새로운 방법을 시도하면서 저는 다시 티스토리를 애드센스 승인을 거쳐서 지금은 3주만에 다시 재승인이 나서 운영 중에 있는데요. 참.... 카카오 자체 광고 논란때문에 안그래도 직장인인 저한테는 시간이 중한데 먼 길을 돌아온 듯 힘이 들었습니다. 수익이라도 나면 더 좋겠지만 일단 한번 지켜보려고 하는데요.
자, 일단 자체광고를 제거하는 방법보다는 저는 제 애드센스 광고를 카카오광고보다 상단에 위치하게 하고 둘 사이 간격을 넓게 띄울 수 있는 방법을 알아봤으니 참고하시기 바랍니다.
내 애드센스 광고를 상단에 고정하는 방법 소개
티스토리 썸네일 자동 상단 고정 방법
보통은 본문에서 대표이미지를 선택하면 썸네일로 선택되어 목록에도 보이게 되고 네이버,구글 등에서도 해당 썸네일이 노출되게 되는데 이때 본문 중간이나 아무 위치에 있는 이미지도 대표이미지로 선택할 수 있죠. 하지만 카카오 자체광고와 내 애드센스 광고 사이를 멀리 떨어뜨리기 위해 썸네일 자동 상단 고정 방법을 사용하게 되면 무조건 해당 이미지가 위에 위치하게 됩니다.
1. 스킨편집 - html에서 컨트롤+f 누르고 아래 태그를 찾습니다.
이것은 본문이 시작되는 태그를 의미하는데, 썸네일 자동 상단 고정 태그를 이 위에 올림으로써 모든글에서 썸네일이 맨 위에 보이게 하는 것입니다.
2. 그리고 아래의 태그를 복사해서 붙여 넣고 적용을 눌러 준다음 반영이 제대로 되었는지 확인합니다.
<!-- 썸네일 자동 상단 고정 -->
<div style="text-align: center; !important;">
<img src="//i1.daumcdn.net/thumb/R800x800/?fname=https://blog.kakaocdn.net/dn/bTO2fH/btsDAQldEXF/zvzKxMHQK49UkhPeUx8gD0/img.png" alt="" style="width: 100%; margin-top: 10px; margin-bottom: 10px;">
</div>
<!-- 썸네일 자동 상단 고정 끝 -->
* 참고로 제가 여기에 !importnat;를 추가한 부분이 있는데, 그것은 하단에서 설명하겠습니다.
3. 다만, 이렇게 썸네일 자동 상단 고정 방법을 적용하고 나면 갑자기 똑같은 썸네일이 2개로 보일 수 있습니다. 그래서 꼭 본문수정을 통해 해당 이미지를 찾아 삭제해줘야 중복 노출을 피할 수 있습니다. 발행 전에 대표 이미지를 설정하지 않고 공개발행 직전에 대표 이미지를 추가하는 방법도 있는데 어차피 발행하고 나면 중복으로 보였는데요. 참고하시기 바랍니다.
4. 썸네일 이미지는 되도록이면 정사각형, 즉 1:1 비율로 제작해서 올리세요. 직사각형이거나 하면 찌그러져 보일 수 있습니다.
5. 마지막 과정으로 승인 받은 애드센스 디스플레이 광고 코드를 복사하여 위 자동 썸네일 고정 코드의 위에 붙여넣기 하면 내 광고가 본문에서 맨 위에 보이게 됩니다.
이 외에도 추가적으로 카카오 자체광고와 내 상단 광고 이미지를 더 띄울수 있는 방법으로 자동목차를 상단에 고정해버리는 방법도 있는데, 기본적으로 위 썸네일과 마찬가지로 본문 글 시작하는 태그 위에 위치시키는 방법이고, 추가적으로 자바스크립트 태그를 추가해주는 과정이 있는데 이 것에 대해서는 구글에서 검색만해도 상세히 설명하신 분들의 글이 나오기 때문에 저는 이번에 패스하도록 하겠습니다.
다음에는 본문에 내 광고를 제일 상단에 위치하게 하는 위의 방법들도 있지만, 아에 본문 제목 위로 광고를 올리는 방법도 있습니다.
티스토리 제목 위 광고 넣기/삽입하기
먼저, 이 방법은 다소 주의가 필요할 수 있는데 내 본문의 제목,카테고리 태그 위치를 제대로 파악해야 한다는 것입니다. 그리고 이는 티스토리에 적용 중인 스킨마다 다를 수 있기때문에 주의가 필요하다고 말씀드리는 것인데요. 실제로 저도 다른 분들의 방법을 따라서 html 부분에서 관련 위치를 찾아봐도 없길래 제가 직접 이것저것 분석해보며 고래스킨의 위치는 찾았는데, 여러분들의 스킨 위치에서는 다를 수 있으니 주의해서 꼭 찾아 넣으셨으면 합니다.
또는 스킨편집 - html에서 를 찾아서 이 위에 넣거나 다음과 같은 방법으로도 찾아서 넣어보세요.
* 이는 크롬 브라우저에서 f12를 눌러 개발자 도구를 열거나 또는 우측 점 3개 버튼을 눌러 도구 더보기 - 개발자 도구를 눌러보거나 또는 단축키 ctrl + shift + i 를 눌러서 개발자 도구로 간 다음,
요소보기 툴을 선택해서 태그를 볼 수 있게 선택한 다음 사이트 내에서 마우스 위치를 바꿔가며 하나씩 찾아보는 방법으로도 찾을 수 있습니다.
티스토리 css 모바일에서 안보일때
마지막으로 이렇게 css 스타일 태그도 사용하고 하다보면 pc화면, 데스크탑에서는 잘 보이는데, 모바일에서는 반영이 안되 보일때가 있습니다. 브라우저 캐시 삭제며, 별 짓을 해도 안되는데, 저도 겨우 이 방법으로 해결했는데요. 티스토리 스킨을 이것저것 변경하다보면 css 태그를 사용하는 경우가 많은데, 이것이 늘어나다보면 새로 적용한 css는 안보이는 현상이 나타날 수 있습니다.
이럴때에는 모바일에서 안보이는 스타일 css 작용부분에 !important; 먹여주면 되는데요. 아래처럼 새로 적용한 css, 즉 style= 맨 뒤에 붙여 넣은 후에 다시 봐보시면 반영이 되어 있을 수 있습니다.
