구글 AMP 페이지에 반응형 애드센스 적용하는 방법

구글은 AMP 프로젝트 페이지에서 AMP 페이지의 광고를 적용하는 방법을 소개하고 있다.

기본적인 광고는 <amp-ad> 애드센스코드(adsense ad) </amp-ad> 로 표시한다.

예를 들면 320X100 광고는 다음과 같이 표시한다.

 

애드센스를 반응형으로 바꾸려면 여기에 layout=responsive를 추가한다.

그래서 결국 이런 소스코드가 된다.

 

광고가 잘 표시되는지 테스트를 해보았는데 스마트폰에서는 광고가 잘 보인다.

스마트폰 가로에서 본 광고

amp-adsense-responsive-1

스마트폰 세로에서 본 광고

amp-adsense-responsive-2

그런데 pc에서는 중간, 그리고 하단 광고가 공백으로 표시되는 현상이 있다.

어떤 문제인지 확실하지 않지만 구글에서 광고 시스템을 개선하면 문제가 사라질 것으로 생각이 된다.