AMP 자동 광고 적용 방법 – Astra Pro에서 설정한 과정 정리

AMP 자동 광고 적용 방법을 찾다 보면 대부분 AMP for WP 기준 설명은 쉽게 찾을 수 있습니다. 반면 공식 AMP 플러그인을 사용하면서 Astra Pro 테마까지 함께 사용하는 경우에는 body 영역에 광고 코드를 넣는 과정이 다소 헷갈릴 수 있습니다.

저 역시 AMP 설정을 마친 뒤 애드센스 자동 광고를 연결하려고 했는데, head 코드는 쉽게 추가할 수 있었지만 body 태그 바로 아래에 코드를 넣는 방법을 찾는 데 시간이 걸렸습니다.

이번 글에서는 공식 AMP 플러그인과 Astra Pro 환경에서 AMP 자동 광고 적용 방법을 정리해보겠습니다.

AMP 자동 광고 적용 코드부터 확인해야 했다

애드센스에서 AMP 자동 광고가 활성화된 화면 — 애드센스 AMP 광고 활성화 상태

AMP 페이지에서는 일반 자동 광고 코드가 그대로 동작하지 않습니다. 애드센스에서 제공하는 AMP 전용 코드가 필요하며, 먼저 해당 코드를 확인해야 합니다. 애드센스 관리자 화면의 광고 메뉴로 들어가면 AMP 광고 설정 여부를 확인할 수 있습니다. AMP 기능이 활성화된 상태라면 코드 확인 메뉴가 나타납니다.

설정 화면에서는 인페이지 광고와 앵커 광고 등 AMP에서 사용할 광고 유형을 선택할 수 있습니다. 설정을 저장한 뒤 AMP 코드 보기를 선택하면 필요한 코드가 표시됩니다.

AMP 자동 광고 적용 방법의 핵심은 코드 2개

head 코드와 body 코드가 표시되는 AMP 광고 설정 화면 — AMP 자동 광고 코드 확인 화면

AMP 코드 보기 화면을 열면 두 개의 코드가 제공됩니다. 첫 번째 코드는 head 영역에 추가해야 하며 AMP 광고 라이브러리를 불러오는 역할을 합니다. 두 번째 코드는 body 태그 시작 부분에 추가하는 코드입니다.

head 영역에 AMP 광고 코드 추가

Astra 자식 테마 header.php 파일에 AMP 광고 스크립트를 추가하는 화면 — header.php에 AMP 스크립트 추가

첫 번째 코드는 테마의 header.php 파일에서 추가할 수 있습니다. 워드프레스 관리자에서 테마 파일 편집기로 이동한 뒤 header.php 파일을 열고 head 태그 아래쪽에 코드를 삽입하면 됩니다.

테마를 직접 수정하면 업데이트 시 코드가 사라질 수 있으므로 자식 테마를 사용하는 편이 안전했습니다.

Astra 테마에서 body 코드를 넣는 방법

Astra Pro 모듈에서 사용자 정의 레이아웃을 활성화하는 화면 — 사용자 정의 레이아웃 활성화

실제로 막혔던 부분은 두 번째 코드였습니다. Astra 테마는 body 태그를 직접 수정하기 쉽지 않기 때문에 일반적인 방법으로는 광고 코드를 넣기 어렵습니다. 이때 사용하는 기능이 Astra Pro의 사용자 정의 레이아웃(Custom Layouts)입니다.

먼저 Astra 옵션에서 사용자 정의 레이아웃 기능을 활성화해야 합니다.

Astra Custom Layouts 관리 화면 — Custom Layouts 메뉴

활성화가 완료되면 외모 메뉴에 Custom Layouts 항목이 추가됩니다.

Custom Layout 생성 시 Hooks 타입을 선택하는 화면 — Hook 레이아웃 선택

새 레이아웃을 만들 때는 Hook 타입을 선택하면 됩니다.

코드 편집기에서 body 코드 입력

Custom Layout에서 코드 편집 모드로 전환하는 화면 — 코드 편집기 전환

Hook 레이아웃 생성 후에는 코드 편집기로 전환해야 합니다. 상단의 Enable Code Editor 버튼을 누르면 HTML 코드를 직접 입력할 수 있습니다.

AMP 자동 광고 body 코드를 입력한 Custom Layout 화면 — AMP body 코드 입력

이후 두 번째 AMP 광고 코드를 입력하면 됩니다.

Custom Layout 설정까지 마쳐야 정상 적용된다

Astra Custom Layout의 body_top 설정 화면 — AMP 광고 Hook 설정

코드 입력만으로 끝나는 것은 아니었습니다. 게시 전 Custom Layout 설정에서 아래 항목을 지정해야 정상적으로 모든 AMP 페이지에 적용됩니다.

Layout : Hooks
Action : body_top
Display On : Entire Website

적용 후 확인한 변화

AMP 자동 광고 적용 방법대로 설정을 마친 뒤 AMP 페이지를 확인해보니 일정 시간이 지난 후 자동 광고가 정상적으로 노출되었습니다. 광고가 바로 나타나지 않을 수도 있으므로 몇 시간 정도 기다려보는 것이 좋습니다.

OpenLiteSpeed와 LiteSpeed Cache 환경에서도 별다른 충돌 없이 동작했으며, AMP 유효성 검사 오류 역시 발생하지 않았습니다. 만약 원하는 위치에 광고를 넣고 싶다면 Ad Inserter 같은 플러그인을 이용해 AMP 광고 위치를 직접 제어하는 방법도 고려할 수 있습니다.

FAQ

AMP 자동 광고는 바로 표시되나요?

아닙니다. 애드센스에서 광고 배치를 처리하는 시간이 필요할 수 있으며 몇 시간 정도 지연될 수 있습니다.

Astra 무료 버전에서도 가능한가요?

본문에서 소개한 방법은 Astra Pro의 Custom Layouts 기능을 기준으로 작성했습니다.

AMP 자동 광고 적용 방법을 사용하면 일반 광고 코드도 필요한가요?

AMP 페이지는 AMP 전용 광고 코드를 사용해야 하며 일반 자동 광고 코드만으로는 정상 작동하지 않을 수 있습니다.