아스트라(Astra) 테마 제목 아래 애드센스 넣는 방법 정리 (CLS 문제 방지 포함)

워드프레스에서 아스트라 애드센스 추가 작업을 할 때 가장 많이 발생하는 문제가 바로 CLS(Cumulative Layout Shift)입니다. 광고가 늦게 로딩되면서 본문이 아래로 밀리는 현상이 생기고, 이 때문에 구글 서치 콘솔에서 레이아웃 이동 오류가 발생하는 경우가 많습니다.

특히 Astra 테마는 속도 중심 구조라서 광고를 아무 위치에나 넣으면 모바일에서 화면이 흔들리거나 콘텐츠가 갑자기 이동하는 문제가 생길 수 있습니다. 그래서 단순히 광고 코드를 넣는 것보다 “광고가 표시될 공간을 먼저 확보하는 과정”이 더 중요합니다.

이번 글에서는 플러그인 없이 아스트라 애드센스 추가를 진행하면서 제목 아래 광고 영역을 안정적으로 고정하는 방법을 이미지 순서대로 정리해보겠습니다. functions.php 설정과 추가 CSS 설정을 함께 사용하며, 테마 업데이트 시 코드가 사라지는 문제까지 같이 정리합니다.

왜 제목 아래 광고에서 CLS 문제가 많이 발생할까?

워드프레스 아스트라 애드센스 삽입 위치 중에서 제목 아래는 클릭률이 높은 편입니다. 하지만 광고 로딩 속도가 본문보다 늦으면 문제가 생기기 시작합니다.

대표적으로 아래 같은 현상이 발생합니다.

글 제목 아래 공간이 갑자기 늘어남
본문이 아래로 밀렸다가 다시 올라감
모바일 화면이 흔들리는 느낌 발생
Core Web Vitals CLS 오류 증가
광고가 늦게 뜨면서 사용자가 잘못 클릭

이 현상은 대부분 광고 높이를 미리 확보하지 않았기 때문에 발생합니다. 그래서 먼저 해야 하는 작업은 애드센스 코드 추가가 아니라 “광고 공간 예약”입니다.

제목 아래 광고 공간 먼저 확보하기

광고가 들어갈 영역을 미리 고정해 두면 본문 밀림 현상을 크게 줄일 수 있습니다. 아스트라 애드센스 추가 작업에서는 이 부분이 가장 중요합니다.

아스트라 애드센스 추가를 위한 워드프레스 추가 CSS 설정 화면 — 워드프레스 추가 CSS에서 광고 영역 높이 확보

위 화면은 워드프레스 사용자 정의하기 메뉴 안에 있는 추가 CSS 설정 화면입니다. Astra 테마뿐 아니라 대부분의 워드프레스 테마에서 동일하게 접근할 수 있는 영역입니다.

제목 아래 광고에서 CLS 오류가 발생하는 가장 큰 이유는 광고 영역 높이가 미리 확보되지 않기 때문입니다. 애드센스는 로딩 속도에 따라 광고 크기가 늦게 결정되는데, 이 과정에서 본문이 아래로 밀리는 현상이 생깁니다.

그래서 먼저 해야 하는 작업은 광고 코드를 넣는 것이 아니라 광고 높이를 CSS로 고정하는 것입니다. 워드프레스 관리자에서 아래 순서로 이동합니다.

모양
사용자 정의하기
추가 CSS

이후 아래 코드를 추가합니다.

.custom-adsense {
    margin: 20px !important;
    text-align: center;
    height: 280px;
}

@media (max-width: 768px) {
    .custom-adsense {
        height: 320px;
    }
}

여기서 가장 중요한 부분은 height입니다.

모바일과 데스크톱 광고 높이가 다를 수 있기 때문에 실제 광고가 출력되는 크기를 보면서 수치를 조정해야 합니다. 높이가 부족하면 본문이 다시 밀릴 수 있고, 너무 높으면 빈 공간이 과하게 생길 수 있습니다.

특히 아스트라 애드센스 추가 작업에서는 모바일 CLS 문제가 자주 발생하므로 모바일 높이를 따로 설정하는 것이 중요합니다.

광고 공간을 먼저 확보해야 하는 이유

단순히 디자인 문제 때문만은 아닙니다. 광고 로딩으로 화면이 흔들리면 아래 문제까지 연결될 수 있습니다.

사용자 체류 시간 감소
모바일 이탈 증가
Core Web Vitals 점수 하락
구글 검색 품질 신호 악화
광고 클릭 오류 증가

특히 최근에는 페이지 속도보다 “레이아웃 안정성”이 더 중요하게 보는 경우도 많기 때문에 제목 아래 광고에서는 CLS 방지가 거의 필수 수준입니다.

functions.php에 애드센스 코드 추가하기

CSS 설정이 끝났다면 이제 실제 광고 코드를 제목 아래에 삽입해야 합니다. 이 작업은 Astra 테마의 functions.php 파일에서 진행합니다.

아스트라 애드센스 추가를 위한 functions.php 코드 설정 화면 — Astra Child functions.php에 애드센스 코드 추가

위 화면은 Astra Child 테마의 functions.php 파일 편집 화면입니다. 워드프레스 기본 테마에 직접 코드를 추가하면 테마 업데이트 과정에서 수정 내용이 사라질 수 있기 때문에 자식 테마에서 작업하는 방식이 안전합니다.

많은 사용자가 부모 테마 functions.php에 바로 코드를 넣었다가 업데이트 후 광고 코드가 삭제되는 문제를 겪습니다. 특히 애드센스 자동 광고가 아니라 수동 광고를 사용하는 경우에는 광고 위치가 전부 초기화될 수도 있습니다.

워드프레스 관리자에서 아래 경로로 이동합니다.

모양
테마 파일 편집기
Astra Child
functions.php

이후 아래 코드를 추가합니다.

function add_adsense_below_title($content) {

    if (is_single()) {

        $adsense_code = '<div class="custom-adsense">

            <ins class="adsbygoogle"
                 style="display:block"
                 data-ad-client="ca-pub-xxxxxxxxxx"
                 data-ad-slot="xxxxxxxxxxxx"
                 data-ad-format="auto"></ins>

            <script>
                (adsbygoogle = window.adsbygoogle || []).push({});
            </script>

        </div>';

        $content = $adsense_code . $content;
    }

    return $content;
}

add_filter('the_content', 'add_adsense_below_title');