[워드프레스 Tips] 구글 AMP(Accelerated Mobile Pages)에 애드센스 적용하기

모바일에서 컨텐츠를 빠르게 보여주는 것을 목표로 한 AMP(Accelerated Mobile Pages)는 로딩 속도를 빠르게 하기위해 기존 사이트에 적용되던 많은 화려한 디자인 요소, 다양한 기능적 요소를 무시하고 아주 심플하게 보여 줍니다. 그 덕분에 아주 빠르게 보여줄 수 있습니다.
그리고 구글은 AMP(Accelerated Mobile Pages)가 적용된 페이지를 우선적으로 검색결과에서 보여주겠다고 천명하고 있습니다. SEO를 중시한다면 당연히 AMP(Accelerated Mobile Pages)를 적용해야 합니다.

그렇기 때문에 사이트에 애드센스가 적용되어 있드라도 구글 AMP(Accelerated Mobile Pages)에서는 이를 무시하고 애드센스를 띄우지 않습니다. 애드센스를 유지하려는 입장에서는 아쉬운 점입니다.

그러면 방법이 없는 것이냐? 구글도 AMP(Accelerated Mobile Pages)에서 애드센스를 적용하는 방법을 안내할정도로 다양한 방법이 존재합니다.

여기에서는 강제로 AMP(Accelerated Mobile Pages)에서 애드센스를 적용하는 방안에 대해서 알아 보겠습니다.

1. 일반 애드센스 코드와 AMP용 애드센스 코드 차이

아래는 우리가 자주 보는 일반적인 애드센스 코드입니다.

<script async src=”//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js”></script>
<ins class=”adsbygoogle”
style=”display:inline-block;width:336px;height:280px”
data-ad-client=”ca-pub-95675557XXXXXXXX”
data-ad-slot=”170XXXXXXX”></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

이에 반해서 AMP용 애드센스 코드는 조금 단순한데요.
아래와 같은 형식으로 되어 있습니다.

<amp-ad width=350 height=100
type=”adsense”
data-ad-client=”ca-pub-95675557XXXXXXXX”
data-ad-slot=”170XXXXXXX”>
</amp-ad>

2. 글 처음과 마지막에 AMP에 애드센스 적용하기

쉽게 AMP에 애드센스를 적용하는 방법은 AMP의 single.php에 AMP용 애드센스 코드를 추가하는 것입니다.

워드프레스는 Featured 이미지가 나오고 컨넨츠가 나오고 이어 마지막으로 Footer가 나옵니다.
따라 Featured 이미지 다음과 Footer 앞 부분에 쉽게 AMP용 애드센스 코드를 넣을 수 있습니다.

일반적으로 애드센스 코드 입력은 아래와 같은 순서로 진행 합니다.

1. 플러그인 편집기로 이동합니다.
2. AMP 플러그인을 선택합니다.
3. amp/templates/single.php 파일을 선택합니다.
4. line을 찾아 그 라인 아래에 AMP에 적용 가능한 애드센스 코드를 넣습니다.
5. do_action( ‘amp_post_template_footer’, $this ); 를 찾아 이 줄 앞에 애드센스 코드를 넣습니다.
6. 저장합니다. 이로써 모두 끝났습니다.

▽ 플러그인 편집기 사용 모습



3. 글 중간에 애드센스를 적용하기

이 또한 마찬가지로 amp/templates/single.php 파일에서
아래 코드를 찾습니다.

<?php echo $this->get( 'post_amp_content' );

이 코드를 아래 코드로 대체합니다.
아래 코드는 10번째 패러그래프 다음에 애드센스 광고를 넣겠다는 코드입니다.

<?php
$content = $this->get( 'post_amp_content' );
$contents = explode("</p>", $content);
$p_number = 1;
foreach($contents as $content){
echo $content;
if($p_number == '10'){
echo' <amp-ad class="amp-ad-1" type="adsense" width=336 height=280 data-ad-client=”ca-pub-2866779045830860” data-ad-slot=”7338714035”></amp-ad>'; }

echo '</p>'; $p_number++; 
} ?>

그럼 AMP 적용 페이지에서도 애드센스를 적용해 소정의 목표를 달성하시길 기원합니다.