아이보스의 트렌드 뉴스레터 📧 큐레터

매주 3회 마케팅 트렌드, 뉴스, 도서 정보, 인터뷰를 큐레이션 해서 보내드립니다.

지금 구독하기
그만 볼게요

알림

모두 읽음알림함

쪽지

쪽지함

애드센스 넣고 속도 향상 시키는 법

2021.01.11 20:03

좌이리

조회수 441

댓글 3

애드센스 광고를 넣으면 속도가 떨어집니다.
특히 요즘 web vital 때문에 더 민감하게 받아지고,
구글은 JS 코드가 헤드에 들어가면 자사 광고라도
냉정하게 점수를 먹입니다.
지금까지 바닥을 기던 SEO (CLS) 향상시키면서,
애드센스 넣고 속도 향상 시키는 법 공유 해드리겠습니다.
(참고로 자동광고를 하시는 분들은 효과가 없을 것입니다.)

 

Adsense 코드

<style>
.abc{ display:block; }
@media(min-width: 0px) {.abc{display:inline-block; width: 336px; height: 280px; } }
@media(min-width: 768px) {.abc{display:inline-block; width: 336px; height: 280px; } }
@media(min-width: 980px) {.abc{display:inline-block; width: 728px; height: 182px; } }
</style>
                                <center>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle abc" data-ad-client="ca-pub-00000000000" data-ad-slot="0000000000" data-language="ko" data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

위에 코드를 설명 드릴께요.

@media(min-width: 0px) {.abc{display:inline-block; width: 336px; height: 280px; } }
이것은 모바일 코드입니다. 넓이와 높이는 좋아하는 사이즈로 넣으시면 되세요.

@media(min-width: 768px) {.abc{display:inline-block; width: 336px; height: 280px; } }
태블릿 코드입니다.

@media(min-width: 980px) {.abc{display:inline-block; width: 728px; height: 182px; } }
PC 코드입니다.

중간에 당연히 ‘ 애드센스 AD ‘ 넘버와 ‘ slot 넘버 ‘ 넣으셔야 합니다.

위와 같이 코드를 적용하면, 장점이 있습니다.

헤더에 이미 광고사이즈를 배정을 해주었기 때문에 CLS 속도가 빨리진다는 것!!!!!

많이~~~~~~빨리질 것이라고 생각하고 전 이미 속도 테스트 해보았습니다.
(자동광고 시 구글에서 페이지 이동에 대하여 좋지않는 점수를 주게 됩니다.)

요새 애드센스 재미 붙여서,
더 좋은 내용 있으면 공유 드릴께요~

애드센스 SEO pagespeed

스크랩

공유하기

신고

하트 아이콘미키씨님 외 4명이 좋아합니다.

목록글쓰기
댓글 3
댓글 새로고침
소셜로그인

로그인 후 더욱 많은 기능을 이용하세요!

네이버 계정으로 로그인
페이스북 계정으로 로그인
구글 계정으로 로그인
카카오톡 계정으로 로그인
이메일 또는 아이디로 로그인
X
회원가입ID/PW 찾기 소셜 계정 로그인