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

Updated on 2017-09-15 by

모바일에서 컨텐츠를 빠르게 보여주는 것을 목표로 한 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. 저장합니다. 이로써 모두 끝났습니다.
  7. ▽ 플러그인 편집기 사용 모습

    AMP에 애드센스 코드 적용하기_플러그인 편집기

    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 적용 페이지에서도 애드센스를 적용해 소정의 목표를 달성하시길 기원합니다.

21년 새롭게 뉴스레터를 시작합니다

한 주간 발행한 포스팅과 읽었던 글 중 괜찮은 내용을 선정해 뉴스레터를 보내드리고 있습니다. 물론 중간에 괜찮은 글들이 있으면 부정기적으로도 보내드리고 있습니다.

서울에 생긴 Vultr 서버 100$ 프로모션

안녕하세요?
새로운 사이트 구축을 위한 신규 서버를 고민하신다면 , 서울 리젼이 생겨 더욱 빨라진 Vultr 서버를 Vultr 100$ 프로모션으로 이용해 보세요.

아래 프로모션 코드 링크를 통해 Vultr에서 서버 구축 후 1달 이상 사용 및 $25이상 결제 時 추가 100$을 주는 프로모션입니다.

Vultr는 서울에도 리젼이 있어 매우 빠르고, 아마존 웹 서비스(AWS)보다 성능이 높으며 가장 가성비가 뛰어납니다.

거기다 사용자 UI도 좋고, 15개까지 스냅샷을 무료로 제공하기 때문에 관리하기 좋습니다. 그리고 지금 100$ 프로모션처럼 가격적인 메리트도 있습니다.

우분투 20.04와 PHP 8 기반 워드프레스 설치 방법

가상 서버를 운영하고픈 勇者에게 전하는 가상 서버 운영 입문 노하우 – Vultr 가상서버호스팅(VPS)를 중심으로

워드프레스 최적화를 위한 18개월간의 고민, 그 노하우를 담다.

도쿄 리젼과 비교해 본 Vultr 서울 리젼 사용기

가성비가 뛰어난 Vultr 가상서버호스팅(클라우드호스팅,VPS) 사용기

guest
2 Comments
Oldest
Newest
Inline Feedbacks
View all comments