구글은 모바일 접속 시 사용자 친화적인 최적화를 위해 AMP(Accelerated Mobile Pages)를 활용할 것을 권장하며, AMP로 제작된 모바일 홈페이지를 통해 더 빠른 로딩 속도와 간편한 사용자 경험을 제공합니다.
우선 AMP를 사용하는 경우, 구글 서치콘솔에서는 AMP 구성 요소, 스크립트 태그, 스타일 문제 등으로 인한 다양한 AMP URL 오류가 발생할 수 있습니다. 그러나 워드프레스를 사용하는 경우, AMP 설정과 애드센스 광고 설정을 손쉽게 구성할 수 있습니다.
워드프레스와 구글에서 추천하는 대표적인 AMP 플러그인으로는 기본 AMP 플러그인인 “AMP“와, 가장 많이 사용하는 “AMP for WP – Accelerated Mobile Pages“가 있습니다. 이러한 플러그인을 사용하면 핸드폰으로 접속 시 웹페이지 주소 뒤에 ?AMP가 추가되며, AMP 페이지로 강제 리디렉션되어 간소화된 디자인으로 표시됩니다.
AMP를 사용하면 모바일 화면 비율, 텍스트 크기 등이 자동으로 최적화되어 깔끔한 페이지를 제공합니다. 또한, AMP 전용 테마도 함께 제공되어 더욱 직관적인 설정이 가능하지만 단점으로는 기존에 설정한 애드센스 광고가 AMP 페이지에서 표시되지 않는 경우가 있습니다. 이 문제를 해결하려면 구글 애드센스 홈페이지에서 AMP 전용 광고 설정을 적용하고, 새로운 광고 코드를 추가해야 합니다.
AMP는 사이트의 속도를 개선하고 사용자 경험을 최적화하는 데 효과적이지만, 기존 디자인 및 기능의 제한, 광고 설정 변경 등의 추가 작업이 필요합니다. 설정 전에 테스트를 통해 사이트에 적합한지 확인하는 것이 중요합니다.
구글 애드센스 AMP 자동광고 설정
구글 애드센스 홈페이지로 접속합니다.
광고설정에서 AMP 자동광고를 선택합니다.
AMP 광고 설정을 위해 필요한 두 가지 태그 스크립트를 복사합니다.
- 1단계:
<head>태그 안에 추가해야 할 스크립트 - 2단계:
<body>태그 안에 추가해야 할 스크립트
복사한 스크립트를 활용하기 위해 워드프레스 관리자 계정에 로그인합니다.
워드프레스 AMP 애드센스 자동광고 설정
워드프레스 관리자 계정으로 접속합니다.
외모 -> 테마편집기 -> Header.php를 선택합니다.
Header.php 파일을 선택합니다.
복사한 스크립트 중 첫 번째 스크립트를 <head> 태그 사이에 붙여넣습니다.
두 번째 스크립트를 <body> 태그 시작 부분에 붙여넣습니다.
참고: 테마 편집기가 비활성화된 경우, FTP나 파일 관리자 플러그인을 사용하여 Header.php 파일을 편집할 수 있습니다.
워드프레스 AMP 애드센스 광고 수동설정
자동광고 외에도 Ad Inserter 플러그인을 사용하여 AMP 광고를 설정할 수 있습니다.
AD Inserter 플러그인을 실행합니다.
플러그인 설정 화면에서 우측 상단의 스패너 아이콘을 클릭합니다.
좌우 화살표를 사용해 Adsense 탭으로 이동합니다.
Adsense 탭으로 이동하면 3가지 메뉴가 보입니다.
- Comment: 광고 관련 메모(선택 사항)
- Publisher ID: 애드센스 퍼블리셔 ID
- AD Slot ID: 광고 슬롯 ID
삽입하고자 하는 애드센스 코드를 삽입합니다.
아래 옵션을 보면 애드센스 타입과 AMP 애드센스 Disabled 설정되어 있습니다.
각 광고타입과 위치등 지정합니다.
- Standard
- In-Article
- in-feed
- Matched Content
- Auto-Ads
- Amp-Only
오른쪽 상단의 아래 화살표 아이콘을 클릭한 뒤, 약 3~5초 기다립니다. 플러그인이 자동으로 AMP용 광고 코드를 생성합니다.
[ADINSERTER AMP]
<amp-ad
layout="fixed-height"
height=300
type="adsense"
data-ad-client="ca-pub-xxxx"
data-ad-slot="xxxxx">
</amp-ad>AMP 애드센스광고코드로 자동변환되며 하단 디바이스 탭을 선택합니다.
AMP 광고 확인하기
시간이 지나고 AMP 페이지(예: ?AMP URL)로 접속하면 광고가 정상적으로 표시되는 것을 확인할 수 있습니다. 광고가 표시되지 않는다면 설정을 다시 확인하거나 Google AdSense에서 광고 상태를 점검하세요.
애드센스 플러그인을 사용하지 않고, 수동으로 광고 코드를 삽입하고 싶다면 아래 방법을 참고하세요. 워드프레스에서는 Ad Inserter 플러그인 없이도 간단히 광고를 추가할 수 있는 다양한 방법이 있습니다.
애드센스 광고 수동 넣는방법
1. 테마 파일에 직접 추가
워드프레스 테마 파일을 편집하여 광고를 원하는 위치에 삽입할 수 있습니다. 예를 들어, 게시물 상단에 광고를 넣으려면 single.php 파일을 열고 <article> 태그나 콘텐츠 시작 부분에 코드를 삽입하면 됩니다.
게시물 하단에 광고를 넣으려면 콘텐츠 끝 부분에 광고 코드를 추가하면 되며 광고를 사이드바에 표시하려면 sidebar.php 파일에 광고 코드를 넣어 적용할 수 있습니다.
아래는 게시물에 광고를 추가하는 예시입니다:
<?php if (is_single()) : ?>
<div class="ad-container">
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-XXXXXXX"
data-ad-slot="XXXXXXX"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<?php endif; ?>
2. 블록 편집기를 활용
워드프레스 블록 편집기(구텐베르크)를 사용하면 특정 게시물이나 페이지에 광고를 쉽게 추가할 수 있습니다.
블록 삽입 메뉴에서 사용자 정의 HTML 블록을 추가하고, 여기에 광고 코드를 붙여 넣으면 됩니다.
3. 위젯으로 광고 추가
광고를 사이드바나 푸터에 배치하려면 위젯을 사용하는 방법이 있습니다.
관리자 페이지의 외모 > 위젯 메뉴로 이동한 뒤, 광고를 삽입하고 싶은 영역에 HTML 또는 텍스트 위젯을 추가한 후 광고 코드를 넣으면 됩니다.
4. 숏코드 사용
숏코드를 활용하면 광고 코드를 한 번만 정의한 뒤, 원하는 위치에 간단히 삽입할 수 있습니다.
예를 들어, 아래 코드를 functions.php 파일에 추가하면 [adsense] 숏코드를 사용할 수 있습니다.
function display_adsense() {
return '<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-XXXXXXX"
data-ad-slot="XXXXXXX"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>';
}
add_shortcode('adsense', 'display_adsense');
이제 원하는 게시물이나 페이지에서 [adsense]를 입력하면 광고가 표시됩니다.
5. 페이지 빌더 활용
Elementor나 Divi 같은 페이지 빌더를 사용한다면, HTML 코드 위젯을 이용해 광고 코드를 추가할 수 있으며 광고를 정확히 원하는 위치에 배치하기 쉬운 방법입니다.
광고를 추가하기 전, 테마 파일을 백업하는 것이 좋습니다. 또한, AdSense의 정책을 준수하며 광고를 적절히 배치해야 하며 테마가 업데이트될 때 수정한 코드가 사라질 수 있으므로, 자식 테마 “차일드테마“를 사용하는 것도 추천합니다.