워크스페이스 열기

구현 가이드

디스플레이 광고

Display ads

AdSense의 대표적인 광고: 원하는 곳에 둘 수 있고 화면 크기에 맞게 저절로 조정될 수 있는 직사각형이나 띠 모양의 광고.

  • AdSense
  • 모바일 및 데스크톱
데스크톱
휴대폰

1분 만에 이해하기

디스플레이 광고란

디스플레이 광고는 AdSense에서 가장 잘 알려진 유형입니다. 학교 벽에 걸린 포스터를 떠올려 보세요. 정해진 자리에 있고 지나가는 모든 사람이 볼 수 있습니다. 사이트도 마찬가지입니다. 페이지에서 공간을 고르고 거기에 코드 조각을 붙여 넣으면 Google이 그 공간에 광고를 넣습니다.

이 광고를 만드는 방법은 두 가지입니다. 첫째는 Google이 권장하는 반응형입니다. 컵에 담긴 물처럼 놓인 공간의 모양을 따릅니다. 사용자가 컴퓨터, 태블릿, 휴대폰으로 사이트를 열면 광고가 알아서 알맞은 크기를 계산합니다. 사용자가 휴대폰을 돌리면 알맞은 크기의 새 광고가 로드됩니다. 둘째는 너비와 높이를 정확히 정하는 고정형으로, 예를 들면 300x250픽셀입니다. Google은 고정 크기에서는 게재 가능한 광고가 적을 수 있고, 그러면 수익이 줄어들 수 있다고 알립니다.

Google이 실적이 가장 좋다고 꼽는 크기는 300x250(중간 직사각형), 336x280(큰 직사각형), 728x90(리더보드), 300x600(하프 페이지), 320x100(모바일용 대형 배너)입니다. 휴대폰을 세로로 들면 반응형 광고가 늘어나 화면 전체 너비를 차지할 수 있는데, Google의 테스트에서 그렇게 할 때 더 잘 작동했기 때문입니다. 이는 시스템이 좋은 결과와 방문자에게 좋은 경험이 나오리라고 판단할 때만 일어납니다.

각 광고가 나타날 위치를 직접 정하고 싶을 때 디스플레이 광고를 쓰면 좋습니다. 예를 들어 글 상단이나 텍스트 옆입니다. 다만 선택한 위치는 Google의 배치 규칙을 따라야 합니다. 광고를 콘텐츠로 위장하면 안 되고, 메뉴나 버튼 바로 옆에 붙이지 않도록 주의해야 하며, 화면에 콘텐츠보다 광고가 더 많아서는 안 됩니다.

단계별 설명

구현 방법

  1. 광고 메뉴 열기AdSense 계정에 로그인하고 광고를 클릭한 다음 광고 단위별을 클릭하세요.
  2. 디스플레이 광고 선택디스플레이 광고를 클릭하고, 알아보기 쉬운 고유한 이름을 광고 단위에 지정하세요.
  3. 크기 선택Google이 권장하는 반응형을 선택하거나, 너비와 높이를 정확히 입력하려면 고정을 선택하세요.
  4. 코드 가져오기저장 후 코드 가져오기를 클릭하고 광고 단위의 코드를 복사하세요.
  5. 페이지에 붙여넣기광고가 나타나야 하는 페이지의 정확한 위치에서, body 태그 사이에 코드를 붙여넣으세요. 그런 다음 완료를 클릭하세요.
  6. 나타날 때까지 기다리기보통 광고는 몇 분 안에 나타나지만 최대 한 시간까지 걸릴 수 있습니다. 나타나지 않으면 사이트 페이지에서 사이트 상태가 준비됨인지 확인하세요.

구현 예시

코드와 화면에 보이는 모습

이 코드는 광고가 나타나야 하는 페이지의 정확한 위치에서 body 안에 넣습니다.
<script async
     src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-0000000000000000"
     crossorigin="anonymous"></script>
<!-- Anúncio de display responsivo -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-0000000000000000"
     data-ad-slot="1234567890"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

<!-- Versão de tamanho fixo (728x90) -->
<ins class="adsbygoogle"
     style="display:inline-block;width:728px;height:90px"
     data-ad-client="ca-pub-0000000000000000"
     data-ad-slot="1234567890"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
데스크톱예약해 둔 공간에 직사각형이나 띠 모양으로 나타납니다. 예를 들면 상단의 728x90 띠나 글 옆의 300x250 직사각형입니다.
모바일반응형 광고는 화면 너비에 맞게 조정됩니다. 휴대폰을 세로로 들면 화면 전체 너비를 차지할 수 있습니다.

