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

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

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

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

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

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

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

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

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

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

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 설정 방법과 구글 광고 삽입 방법이었습니다.