파이프라인 만들기 도전/블로그로 돈 벌기

티스토리 속도 수익 올리기 애드센스 상단광고 2개 다는 법

N잡 회사원 2023. 1. 9.

 

멀티 플렉스 광고를 하고 티스토리 속도가 많이 느려졌다. 멀티플렉스 광고는 수익 비중이 커서 포기할 수도 없어 티스토리 속도 올리는 법을 찾다 속도도 올리고 광고 수익도 올릴 수 있는 수동 애드센스 상단광고 2개 다는 법을 알게 됐다.

 

 

 

티스토리 애드센스 상단광고 2개 다는 법

티스토리 상단 광고 2개는 티스토리 스킨 코드를 수정해야 한다. 그리고 자동 광고를 없애고 스킨편집으로 코드를 수정해야지만, 티스토리 로딩 속도가 개선된다고 해서 광고 수익도 올리고 티스토리 로딩 속도도 올리기 위해 티스토리 스킨 코드를 수정하기로 했다.

 

 

 

 

 

 

 

 

티스토리 코드 위치 알아내는 법

1. F12 광고 위치 찾기

우선 내 티스토리 블로그 포스팅 글을 누른다. 그 후 F12 -> 선택창(위 사진의 빨간박스) 클릭한다.

 

F12는 개발자 도구로 여기서 내 티스토리의 코드를 볼 수 있고 선택창을 클릭하면 마우스가 있는 곳의 코드를 확인할 수 있다. 여기서 내가 원하는 위치를 찾아 복사한 후 티스토리 스킨 편집에서 해당 코드를 찾아 원하는 위치에 광고 코드를 넣을 수 있다.

 

 

티스토리 코드 확인하는 법

2. 광고 위치에 맞는 코드 복사하기

나는 상단 광고를 할거라 제목 바로 아래를 원했고, 그래서 제목을 주으면 오른쪽 화면같이 해당 코드를 확인할 수 있었다. 

 

제목에서 볼 수 있는 코드는 article-header 이였고 해당 코드를 더블 클릭해 복사를 해 메모장에 붙여 넣기를 한다.

 

 

 

3. 애드센스 디스플레이 광고 코드 2개 만들기

애드센스 디스플레이 광고 2개  -> 상단광고 왼/ 오 로 만들었다.

 

 

만든 광고 코드는 복사한 후 아래 블로그를 참고해서 광고 코드를 변형시켰다. 

 

티스토리 블로그 본문 상단광고 2개 만들기(최신)

상단광고 2개는 어떻게 만들까요? 오늘은 이 물음에 답을 주기 위해 포스팅하겠습니다. 어떤 블로그를 돌아다니다가 본문 상단에 광고가 쌍으로 2개 있는 것을 보신 적 있을 겁니다. 이럴 경우

ttt-money.tistory.com

 

 

 

 

 

4. 티스토리 광고 코드 붙여넣기

티스토리 메뉴 -> 스킨편집 -> HTML 편집 -> 왼쪽 상단 부분 빨간 박스 홈-> 글로 변경

 

ctrl + f  -> article-header 찾기 -> 문장이 끝나는 곳에 애드센스 코드 붙여 넣기

* 내 광고 코드를 위의 링크에 있는 코드로 변경한 후 변경한 코드를 붙여 넣어야 한다

*

 

멀티 플렉스 광고를 하고 티스토리 속도가 많이 느려졌다. 멀티플렉스 광고는 수익 비중이 커서 포기할 수도 없어 티스토리 속도 올리는 법을 찾다 속도도 올리고 광고 수익도 올릴 수 있는 수동 애드센스 상단광고 2개 다는 법을 알게 됐다.

 

 

 

티스토리 애드센스 상단광고 2개 다는 법

티스토리 상단 광고 2개는 티스토리 스킨 코드를 수정해야 한다. 그리고 자동 광고를 없애고 스킨편집으로 코드를 수정해야지만, 티스토리 로딩 속도가 개선된다고 해서 광고 수익도 올리고 티스토리 로딩 속도도 올리기 위해 티스토리 스킨 코드를 수정하기로 했다.

 

 

 

 

 

 

 

 

티스토리 코드 위치 알아내는 법

1. F12 광고 위치 찾기