Google의 안내

허용 및 금지 사항

허용

  • Google이 권장하는 반응형 크기나 고정 크기 선택하기.
  • Google이 실적이 가장 좋다고 꼽는 크기 사용하기: 300x250, 336x280, 728x90, 300x600, 320x100.
  • 광고를 페이지 가운데에 놓는 등 위치를 잡기 위해 코드를 div나 table 안에 넣기.
  • 광고 위에 라벨 쓰기. Google 정책은 "광고" 또는 "스폰서 링크"(영어로는 Advertisements 또는 Sponsored Links)라는 이름만 허용합니다.
  • 화면에 콘텐츠보다 광고가 많아지지 않는 한, 같은 페이지에 광고를 여러 개 넣기.
  • Google 도움말 예시처럼 CSS로 화면 너비별 반응형 광고 크기를 정하고, 이후 여러 기기에서 테스트하기.

허용 안 됨

  • "광고를 클릭하세요"라고 클릭을 요청하거나, 클릭이 사이트에 도움이 된다고 말하기. 클릭의 대가로 어떤 보상을 주는 것도 금지됩니다.
  • 메뉴, 링크, 다운로드 버튼, 재생 버튼, 동영상 플레이어, 게임 창 근처에 광고를 두어 사용자가 실수로 클릭할 수 있게 하기.
  • 화살표, 기호, 눈에 띄는 애니메이션으로 시선을 광고로 끌기.
  • "리소스"나 "유용한 링크" 같은 오해를 부르는 제목 아래에 광고를 두거나, 사이트 콘텐츠처럼 보이게 하기.
  • 화면에 콘텐츠보다 광고가 많거나, 감사 페이지, 오류 페이지, 이탈 페이지처럼 콘텐츠가 없는 화면에 광고 표시하기.
  • 사용자가 요청하지 않았는데 페이지나 광고가 저절로 새로고침되게 하기.

팁

올바르게 하는 방법

주의

흔한 오류

body 밖에 있는 코드

광고 단위 코드를 body 태그 밖에 붙여넣으면 광고가 제대로 표시되지 않습니다.

너비가 없는 상자

반응형 광고가 플로팅 요소처럼 너비가 정해지지 않은 상자에 있으면 크기를 계산할 수 없습니다. CSS 미디어 쿼리로 너비를 정하세요.

고정된 높이

높이가 고정되었거나 제한된 상자는 반응형 광고를 방해합니다. Google은 이를 피하라고 권장합니다.

콘텐츠를 숨기는 스크립트

광고보다 먼저 실행되어 페이지의 일부를 숨기는 스크립트는 크기 계산을 막을 수 있습니다. 권장되는 해결책은 CSS 미디어 쿼리로 크기를 정하는 것입니다.

자주 묻는 질문

반응형과 고정형 중 무엇을 선택해야 하나요?

Google은 반응형을 권장합니다. 고정형은 게재 가능한 광고가 적을 수 있고, 그러면 수익이 줄어들 수 있습니다.

광고가 나타나기까지 얼마나 걸리나요?

보통 몇 분이지만 최대 한 시간이 걸릴 수 있습니다.

페이지에 광고를 몇 개까지 넣을 수 있나요?

정책은 정해진 개수를 두지 않습니다. 규칙은 화면에 콘텐츠보다 광고가 많지 않아야 한다는 것이며, Google은 적을수록 좋을 수 있다고 알려 줍니다.

휴대폰을 돌리면 광고가 바뀌나요?

네. 화면 방향이 바뀌면 알맞은 크기의 새 광고가 로드됩니다. 이전 광고는 보관되었다가 사용자가 휴대폰을 다시 돌리면 돌아옵니다.

작은 화면에서 광고를 숨길 수 있나요?

네. Google 도움말에는 display none이 있는 CSS로 특정 화면 너비에서 광고 단위를 숨기는 방법이 나와 있습니다. 이렇게 숨기면 광고는 요청조차 되지 않습니다.

자료실

Google 공식 출처

이 페이지의 모든 내용은 Google 공식 문서를 따릅니다. 원문에서 바로 읽어 보세요.

내 사이트가 이 형식을 올바르게 쓰고 있나요?

감사는 사이트를 방문자처럼 읽고, 아무것도 클릭하지 않으며, 무엇을 고쳐야 하는지 알려 줍니다.

감사 실행하기