애드센스 반응형 디스플레이 광고의 너비가 반응형으로 유지되고 높이 값이 고정되도록 코드를 수정하는 방법입니다.
애드센스 반응형 광고 적용 시 지나치게 높은 광고가 게재되어 블로그(사이트)의 미관을 해치고 글에 집중하기 어려운 경우가 있습니다. 이 문제는 너비가 반응형으로 유지되고 높이 값이 고정되도록 애드센스 광고 코드를 수정하여 해결할 수 있습니다.
반응형 광고 높이를 고정하는 방법
애드센스 코드에서<ins></ins>
사이에 있는 속성을 수정하고 높이 스타일을 추가하면 됩니다. 수정 및 추가해야하는 부분은 세 부분이 있습니다.
style="display:block;"
에height:90px;
를 추가합니다. 높이 값을 원하는 값으로 변경하세요.data-ad-format="auto"
를data-ad-format="horizontal"
으로 변경합니다.data-full-width-responsive="true"
를data-full-width-responsive="false"
으로 변경합니다.
아래는 디스플레이 광고 단위 코드 예시입니다. 수정 전, 수정 후 탭을 눌러 확인해보세요.
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-01234567890XXXXX"crossorigin="anonymous"></script> <!-- Google Ads --> <ins class="adsbygoogle" style="display:block;" data-ad-client="ca-pub-01234567890XXXXX" data-ad-slot="12345XXXXX" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-01234567890XXXXX"crossorigin="anonymous"></script> <!-- Google Ads --> <ins class="adsbygoogle" style="display:block;height:90px;" data-ad-client="ca-pub-01234567890XXXXX" data-ad-slot="12345XXXXX" data-ad-format="horizontal" data-full-width-responsive="false"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script>
코드를 수정한 후 적용합니다.
애드센스 정책 및 제한
광고 크기를 수정하기 전에 애드센스 정책 및 광고 크기 제한에 대해 알아두어야 합니다. Google 애드센스에는 광고 크기의 최대 크기와 최소 크기에 대한 제한이 있습니다. 제한을 벗어난 고정된 크기의 광고는 표시되지 않습니다.
- 최소 높이 50px
- 최소 너비 120px
- 높이, 너비 모두 1200px 초과할 수 없음
- 높이, 너비 중 어느 한 쪽의 길이만 450을 초과할 수 있음
광고 크기를 수정했는데 광고가 게재되지 않는 경우 위의 제한 사항을 충족하는지 확인하세요.