AMP 오류 메세지

그런데 구글 웹마스터 도구(Search Console) 에 위와 같이 오류가 나타났습니다. AMP로 색인?되는 족족 ‘잘 사용되지 않는 태그 또는 속성 사용‘ 이라며…중요하지 않다고는 하지만 그래도 신경이 쓰였습니다.
참고로 위 캡쳐는 해결후에 찍은 스크린 샷 입니다.

101개 까지 발생한 AMP 오류 메세지

현재는 문제를 찾아 해결한 상태라 조금씩 구글에서 다시 정보를 가져가면서 줄어들고 있습니다.

AMP 오류 세부 정보

보는 순간!!이건 딱 봐도 애드센스 코드 관련 에러입니다.

출처 – 구글 고객센터

AMP 페이지에 광고를 삽입할 때 페이지에 위와 같은 스크립트를 넣어줘야 합니다. 그 코드가 뭔가 잘못 되었으니 위와 같은 메시지가 나오겠지요?

전 AD Inserter란 플러그인을 사용해서 광고와 저 코드를 삽입했는데 다시 보니 코드를 삽입하고 저장을 안눌렀나 봅니다. 혹여나 단순히 광고만 삽입하신 분들은 위에 코드도 꼭 한번 확인해 보시기 바랍니다.

관련글 – 구글 AMP가 적용된 워드프레스에 Ad Inserter 플러그인으로 애드센스 광고 달기!

