워드프레스 애드센스(Adsense) 플러그인 추천! Ad Inserter!

AMP for WP 플러그인 광고 설정 화면입니다. 총 6곳에 광고를 게재 할 수 있습니다.

Ad Inseter 는 PRO버전 기준으로 총 64곳에 광고를 게재 할 수 있습니다
물론 구글 광고만 넣는다면 정책 위반에 걸리겠죠?
이 화면에서 중요한건 코드인데. 위에 보이는 코드는 기존의 애드센스 코드입니다.

위 코드는 구글 AMP에 사용하는 코드입니다.
조금 다르죠?

Ad Inseter에서는 쉽게 변환할 수 있는 기능을 제공 합니다.
(여러개 삽입시에 하나 만들어 놓고 ad-slot 부분만 변경하는게 더 빠른것 같기도 합니다)

위에 보이는 네모칸을 따라 누르시면 위와 같은 화면이 나옵니다.

오른쪽 위에 위에 방향 화살표를 클릭합니다.

그럼 위와같이 자동으로 칸이 채워집니다. AMP Ad 부분만 Below the fold로 바꿔 주신뒤 오른쪽 위부분에 있는 아래방향 화살표 아이콘을 눌러 줍니다.

그럼 이렇게 아래 부분에 AMP용 애드센스 코드가 생성 됩니다.
기존의 코드와 같이 쓰셔도 되지만 가급적이면 따로 앧센스 광고단위를 만드시는게
나중에 통계를 낼때나 모니터링 하기에 좋습니다.
그런 이유로 위에 코드는 삭제합니다.

아직 끝난게 아닙니다. 이렇게만 하면 광고가 Non AMP 모드의 화면에만 표시가 됩니다.
AMP가 적용된 페이지에서 보이게 하기 위해선
Misc를 클릭하신 후 AMP pages 부분에 체크를 해줘야 합니다.
Ajax에 체크가 되어 있으면 AMP가 적용되지 않은 페이지에서도 해당 광고가 노출이 됩니다.
해당 광고를 AMP 적용된 페이지에만 보이게 하시려면 Ajax에 체크를 제거 합니다.

마지막으로 헤더에 코드를 넣어 줘야합니다.
안 넣어도 작동은 하는 듯 하지만 에러가 납니다.

톱니바퀴 모양의 부분을 클릭후 Header로 들어 가셔서 아래 스크립트 코드를 입력해 주세요.
입력후 오른쪽 아래 빨간 네모 부분을 클릭하여 초록 불이 들어 오게 해주세요(활성화?)
*구글 검색으로 AMP버전으로 들어 오신 분은 제일하단에 Non-AMP Version 보기를 클릭 하셔야 코드가 제대로 보입니다. AMP 버전의 화면에서는 특정 코드가 안보입니다*

[ADINSERTER AMP]
<script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>

이제 다 끝났습니다. AD Inserter 플러그인이 기능이 많아서
처음엔 조금 복잡하실 수 있지만 몇번 하다보면 별거 아닙니다.
천천히 따라해보시고 궁금하신 부분이 있으시면 댓글 달아주세요.
제가 알고 있는 것이라면 성의껏 답변해 드리겠습니다.

한동안 게임하느라 안했던 블로그를 다시 시작하면서
자작 NAS(XPEnology)로 운영하다보니 아무래도 속도면에서
포털 블로그에 비해 많이 떨어진걸 개선 하고 싶었습니다.
집에 전용선을 깔수도 없고… 그래서 결국엔…AMP를 적용하기로..

1.AMP란?

AMP 즉 Accelerated Mobile Pages의 약자인데
말그대로 가속 모바일페이지? 입니다.
AMP를 적용하는 가장 큰 이유는 로딩시간 단축입니다.

AMP의 작동 원리는 페이지 구성 단순화, 대역폭 최적화, 페이지 캐싱으로 나누어 집니다.
구성 단순화는 자바 스크립트 코드등을 최소화 합니다. 그래서 테마자체의 효과 같은건 포기해야 합니다.
대역폭 최적화는 텍스트를 먼저 불러오고 용량이 큰 이미지등은 나중에 불러 오는 걸 의미합니다.
페이지 캐싱은 AMP의 작동 원리중 가장 핵심이라 할 수 있는데 AMP가 적용된 페이지를 구글에서 캐싱하고 있다가
구독자가 해당 글을 검색하여 클릭하게 되면 사이트를 운영하는 서버가 아니라 구글에서 캐싱한 데이터를 보여주게 됩니다.

모바일에서 구글 검색을 하게 되면 위와 같이 사이트 주소옆에 번개 모양을 보실 수 있는데
그 번개 모양이 있는 페이지를 클릭하게 되면 놀라운 속도로 해당 페이지가 열립니다.

2.플러그인으로 워드프레스에 AMP 적용하기

AMP를 워드프레스에 적용하는 방법은 크게 두가지가 있습니다.
직접 HTML코드를 이용해 적용을 하는 방법과 간편하게 플러그인을 설치하는 방법입니다.
HTML코드를 이용해 적용을 하는 방법은 https://www.ampproject.org/learn/overview/
를 참고하시면 됩니다.

대표적인 워드프레스의 무료 AMP플러그인으로는

AMP for WP플러그인과 Automatic에서 만든 AMP플러그인이 있습니다.

Automatic의 AMP플러그인이 가볍긴하지만 AMP를 적용시에 메뉴가 없네요;;;
그래서 전 AMP for WP플러그인을 사용합니다.
물론 영어이기도 하고 설정이 꽤 많지만 조금 워드프레스를 사용하신 분이라면
설치후 플러그인을 실행하면 어렵지않게 설정하실 수 있도록 안내 됩니다.

AMP for WP은 기본으로 3개의 무료테마와 다운로드해서 사용할 수 있는 무료테마 3개를 제공합니다.
총 6개의 무료테마!

또한 애드센스(AdSense)를 사용하시는 분이라면 손쉽게 광고를 삽입 하실 수도 있습니다.
애드센스 코드를 따로 넣으시려면 기존과를 다른형태의 코드를 넣어야 하는데 어렵진 않지만
조금 번거롭습니다.
하지만 아무래도 무료 기능이라 그런지 AMP for WP로 광고를 넣으면 광고 좌우에 여백이 좀 크네요;;
그래서 전 광고는 기존에 사용하던 AD Inserter 플러그인을 이용합니다.

이외에도 여러가지 옵션이 존재합니다.

어느 정도 설정이 끝나셨으면
자신의 페이지 주소뒤에 /amp 를 입력하면 amp 페이지를 불러옵니다.

적용이 되셨으면 구글 검색에 자신의 글에 번개 보양이 뜨는것만 기다리시면 됩니다.
구글에 검색 되기 까지는 2~3일 정도 걸리며 그뒤로 하나둘씩 적용되기 시작합니다.