워드프레스 구텐베르크 편집기를 사용하다 보면 갑자기 워드프레스 사용자 정의 HTML 블록 안의 애드센스 코드가 보이지 않는 경우가 있습니다. 저 역시 기존에는 패턴으로 관리하던 애드센스 광고 코드가 어느 날부터 편집기에서 보이지 않아 당황했습니다. 처음에는 광고 코드가 삭제된 줄 알았고, 실제로 다시 애드센스 코드를 넣을 뻔하기도 했습니다.
그런데 확인해 보니 광고가 사라진 것이 아니라, 워드프레스 편집기의 표시 방식이 바뀐 것이었습니다.
특히 이런 상황은 잘못 대응하면 애드센스 광고 중복 삽입 문제로 이어질 수 있기 때문에 주의가 필요합니다.
기존에는 잘 보이던 HTML 광고코드가 갑자기 안 보였던 이유
기존에는 워드프레스 사용자 정의 HTML 블록 안에 넣어둔 애드센스 코드가 편집기에서도 바로 보였습니다. 그래서 광고 위치도 파악하고 바로 수정도 가능해서 나름 괜찮은 방법이다라는 워프 초보자로서 그런 생각을 가지고 있었습니다.
저는 광고 코드를 직접 사용자 정의 HTML 블록에 삽입한 뒤, 이를 패턴으로 저장해서 여러 글에 사용하는 방식으로 운영하고 있었습니다.
그런데 어느 순간부터:
- HTML 코드가 안 보임
- 빈 공간처럼 보임
- 코드 편집 버튼만 표시됨
- 패턴 안의 광고 코드 확인이 어려움
같은 현상이 발생했습니다.
아래 이미지와 같이 패턴을 생성하여 “광고 애드센스(dsp)”라고 하는 블록을 목록화면에서 확인할 수 있습니다. 그런데, 실제 글을 작성하는 편집창에서는 해당 영역이 파란색으로 표시만 될 뿐 아무 내용도 표시되지 않는 것을 확인할 수 있습니다.
패턴에 적용된 코드를 보기 위해서는 해당 패턴 블록을 선택한 상태에서 [패턴 편집]을 누르고 [코드편집]을 누르면 보실 수 있습니다.
추가적으로 아래와 같이 비주얼적인 HTML 코드를 삽입 후 닫았더니 편집기에 해당 비주얼이 바로 표시가 되는 부분도 알게 되었습니다. 참고로 H 태그에 특정 디자인 관련 코드가 있는 것도 바로 표시가 되던 부분도 이 부분 때문인 것으로 보입니다.
처음에는 광고 코드가 삭제된 줄 알았습니다
사실 가장 위험했던 부분은 여기였습니다.
분명 이전에 애드센스 코드를 넣어둔 기억은 있는데, 편집기에서는 코드가 전혀 보이지 않았습니다.
그러다 보니 자연스럽게:
“광고 코드가 삭제된 건가?”
라는 생각이 들 수밖에 없었습니다.
실제로 이런 상황에서는 많은 분들이:
- 애드센스 광고 코드를 다시 붙여넣음
- 기존 광고가 있는 줄 모르고 추가 삽입
- 광고 중복 발생
상황으로 이어질 가능성이 있습니다.
특히 패턴으로 관리 중이었다면 더 헷갈릴 수 있습니다.
애드센스 광고 중복 삽입이 위험한 이유
광고가 중복 삽입되면 단순히 광고가 많이 보이는 수준에서 끝나지 않을 수 있습니다.
예를 들어:
- 같은 위치 광고 중첩
- 모바일 광고 과다 노출
- 레이아웃 깨짐
- CLS 문제
- 사용자 경험 저하
등이 발생할 수 있습니다.
특히 워드프레스 패턴을 여러 글에서 사용하는 경우에는 중복된 광고가 대량으로 퍼질 가능성도 있습니다.
그래서 중요한 것은:
“편집기에서 안 보인다고 해서 실제 광고가 삭제된 것은 아닐 수 있다”
는 점입니다.
실제로는 광고가 정상 출력되고 있었습니다
다행히 실제 발행 페이지를 확인해 보니 광고는 정상적으로 출력되고 있었습니다.
즉 문제는:
애드센스 광고 자체가 아니라
워드프레스 구텐베르크 편집기의 표시 방식 변화였습니다.
최근 워드프레스와 블록 에디터는 보안 및 성능 문제로 인해:
- script 미리보기 제한
- iframe 렌더링 제한
- HTML 블록 표시 방식 변경
등이 적용되는 경우가 많습니다.
특히 애드센스처럼 script가 포함된 코드는 편집기 안에서 이전처럼 바로 렌더링되지 않는 경우가 많아졌다는 것을 저도 이제는 확인한 셈인 것입니다.
문서 개요(모두 보기) 기능으로 확인 가능했습니다
이후 확인해 보니 워드프레스의 문서 개요(모두 보기) 기능에서는 기존 HTML 블록이 그대로 존재하고 있었습니다.
즉:
- 광고 코드가 삭제된 것이 아니라
- 편집기 표시 방식만 바뀐 것
이었습니다.
이 부분을 알게 된 뒤에는 괜히 광고 코드를 다시 넣었다가 중복 광고 문제가 생길 수도 있었겠다는 생각이 들었습니다.
위와 같이 워드프레스에서 ‘문서 모두보기’ 버튼을 누르게 되면 해당 문서를 일목요연하게 볼 수 있습니다. 특히 마우스 커서로 가져가 보시면 목록화면의 커서와 편집기에 블록이 함께 표시되는 것도 확인할 수 있습니다.
그래서 Ad Inserter 방식으로 변경했습니다
이 일을 겪고 나서 저는 기존 방식 대신 Ad Inserter 플러그인을 사용하는 구조로 변경했습니다. 해당 플러그인은 기존에 설치를 했었으나, 사용은 하지 않았었습니다. 이 플러그인은 많은 분들이 애드센스 광고를 운영하는 전략으로 많이 사용하십니다.
기존 방식은:
- 워드프레스 사용자 정의 HTML 직접 삽입
- 패턴 안에 광고 코드 저장
- 글마다 관리 필요
구조였다면,
현재는:
- Ad Inserter에 광고 코드 중앙 관리
- 글에는 쇼트코드만 삽입
- 패턴에는 쇼트코드만 저장
하는 방식으로 바꾸었습니다.
예를 들어:
[adinserter block="1"]이런 방식입니다.
이 구조의 장점은 생각보다 컸습니다.
Ad Inserter 방식이 훨씬 안정적이었던 이유
특히 워드프레스 업데이트가 반복될수록 직접 HTML을 관리하는 방식은 예상치 못한 문제가 생길 가능성이 있다는 사실도 이번 기회에 알게 되었습니다.
반면 Ad Inserter 방식은:
- 광고 코드 중앙 관리 가능
- 패턴 깨짐 위험 감소
- HTML 블록 문제 영향 적음
- 유지관리 편리
- 광고 위치 수정 쉬움
장점이 있었습니다.
무엇보다:
“코드가 안 보이는 것 같은 불안감”
자체가 거의 사라졌습니다.
● 워드프레스 Ad Inserter 사용하여, 애드센스 수동 광고 만드는 방법 확인
워드프레스 애드센스 운영 시 개인적으로 느낀 점
이번 일을 겪으면서 느낀 것은:
워드프레스 자체 문제가 아니라,
최근 블록 에디터와 광고 script 처리 방식이 계속 바뀌고 있다는 점이었습니다.
특히:
- GeneratePress
- GenerateBlocks
- Spectra
- Stackable
- 캐시 플러그인
조합을 사용하는 경우에는 편집기 렌더링 방식이 바뀌는 사례가 생각보다 자주 발생할 수 있습니다.
그래서 앞으로는:
광고 코드를 직접 HTML 블록에 계속 넣는 방식보다,
광고 관리 플러그인을 통해 구조적으로 운영하는 방식이 훨씬 안정적이라고 느꼈습니다.
마무리
만약 워드프레스 사용자 정의 HTML 코드가 갑자기 안 보인다면, 먼저 실제 발행 페이지에서 광고가 정상 출력되는지 확인해 보시는 것을 추천드리고 싶습니다.
특히 편집기에서 안 보인다고 해서 바로 애드센스 코드를 다시 삽입하면 광고 중복 문제가 생길 수도 있기 때문에 주의가 필요합니다. 확인은 본문에서 언급드린 방법을 꼭 적용해서 확인해 보셔요.
저처럼 패턴 기반으로 광고를 관리하고 있었다면, 이번 기회에 Ad Inserter 같은 방식으로 구조를 바꿔보는 것도 충분히 고려할 만하다고 생각합니다.
<워드프레스 초보자를 위한 글 안내>
● 워드프레스 이미지 최적화 플러그인 Imagify 테스트 결과 확인
● 워드프레스 방문자 확인 깔끔하게 보기 위한 jetpack 옵션 설정하기
댓글 남기기