워드프레스 애드센스(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일 정도 걸리며 그뒤로 하나둘씩 적용되기 시작합니다.

오늘 자정쯤 위와같은 메일이 날라왔네요.
다른 블로그 글들을 읽어보니 은행에서 전화가 온다기에 기다리고 있었습니다.

전화만 기다리며 일하고 있는데..KB국민은행에서 외화통장에 달러가 입금됐다는 문자가 왔습니다..잉?전화는?

국민은행 어플로 확인해보니 확실히 들어 왔네요.

애드센스 지급 메뉴에 들어가서도 보니 최종잔액 0달러로 바뀌어 있고 송금되었다고 나와 있습니다.

국민은행의 경우 100불미만 이거나 원화 500만원 미만시 1만원의 수수료가 있지만
플래티늄카드 사용으로 국민은행에서는 수수료가 붙지않고 외국에서의 중계은행 수수료 5달러만 차감 되었습니다.

아직 적은 돈이지만 애드센스 수익금을 처음으로 입금받고 나니까 기분이 좋네요~
블로그 더 열심히 해야 겠습니다.

어제 5/30일 오후에 애드센스를 가입하고 신청했습니다.

여자친구가 조금 더 글이 쌓인후에 신청하려 했으나 혹시나 하는 마음에….

가입 후 바로 헤더영역에 코드달고 기다리다가

궁금해서 오늘 들어가 봤는데

가입하고 바로 코드넣는걸보니 1차는 바로패스한듯하고 바로 2차까지 승인이 됐네요..

보통 3일이상 걸리는 걸로 알고있는데

5/30일인 어제 저녁에!

5/30일날 정오인 12시쯤 했으니까 9시간 정도 걸렸네요.

광고를 바로 달아 보았습니다.

광고코드 입력후 30분~1시간정도 지나니 광고가 나오네요.

저는 오래전에 가입해서 잘기억이 안나는데

사람들 말처럼 크게 어렵진 않네요.

여자친구는 신청할때부터 승인전까지 포스팅도 13개밖에 안되고

글자수도 많은게 200개;;

카테고리도 6개 밖에 안되는데

그리고 하루 방문자수 많아야 20명!

당황스러울정도로 한방에 되버렸네요;

단, 복사해서 붙여넣거나 다른글 수정해서 올리는 행위는 하지않고

다 직접 작성한 글들입니다.

곰곰히 생각해보니 ssl인증서를 적용하여 https연결을 한점과 hsts 적용! 그리고 개인 도메인을 사용한점이 긍정적으로 평가된듯 합니다.

국내에선 대부분 티스토리 블로그에 애드센스를 다는걸로 알고있는데

아무래도 티스토리 블로그는 이런 부분이 약해서 좀 힘든듯 합니다.

한 4개월 정도는 애드센스에서 페이지 수준 광고로 하는바람에 수익이 처참했지만

얼마전부터 수동으로 광고 올리고 나니 수익이 쭉쭉 올라가네요.

이번달말경에 애드센스 수익금 총액이 100달러가 넘어서

다음달에 입금 될듯합니다.

본래는 귀찮아서 원화계좌로 받으려했느나..먼가 손해보는 기분이 들어서

국민은행에서 외화 거래 통장을 개설했습니다.

국민은행에서 만든이유는 수수료에서 혜택을 볼수 있어서 인데 국민은행 외화 송금수수료에 대한내용은

아래금 참고하시기 바랍니다.

애드센스 수익금 국민은행으로 송금시 송금수수료 무료

외화 거래 통장은 금융거래 한도계좌에 해당이 안되네요.

그냥 개설 사유만 적고 개성이 되네요.

일반 예금 통장이 아니라 디자인은 그닥이네요 ㅋ

외화보통예금 통장의 첫 페이지 입니다.

특별한건 없습니다. 계좌번호와 국민은행 SWIFT CODE가 적혀 있습니다.

이제 애드센스에서 계좌를 등록해야 겠죠?

애드센스에 로그인한후

설정 – 지급 메뉴로 진입한뒤 결제 수단 관리를 클릭합니다.

원화계좌가 하나 있네요.

새로운 외화 계좌를 등록할거니까 결제수단 추가를 클릭

위와같은 화면이 나오는데 여기에 예금주이름을 은행에 등록되어 있는 영문이름으로 적어주시고

은행 이름란에는 KOOKMIN BANK라고 기입해주세요.

SWIFT 은행 식별 코드에는 CZNBKRSE 를 입력해주세요.

통장에는 CZNBKRSEXXX 라고 되어있는데 XXX는 빼고 입력해주세요.

그리고 계좌번호를 두곳에 입력해주면 됩니다.

이제 저장을 누르면 끝입니다

빨리 다음달이되서 입금되는걸 보고 싶네요.

입금후 후기 올리겠습니다^^

초반에는 구글에서 만든 애드센스 플러그인을 사용하였는데.

이제 지원이 중지가 됐네요.

페이지 수준광고를 사용하라며.

그래서 한동안 페이지 수준 광고를 사용했는데

어느순간에는 적당한 위치에 알아서 광고가 표시되다가

얼마전부터 수익이 갑자기 떨어져서 봤더니

데스크탑에서 광고가 잘 나오지 않는 현상이 발생 하였습니다.

그래서 귀찮지만 직접 광고를 달려고

플러그인을 알아보던 중 애드센스 뿐만 아니라 다른 광고도 삽입 할수도 있고 강력한 기능을 가지고 있는

Ad Inserter란 플러그인이 눈에 들어왔습니다.

1. Ad Inserter 설치

Ad Inserter

직접 워드프레스 플러그인 추가 페이지에서 검색하여 설치 하거나

위 링크에 들어가서 설치를 해줍니다.

설치를 했으면 이제 광고 단위를 만들어야겠죠?

애드센스 승인이 되어있으시다면

2.애드센스 광고단위 생성

Adsense.com

으로 들어갑니다

좌측에 내 광고 – 광고 단위 경로를 클릭하시면

우측과 같은 화면이 나오는데 여기서 새 광고 단위를 클릭하세요

위와 같은 광고 선택하는 화면이 나오는데

텍스트 및 디스플레이 광고를 선택합니다.

일치하는 콘텐츠는 다음번 포스팅때 이야기 하겠습니다.

가장위에 이름 부분에는 알아보기 쉽게 적어줍니다.

예를 들어 상단에 들어갈 광고면 ‘상단 광고’ 이렇게요~

그리고 광고크기는 반응형 홈페이지나 블로그 경우에는 자동크기 반응형 하시는게 속편합니다.

그외 광고 유형에서 텍스트 및 디스플레이 광고를 할지 텍스트나 디스플레이 광고 중에 하나만

할지 선택합니다.

텍스트 광고 스타일은 광고 디자인?을 정하는건데 크게 수익하고 관련이 없을 듯 합니다.

그외 맞춤 채널과 대체광고는 일반 사용자에겐 크게 필요 없기에 일단 패스합니다.

다하셨으면 저장 및 코드 생성을 클릭해주세요.

그럼 위와 같은 코드가 나오는데 이걸 전체 선택후 복사해 주세요.

이제 다시 워드프레스로 갑니다.

3.Ad Inserter 설정

워드프레스 관리자 화면에서

설정 – Ad Inserter 로 들어갑니다.

위와 같은 화면이 나오는데 존 유료 버전이라 조금 다를 수 있습니다.

하지만 유료 사용하지 않아도 충분히 대부분 기능을 사용하실수 있습니다.

저는 플러그인이 좋아서 기부 개념으로 구매했습니다. 유료 버전의 기능을 사용할 일은 없네요.

우선 무료의 경우 16개의 광고를 삽입할 수 있습니다.

상단에 숫자1을 클릭후 조금전에 애드센스에 만든 광고 단위를 검은 화면에 붙여 넣기 해주세요.

아래 쪽에 메뉴들을 누르면 위와 같은 화면이 나옵니다.

하나씩 살펴 보겠습니다.

상단 좌측에는 상세옵션 추가 버튼(Misc, Device, List, Manual, Preview)이 있고 우측에는 저장 버튼이 있습니다.

그 아래에는 광고의 위치를 지정 할 수 있는 메뉴가 있는데

우와 같이 그림으로 안나온다면 Hide 부분이 Show로 되어 있을 겁니다.

아이콘 첫번째 줄은 어느 위치에 광고를 둘지 정하는것이고

두번째 줄은 정렬설정 입니다.

무료버전에서는 화면에 따라 따라오는 스티치 광고만 지원이 안됩니다.(2번째줄 뒤에서 4개)

그아쪽에는 어느 위치에 광고를 표시할지 정하는 부분인데

광고를 게시하고 싶은 위치에 체크를 해주세요.

*Preview를 누르시면 광고 모양과 여백등의 상세조정이 가능합니다*

위설정은 Manual, Misc, Devices 순입니다.

Manual 설정

이 광고를 위젯에서 사용할지 여부와 숏코드와 PHP코드등으로 사용할지

여부를 체크할수 있습니다.

위젯의 경우 여기서 체크한다고 위젯에 바로 나오는게 아니라 위젯에서

Ad Inserter 위젯을 선택후 광고를 선택해야 합니다.

Misc 설정

광고를 로그인한 사용자에대한 광고 표시여부와 광고를 몇개 삽입할건지 지정할 수 있으며

광고가 표시되는 페이지나 글, 또는 적당한 광고가 없을때 어떤 태그에 해당하는 광고를 삽입할지 정하실 수 있습니다.

그리고 몇번째 위치에 광고를 삽입 할지도 정할 수 있습니다.

예를들면 광고 위치를 상단이 아닌 Between Posts를 선택시에

2번째 Between Posts에 삽입하고 싶다면

Filter insertions에 2를 입력해 주면 됩니다.

위 스크린 샷은 저의 블로그 카테고리와 홈페이지등에 적용 되어있는 광고의 설정입니다.

Max부분에 1이라고 입력했는데 Between Posts를 선택하면

카테고리에서 글 사이사이 광고가 다들어 가버립니다

그래서 한개만 표시하려고 1을 선택한 것이고

Filter insertions에 2를 한것은 위에서 설명한대로 두번째 위치에 배치한 것입니다.

위치 확인 자신의 홈페이지나 블로그 화면으로 간뒤에

위에 툴바에 보시면 이런 메뉴가 있습니다.

여기서 Show Positions를 클릭하시면

이렇게 위치를 확인 하실 수 있습니다.

Devices 설정

특별한 설명이 필요 없을 듯 합니다.

위와 같이 구독자가 어느 디바이스로 왔을때 광고를 보여 줄지 정할 수 있습니다.

이것을 잘이용하면 모바일과 홈페이지에서 다른위치에 광고를 배치할 수 있습니다.

이 설명을 빼먹을 뻔 했네요.

위치선택에서 After Paragraph나 Before Paragraph를 선택하면

위와 같은 설정이 추가 됩니다.

Paragraph number은 단락 넘버인데

툴바의 Show Positions에서 확인이 가능합니다.

하지만 글마다 단락위치도 다르고 설정하는데 어려움이 있으니 퍼센트로 지정을 해줍니다.

위 처럼 0.7이면 글의 70%정도 내려온 위치에 광고가 표시 됩니다.

0.3이면 30%정도 내려온 위치에 광고가 표시 되겠죠?

그아래 130이라고 쓰여 있는부분은

페이지에 어느정도의 글자가 있을때 광고를 표시할지 정하는 부분 입니다.

위광고는 모바일에서 130개 이상의 글자가 있을때 광고를 표시하도록 설정한 것 입니다.

비워두면 무제한 입니다.

중요한걸 빼먹었네요

그리고 광고는 위치마다 제가각 애드센스에서 광고단위를 만들어서 사용해주세요.
추후에 통계 낼 때 편합니다.

추후에 통계 낼 때 편합니다.

이상 Ad Inserter 설정 방법과 구글 광고 삽입 방법이었습니다.

그래서 송금받을 은행을 알아봤는데
 국민 카드와 함께 사용시에 수수료 혜택을 볼수있네요.

국민은행 외화 수수료 기준입니다.
위 기준보시면 큰 금액의 경우에는 수수료를 면제 받기 힘듭니다.

MVP스타가 되려면..
위 기준에 들어가야하는데…
제일 깔끔한 방법으론 다른 기준다빼고 요구불예금의 3개월 평잔이 1억이 있으면 됩니다.
그럼 KB평점이 10,000점이 되나
일반통장에 1억씩 입금해서 썩히는 사람이 많지 않을겁니다.
하지만 KB국민 플래티늄 카드를 사용하신다면 이야기가 달라집니다.

제가 사용하는 카드입니다.
연회비가 조금쌔긴해도 마일리지 하나는 정말 잘 모이네요

상품정보에
플래티늄 – 고품격 서비스 – KB국민은행 금융수수료 감면/면제 서비스 부분에 보시면
위와같은 내용을 확인하실수 있습니다.
이부분에 대해 국민은행과 상담했는데 위 내용이 맞다고 합니다.
신용카드 연회비가 조금 비싸지만
애드센스로 수익이 많이 나시는 분이라면 국민 플래티늄카드나 그보다 상위카드를
사용하시면 수수료 부분만 하더라도 충분히 혜택을 연회비를 충당하고도 남을 것 같습니다. 

그외 수수료 나가는 부분이 있을지는 모르나
일단 입금을 받아봐야할 것 같습니다.
입금이되면 다시한번 포스팅 하도록 하겠습니다.

귀찮아서 신경안쓰고 있다가 오늘 해보았습니다.

우선 처음으로 광고 게재하시려는 분들은
애드센스에 가입해야겠죠?
https://www.google.co.kr/adsense/
위 주소로 접속해주세요

지금 가입하기

구글 계정이 있으신분은 로그인을 눌러주시고
없으시면 계정만들기로 구글 계정을 하나 만들어주세요~

로그인하면 위와 같은 화면이 나오는데
자신의 웹사이트를 적어주고 한국어를 선택해주세요.
홈페이지가 해외사람들 위주면 그 나라 언어로 해주고
저장하고 계속하기를 누릅니다.

귀찮지만 전부 입력해주세요~

동의안하면 가입 안시켜주니 동의합니다

빨간색 부분의 코드를
자신의 웹사이트나 블로그의 head부분에 넣어주고 체크부분에 체크하시고 완료를 클릭합니다.
요놈이 애드센스 QuickStart를 이용할수있는 코드이자
연결 코드입니다~

최대 3일이 소요된다고는 하는데 길어야 하루정도면 검토 완료되는듯 합니다.

검토가 완료된후 로그인하셔서
메뉴 – 내광고 – 페이지 수준 광고 탭에 들어가시면
위와같은 설정 화면을 보실수 있습니다.
여기서 Quickstart광고가 체크 되어있나 확인해주시고
아래 모바일 친화적 광고부분에는
사용하고싶은 광고 유형을 선택하시면 됩니다.

위 스크린샷처럼 그전처럼 따로 위치를 지정하지 않아도
알아서 랜덤위치에 광고가 게재됩니다.
이걸 뭐라고하는지 모르겠으나
하단에 툭튀어나오는 광고와 화면전환시에 종종
화면을 꽉채우는 전면 광고까지 게재됩니다.

이건 PC에서 접속했으시 화면인데
모바일 보다는 광고가 덜 나오는듯합니다만
알아서 글사이 링크사이에 슬쩍 들어가 있네요.

무엇보다 마음에 드는건 광고를 잘못 게재해여
정책위반에 걸릴일은 없겠네요.
블로그시작한지 얼마안되어 수익이 그닥없지만..
진작에 할걸 그랬습니다.
이리 편한걸..쓸데없이 플러그인이나 설치하고