우선 내 티스토리 블로그 포스팅 글을 누른다. 그 후 F12 -> 선택창(위 사진의 빨간박스) 클릭한다.

 

F12는 개발자 도구로 여기서 내 티스토리의 코드를 볼 수 있고 선택창을 클릭하면 마우스가 있는 곳의 코드를 확인할 수 있다. 여기서 내가 원하는 위치를 찾아 복사한 후 티스토리 스킨 편집에서 해당 코드를 찾아 원하는 위치에 광고 코드를 넣을 수 있다.

 

 

티스토리 코드 확인하는 법

2. 광고 위치에 맞는 코드 복사하기

나는 상단 광고를 할거라 제목 바로 아래를 원했고, 그래서 제목을 주으면 오른쪽 화면같이 해당 코드를 확인할 수 있었다. 

 

제목에서 볼 수 있는 코드는 article-header 이였고 해당 코드를 더블 클릭해 복사를 해 메모장에 붙여 넣기를 한다.

 

 

 

3. 애드센스 디스플레이 광고 코드 2개 만들기

애드센스 디스플레이 광고 2개  -> 상단광고 왼/ 오 로 만들었다.

 

 

만든 광고 코드는 복사한 후 아래 블로그를 참고해서 광고 코드를 변형시켰다. 

 

티스토리 블로그 본문 상단광고 2개 만들기(최신)

상단광고 2개는 어떻게 만들까요? 오늘은 이 물음에 답을 주기 위해 포스팅하겠습니다. 어떤 블로그를 돌아다니다가 본문 상단에 광고가 쌍으로 2개 있는 것을 보신 적 있을 겁니다. 이럴 경우

ttt-money.tistory.com

 

 

 

 

 

4. 티스토리 광고 코드 붙여넣기

티스토리 메뉴 -> 스킨편집 -> HTML 편집 -> 왼쪽 상단 부분 빨간 박스 홈-> 글로 변경

 

ctrl + f  -> article-header 찾기 -> 문장이 끝나는 곳에 애드센스 코드 붙여 넣기

* 내 광고 코드를 위의 링크에 있는 코드로 변경한 후 변경한 코드를 붙여 넣어야 한다

