티스토리 SEO 설정 - 로딩화면을 만들어 애드센스 수익을 올려보자
- 블로그/SEO
- 2021. 2. 21. 17:32
애드센스 관련하여 이것저것 셋팅을 하다가 애드센스 광고가 로딩이 늦게 뜨는것을 발견했다. 덩그러니 ADSENSE라는 이미지가 노출되는데 다들 무엇인지 알거다.
광고를 모두 불러오기 전에 사용자가 이미 스크롤을 내리면 그 광고는 영역은 쓸모가 없는 광고이며, 무효광고가 될 것이기 때문에 수익저하로 이어질 것이다. 그래서 이를 해결하기 위해 이것저것 찾아보았지만, 현재로서 유일한 해결법은 로딩화면을 만드는 것이다.
이 애니메이션은 블로그가 광고를 포함하여 모두 로딩될 때까지 이용자의 시선을 끌어, 짧은 시간동안 지루하지 않게 만들어주는 효과가 있다. 또한 로딩화면에 쓰일 GIF 이미지를 잘 고르면 세련된 사이트를 만드는것도 가능하다.
로딩화면 GIF 파일 업로드
1)우선 아래 사이트에 들어가 원하는 로딩화면 이미지(GIF)를 다운로드 받는다. 본인이 가지고 있는 별도의 GIF 파일이 있으면 사용해도 좋다. 다운로드 할때 파일명은 조금 이따 HTML을 편집해야 하기 떄문에 꼭 Loading.gif (전부 소문자) 로 하자
Preloaders.net - Loading GIF, SVG & APNG (AJAX loaders) generator (icons8.com)
Preloaders.net - Loading GIF, SVG & APNG (AJAX loaders) generator
More than 1000 free and premium ajax loader (loading animated GIF, SVG and APNG) spinners, bars and 3D animations generator for AJAX and JQuery
icons8.com
2) 그 이후 티스토리 [설정] - [꾸미기] -[스킨편집] - [html 편집] 메뉴로 진입한다.
3) 상단에 [파일 업로드]를 누르면 위와 똑같은 이미지가 나오는데 이때 [추가] 버튼을 눌러 다운로드 받은 loading.gif 파일을 찾아 업로드를 한 후 우측 상단에 [적용] 을 꼭 누른다.
누구나 쉽게 간단 로딩화면 - 첫번째 방법
먼저 내가 시도했던 방법이며 많은 블로거들이 소개하는 방법이다. html / CSS를 조금이라도 만질줄 모른다면 이 방법을 추천하며 아주 간단하다. 이정도 html은 블로그를 하는 사람들이라면 누구나 만질 줄 알것이라 믿고 아래의 태그를 html 편집기에서 </body>를 검색 하여 그 바로위에 복사 붙여넣기 하여 삽입하면 된다.
<!-- 기본 스타일 로딩 이미지 소스코드 시작 -->
<script src="https://code.jquery.com/jquery-1.8.0.js"
integrity="sha256-00Fh8tkPAe+EmVaHFpD+HovxWk7b97qwqVi7nLvjdgs="
crossorigin="anonymous"></script>
<script type="text/javascript">
$(window).on('load', function () {
$("#load").hide();
});
</script>
<style type="text/css">
#load {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: fixed;
display: block;
opacity: 0.8; <!--1.0 으로 변경하면 불투명, 0에 가까워질수록 투명해집니다. 저는 0.9를 추천합니다-->
background: white;
z-index: 99;
text-align: center;
}
#load > img {
position: absolute;
top: 50%;
left: 50%;
z-index: 100;}
</style>
<div id="load">
<img src="./images/loading.gif" alt="loading">
</div>
<!-- 기본 스타일 로딩 이미지 -->
해당 글이 복사가 되지 않을 경우 아래의 첨부파일을 다운받아서 복사하여 사용하자. 기본적으로 맨 위에 파일을 받아 적용 해보고 혹시 모바일에서 가운데 정렬이 되지 않는 사람이 있다면 2번째 파일을 다운로드 받아 적용하자. 기본적으로 첫번째, 두번째 파일 모두 동일하고 자리만 잡은건데, 사용하는 스킨에 따라 맞는 소스코드를 사용하면 된다. (두번째 코드가 더 좋은 코드라는것은 아니다.)
조금 더 좋은 로딩화면 - 두번째 방법
나는 위에 간단한 방법으로 적용 완료하였으나 뭔가 마음에 들지 않았다. 이유는 여전히 광고가 나오지 않는 경우가 있었기 때문. 애초에 로딩화면을 도입하려던 이유는 광고가 모두 로딩 된 상태에서 사이트를 보여주기위한 "3초"를 벌기 위함이였고, 위 방법은 1~2초 정도 로딩이 되며 가끔씩 보기싫은 adsense 가 보일때가 종종 있었다.
하여 CSS나 HTML을 직접 만들어 낼 실력까지는 안되고 열심히 자료를 찾아보았고, 광고가 로딩될 때 까지 로딩화면을 유지하는 좋은 것을 소개해주는 블로그를 찾아냈다. (탑 이슈님의 블로그에서 참고) 그치만 JB FACTORY 167 V3.1.1 을 사용하고 있다보니, 적용 후 가장 황당한 부분이 <Body>가 없어 로딩이미지가 타이틀 헤더쪽에 돌고 앉아있는 것이다.
우선 해당 블로그에서 설명하는 방법은 아래와 같다.
1) 아래와 같이 <Body> 뒤에 해당 코드를 삽입한다.
<body>
<!--로딩 대기--> <div id="loadOverwrapper"> <div class="loader"></div> </div>
2) 아래와 같이 </Body> 앞에 해당 코드를 삽입한다.
참고로 2500이라고 쓰여있는 부부은 2.5초를 의미하며, 자신의 블로그에 애드센스가 언제쯤 로딩되는지 시간을 확인해 본후 넣어주면 된다.
최종적으로 사이트와 광고가 모두 로딩되면 2.5초가 지나지 않았더라도, 로딩화면은 사라지고 메인페이지(블로그 홈 또는 검색시 게시물)로 진입한다. 반대로 2.5초를 넘겼을 경우에도 마찬가지로 로딩화면이 끝나고 메인페이지로 들어간다.
내가 개인적으로 만져보았을땐 스킨이 무겁거나 광고를 많이 띄운사람의 경우 3000, 3500 정도가 가장 적당해 보였다.
<!--로딩 대기--> <script> function rmLoadOverwapper(){ document.querySelector("#loadOverwrapper").style.display="none"; } try { document.querySelector("iframe[onload*='google']").onload=function(){ rmLoadOverwapper(); } setTimeout(function(){ rmLoadOverwapper(); }, 2500); } catch(err) { setTimeout(function(){ rmLoadOverwapper(); }, 2500); } </script> </body>
3) CSS 최하단에 아래 코드를 삽입한다.
/* 로딩 사이클 애니매이션 */ .loader { margin: 5% auto; height: 100px; width: 100px; border: 6px solid #fff; border-right-color: #c30; border-top-color: #c30; border-radius: 100%; -webkit-animation: spin 800ms infinite linear; animation: spin 800ms infinite linear; } @-webkit-keyframes "spin" { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(359deg); transform: rotate(359deg); } } @keyframes "spin" { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(359deg); transform: rotate(359deg); } }
이또한 마찬가지로 소스코드를 올려둘테니 필요할 경우 다운로드 받으면 된다.
JB스킨을 쓰는 사람들을 위한 로딩화면 - 세번째 방법
위에 말한대로, 안된다. 로딩 이미지가 이상한데서 나온다. JB스킨에서는 html보다 CSS를 활용하여 제작을 진행한 부분이 많다보니 도저희 html 수정으로는 저 뱅글뱅글 도는 이미지를 화면 전체에 오버랩시킬수가 없었다.
그때부터 직접 짬뽕으로 만들기 시작했고, PC(데스크탑)/모바일 에 각각 잘 들어맞게 위치조절까지 다 한 소스코드를 공유하겠다. 참고로 두번째 방법보다 좋은점은 이미지를 내마음대로 바꿀 수 있다는 것이다. 즉 1번과 2번, 그리고 소개하지 않은 다른 소스코드들의 짬뽕이다.
1) <Body id ....> 혹은 <body> 아래에 아래 소스코드를 넣는다.
필자의 경우 <Body>가 없어서 한참 애를 먹었고, 가로세로 중앙정렬을 맞추기 위해서 정말 쇼를 한 것 같다.
<!--로딩화면 초기스크립트--> <div id="loadOverwrapper"><div class="loader"> <div id="table"> <div class="table-cell"> <!-- 테이블 속성으로 중앙정렬하기--> </div> </div> <style> #table{ display:table; height:200px; background:#999 } #table .table-cell{ display:table-cell; vertical-align:middle } </style> <img src="./images/loading.gif" alt="loading"></div></div> <!--로딩화면 초기스크립트 끝-->
2) 아래와 같이 </Body> 앞에 해당 코드를 삽입한다.
<!--로딩화면-->
<script>function rmLoadOverwapper(){ document.querySelector("#loadOverwrapper").style.display="none"; }
try { document.querySelector("iframe[onload*='google']").onload=function(){ rmLoadOverwapper(); }
setTimeout(function(){ rmLoadOverwapper(); }, 2500); }
catch(err) { setTimeout(function(){ rmLoadOverwapper(); }, 2500); }
</script>
<!--로딩화면 끝-->
3) CSS 최하단에 아래 코드를 삽입한다.
/* 로딩 사이클 애니매이션 (개인추가)*/
#loadOverwrapper {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
background: #fff;
z-index: 9999;
text-align: center;
padding: 10% ;
}
}
이또한 파일을 공유할테니 필요한 사람의 경우 받아서 모두 높은 애드센스 수익을 가져갔으면 한다. 다음에는 로딩화면이 있고 없고의 차이에 따라 광고수익을 비교해보겠다.
'블로그 > SEO' 카테고리의 다른 글
| 상위 1% 블로그를 위한 좋은 콘텐츠 (1) | 2021.02.22 |
|---|---|
| 방문체류시간 0초의 진실, 체류시간을 높이는 방법 5가지! (0) | 2021.02.21 |
| [파비콘] 5분만에 나만의 고퀄리티 예쁜 파비콘 만들기 - 추천 사이트 (0) | 2021.02.21 |
| ALT태그 자동으로 생성하기 - 검색 상위노출, SEO, 알트태그 (4) | 2021.02.20 |
| 티스토리 필수 세팅 - 꼭 해야하는 SEO 최적화 스킨, 필수 플러그인 (2) | 2021.02.20 |