블로그 작업노트 17: SEO 최적화를 위한 광고 수정 작업들

73 views as of January 2, 2025.

애드핏 광고 제거 & CLS 문제 해결
테이블 스타일 변경
오래된글 알림 스타일 변경
메인 포스팅 리스트 지연 로딩 조건 추가
쿠팡 파트너스 배너 변경

오늘도 이어지는 블로그 작업노트이다.

저번에 SEO에서 자꾸 높게뜨는 CLS 레이아웃 수치 문제때문에 정말 이것저것 다 만져보았다.

결국 범인검거했고 그거관련해서 광고 코드를 싹다 뜯어고쳤다.

애드핏 광고 제거 & CLS 문제 해결

이놈이 범인이었다.

애드핏 광고 스크립트도 서드파티 쿠키 때문에 문제긴한데, 애초에 컨텐츠 상단에 박아둔 탑 광고가 묘하게 CLS 레이아웃 변경을 크게 유발시키는듯하다.

해당 광고영역을 강제로 잡아도 수치가 떨어지지 않아서 한번 광고자체를 떼봣는데 0.1이었던 수치가 0.005로 떨어지는걸 보고 어이가 없었다.

서비비용을 충당하기위해서 광고를 달고, 광고수익을 내기위해서 검색엔진 최적화를하는데, 정작 그 광고 코드때문에 SEO 지표가 떡락하고, 검색유입이 안되는 무슨 이상한 루프안에 꼬이는 느낌이들어서 기분이 묘했다.

어차피 애드핏 광고 단가가 너무 낮아서 배제할까 생각도 했는데, 이번 기회에 그냥 쳐내고 구글 애드센스나 그위치에 박았다.

똑같이 컨텐츠상단에 박으면 레이아웃 문제가 일어나기는 하는데, 생각보다 지표는 그렇게까지 심하게 치솟진 않았다. (0.005 -> 0.03)

테이블 스타일 변경

기존에 에디터로 삽입되는 테이블 스타일 코드를 기본값에서 손안대고 쓰고있었는데, 헤딩을 추가하다보니까 좀 어색해서 아래처럼 좀 개선했다.

오래된글 알림 스타일 변경

기존에 2년이상 지난글은 본문 상단에 오래된글이라는 안내 박스가 있었는데, 그쪽에 광고가 들어가다보니 박스가 너무 중복되게 많은거 같아서 아래처럼 본문 정보로 위치를 이동하고 주변에 맞게 스타일을 재조정했다.

메인 포스팅 리스트 지연 로딩 조건 추가

기존에 메인 리스트 전부에 지연로딩 기능을 추가했는데, 이러다보니까 코어 웹 바이탈 점수가 낮아진다고해서, 아래와 같이 초기 3개의 글은 지연 로딩이 적용안되게 조건식을 추가했다.

<div class="grp_image">
    <img src="{{ $homePost->image }}"
         @if($loop->index > 3) loading="lazy" @endif
         alt="{{ $homePost->title }}">
</div>Copy

쿠팡 파트너스 배너 변경

기존에는 쿠팡 파트너스 검색 링크를 iframe 형식으로 가져다 사용하고있었다.

근데 이 방식이 마찬가지로 SEO 최적화에는 엄청 안좋았다.

iframe 방식으로 외부 리소스를 가져다 쓰고 이에 관련된 서드파티 쿠키도 사용하다보니 콘솔창에 에러나 경고메시지가 장난아니게 나왔었다.

그래서 좀 고심해본바 쿠팡 파트너스에서 파트너스용 바로가기 링크를 만들 수 있다는것을 알게되었고 아래와 같은 코드와 스타일로 내 블로그 전용 쿠팡 링크 배너를 만들어 적용했다.

html

<div class="grp_coupang">
    <div role="button" class="grp_coupang_banner" onclick="goTo('https://link.coupang.com/a/b7OwCJ', '_blank')">
        <img src="/ico-coupang.png" alt="쿠팡 파트너스 링크">
        <div class="txt_notice">이 링크는 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.</div>
        <div class="txt_hover">쿠팡 로켓프레시 바로가기 →</div>
    </div>
</div>Copy

scss

// 쿠팡
.grp_coupang {
    display: flex;
    align-items: center;
    //background-color: #eee;
    //padding: 0.25rem 0.5rem;
    margin-bottom: 0.75rem;

    .grp_coupang_banner {
        background-color: rgba($clr-line, 10%);
        display: flex;
        align-items: center;
        @include inter-margin(1rem);
        width: 100%;
        height: 2.5rem;
        border-radius: 0.5rem;
        padding: 0 0.75rem;
        position: relative;
        overflow: hidden;

        &:hover, &:focus {
            &::before {
                transform: translateX(0);
                //background-color: darken($clr-line, 20%);
            }

            .txt_notice {
                display: none;
            }

            .txt_hover {
                display: block;
            }
        }

        &::before {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            transform: translateX(calc(-100% + 0.75rem + 70px + 0.5rem));
            transition: all 1s ease;
            background-color: #FEFEFE;
        }

        img {
            height: 1rem;
            margin-top: 4px;
            margin-left: -1px;
            z-index: 1;
        }

        .txt_notice {
            font-size: $font-size-12;
            line-height: 1.1;
            color: $clr-font-gray;
            text-align: justify;
            letter-spacing: -1px;
            z-index: 1;
        }

        .txt_hover {
            display: none;
            font-size: $font-size-14;
            color: $clr-font-black;
            z-index: 1;
        }
    }
}Copy