* 찾기 -> 그 위위칸에 복붙 ( <div class="entry-content"> 윗칸에 붙여넣기

노란색 박스에 광고 코드를 붙여 넣기

 

* 수정한 광고 코드를 그대로 붙여 넣으면 제목 바로 아래 광고코드가 붙여 넣어져 나는 공백 두 개를 만든 후 광고코드를 붙여 넣었다.

-> 수정한 광고코드 제일 윗부분에 <p data-ke-size="size16">&nbsp;</p>

코드를 두 번 넣어준 후 광코 코드를 붙여 넣었다.

위 코드는 티스토리 글쓰기에서 엔터 두 번을 한 후 html 편집에서 그 부분을 복사해 붙여 넣으면 된다.

 

 

5. 티스토리 자동광고 수동광고로 전환

메뉴 -> 수익 -> 애드센스 관리 -> 본문 상단 광고 끄기

메뉴에서 본문 상단 자동광고를 수정하지 않으면, 상단 광고로 2개와 그 아래에 바로 상단 자동광고가 달린다. 상단 광고를 3개를 하려는 사람은 상관없지만, 기존 자동광고를 상단 광고 2개로 변경하려는 사람들이라면 상단 자동광고를 꺼야 한다.

 

 

 

5. 애드센스 상단광고 바로 적용

 

티스토리 상단광고 2개

 

적용 후 게시글을 누르면 바로 적용된 모습을 볼 수 있다.

초반에는 똑같은 광고가 두 개 달리고, 시간이 지나면 다른 광고로 수정된다고 하는데,  시간이 지나도 어떤 포스팅은 똑같은 광고가 달리고, 어떤 포스팅은 다른 광고가 달리고 있었다. 무조건적으로 다른 광고가 달리기보다는 복불복으로 같은 광고가 달리는 경우도 있고, 다른 광고가 달리는 경우도 있는 것 같다.

 

 

 

 

 

 

 

티스토리 속도 올리기 : 자동광고 수동광고로 전환 후 속도 비교

티스토리 속도 올리기

왼쪽은 티스토리 자동광고를 사용했을 때/ 오른쪽은 상단광고 2개를 수동으로 달았을 때 티스토리 속도이다.

 

티스토리 속도 측정은 시간에 따라 속도가 다르게 나온다고 하는데, 위 속도 측정은 2~3 분 정도 차이가 나서 시간에 따른 속도 영향은 그리 크지 않을 것 같다.

 

<티스토리 자동 상단광고 속도>

성능 27/ FCP 4.6초/ SPEED INDEX 6.8초/ LCP 4.7초/

TIME TO INTERACTIVE 9.5초 / TOTAL BLOCKING TIME 1,100밀리초/ CLS 0.38

 

<티스토리 수동 상단광고 2개 >

성능 32(+2)/ FCP 4.4초(-0.02)/ SPEED INDEX 8.8초(+2)/ LCP 4.7초 (동일)

TIME TO INTERACTIVE 9.2초(-0.3) / TOTAL BLOCKING TIME 670밀리초(-430)/ CLS 0.371(-0.009)

 

속도가 개선된 건 빨간색으로 하락한 건 파란색으로 표시했는데요. SPEED INDEX는 오히려 2초가 추가되어 더 안 좋아졌고, LCP는 동일 그 외는 다 좋아졌네요.

자동광고로 했을 경우에는 광고가 하나밖에 안 달리는데, 수동광고로 광고 하나가 추가되어 광고 2개에 속도까지 개선되는 일석이조의 효과를 볼 수 있어요 ㅎㅎㅎㅎ

 

광고를 달기까지가 조금 귀찮고 번거롭지만, 십 분만 고생하면 그 후에는 수익 향상과 속도개선으로 구글 최적화 기준에 더 맞는 블로그로 변할 수 있다고 생각해요. 

 

저는 그래서 자동 광고를 수동광고로 하나씩 변경해서 앞으로 자동광고를 다 없애고 수동 광고로만 채워 넣을 예정이에요 ㅎㅎㅎ

 


티스토리 자동 상단 광고를 광고 2개가 달리는 수동 상단 광고로 변경하는 방법을 포스팅했는데요. 이 방법으로 저는 7일 수익 중 상단광고가 제일 큰 비중을 차지하게 됐어요.

 

상단광고 중 왼쪽이 광고 수익이 제일 크고 2등은 멀티플렉스 하단 광고예요. 멀티 플렉스 광고는 제 포스팅 글에서 댓글과 관련 포스팅 사이에 있는 광고예요. 멀티 플렉스 광고를 하면 광고 수익이 적어져 멀티 플렉스 광고를 중단하는 분들도 많이 있다고 해요.

 

저의 경우에는 멀티플렉스/ 상단광고 2개 다 수익이 올랐지만 다른 분들은 안 그럴 수도 있으니 광고를 변경할 때는 며칠 동안 광고 수익이 올라가는지 실험을 해보고 만약 수익이 줄었다면 그전 상태를 유지하시는 게 좋을 것 같아요.

 

다음에는 제 광고 수익 2등인 멀티 플렉스 수동 광고를 다는 법을 알려드릴게요 :)


 

↓ 티스토리 손쉬운 속도 향상/ 광소 설정 후기 

티스토리 미넴스킨 후기 속도올리기 광고설정 최적화 Good

 

 

찾기 -> 그 위위칸에 복붙 ( <div class="entry-content"> 윗칸에 붙여넣기

노란색 박스에 광고 코드를 붙여 넣기

 

* 수정한 광고 코드를 그대로 붙여 넣으면 제목 바로 아래 광고코드가 붙여 넣어져 나는 공백 두 개를 만든 후 광고코드를 붙여 넣었다.

-> 수정한 광고코드 제일 윗부분에 <p data-ke-size="size16">&nbsp;</p>

코드를 두 번 넣어준 후 광코 코드를 붙여 넣었다.

위 코드는 티스토리 글쓰기에서 엔터 두 번을 한 후 html 편집에서 그 부분을 복사해 붙여 넣으면 된다.

 

 

5. 티스토리 자동광고 수동광고로 전환

메뉴 -> 수익 -> 애드센스 관리 -> 본문 상단 광고 끄기

메뉴에서 본문 상단 자동광고를 수정하지 않으면, 상단 광고로 2개와 그 아래에 바로 상단 자동광고가 달린다. 상단 광고를 3개를 하려는 사람은 상관없지만, 기존 자동광고를 상단 광고 2개로 변경하려는 사람들이라면 상단 자동광고를 꺼야 한다.

 

 

 

5. 애드센스 상단광고 바로 적용

 

티스토리 상단광고 2개

 

적용 후 게시글을 누르면 바로 적용된 모습을 볼 수 있다.

초반에는 똑같은 광고가 두 개 달리고, 시간이 지나면 다른 광고로 수정된다고 하는데,  시간이 지나도 어떤 포스팅은 똑같은 광고가 달리고, 어떤 포스팅은 다른 광고가 달리고 있었다. 무조건적으로 다른 광고가 달리기보다는 복불복으로 같은 광고가 달리는 경우도 있고, 다른 광고가 달리는 경우도 있는 것 같다.

 

 

 

 

 

 

 

티스토리 속도 올리기 : 자동광고 수동광고로 전환 후 속도 비교

티스토리 속도 올리기

왼쪽은 티스토리 자동광고를 사용했을 때/ 오른쪽은 상단광고 2개를 수동으로 달았을 때 티스토리 속도이다.

 

티스토리 속도 측정은 시간에 따라 속도가 다르게 나온다고 하는데, 위 속도 측정은 2~3 분 정도 차이가 나서 시간에 따른 속도 영향은 그리 크지 않을 것 같다.

 

<티스토리 자동 상단광고 속도>

성능 27/ FCP 4.6초/ SPEED INDEX 6.8초/ LCP 4.7초/

TIME TO INTERACTIVE 9.5초 / TOTAL BLOCKING TIME 1,100밀리초/ CLS 0.38

 

<티스토리 수동 상단광고 2개 >

성능 32(+2)/ FCP 4.4초(-0.02)/ SPEED INDEX 8.8초(+2)/ LCP 4.7초 (동일)

TIME TO INTERACTIVE 9.2초(-0.3) / TOTAL BLOCKING TIME 670밀리초(-430)/ CLS 0.371(-0.009)

 

속도가 개선된 건 빨간색으로 하락한 건 파란색으로 표시했는데요. SPEED INDEX는 오히려 2초가 추가되어 더 안 좋아졌고, LCP는 동일 그 외는 다 좋아졌네요.

자동광고로 했을 경우에는 광고가 하나밖에 안 달리는데, 수동광고로 광고 하나가 추가되어 광고 2개에 속도까지 개선되는 일석이조의 효과를 볼 수 있어요 ㅎㅎㅎㅎ

 

광고를 달기까지가 조금 귀찮고 번거롭지만, 십 분만 고생하면 그 후에는 수익 향상과 속도개선으로 구글 최적화 기준에 더 맞는 블로그로 변할 수 있다고 생각해요. 

 

저는 그래서 자동 광고를 수동광고로 하나씩 변경해서 앞으로 자동광고를 다 없애고 수동 광고로만 채워 넣을 예정이에요 ㅎㅎㅎ

 


티스토리 자동 상단 광고를 광고 2개가 달리는 수동 상단 광고로 변경하는 방법을 포스팅했는데요. 이 방법으로 저는 7일 수익 중 상단광고가 제일 큰 비중을 차지하게 됐어요.

 

상단광고 중 왼쪽이 광고 수익이 제일 크고 2등은 멀티플렉스 하단 광고예요. 멀티 플렉스 광고는 제 포스팅 글에서 댓글과 관련 포스팅 사이에 있는 광고예요. 멀티 플렉스 광고를 하면 광고 수익이 적어져 멀티 플렉스 광고를 중단하는 분들도 많이 있다고 해요.

 

저의 경우에는 멀티플렉스/ 상단광고 2개 다 수익이 올랐지만 다른 분들은 안 그럴 수도 있으니 광고를 변경할 때는 며칠 동안 광고 수익이 올라가는지 실험을 해보고 만약 수익이 줄었다면 그전 상태를 유지하시는 게 좋을 것 같아요.

 

다음에는 제 광고 수익 2등인 멀티 플렉스 수동 광고를 다는 법을 알려드릴게요 :)


 

↓ 티스토리 손쉬운 속도 향상/ 광소 설정 후기 

티스토리 미넴스킨 후기 속도올리기 광고설정 최적화 Good

 

 

댓글