한국에서는 광고 및 제휴 콘텐츠를 작성할 때, 대가성 문구를 첫 줄에 표시해야 하는 것이 의무화되었습니다. 하지만, 이로 인해 SEO(검색엔진 최적화) 측면에서 부정적인 영향을 걱정하는 경우가 많습니다. 첫 줄에 "이 글은 링크를 통해 구매 시 수수료를 제공합니다"라는 문구가 들어가면, 검색엔진이 이를 본문 요약(메타디스크립션)으로 노출시키기 때문입니다.

이를 해결하기 위해 이미지를 활용해 광고 문구를 표시하고 CSS 배경 이미지를 사용하는 방법을 추천합니다. 이 방법은 법적 의무를 충족하면서도 SEO에 부정적인 영향을 최소화할 수 있습니다.

빈텍스트에 sponsored 속성을 정해주고 CSS로 표현

1. 빈 텍스트 블록 추가 및 CSS 클래스 지정

클래스 정의 해주​​기

1) 워드프레스 글 편집기를 열고, 새 텍스트 블록을 추가합니다.

텍스트 내용은 비워 둡니다.

2) 블록 설정 메뉴에서 고급 옵션으로 이동합니다.

오른쪽 사이드바의 블록 설정에서 추가 CSS 클래스 입력란을 찾습니다.

3) sponsored-banner를 입력합니다.

이 클래스가 광고 문구를 배경 이미지로 표시할 CSS와 연결됩니다.

4) 블록을 저장합니다.


2. CSS를 통해 배경 이미지 설정

이제 광고 문구를 배경 이미지로 표시하기 위한 CSS를 추가합니다.

워드프레스 관리 패널에서 외모 → 사용자 정의 → 추가 CSS로 이동하여 아래 코드를 입력합니다.

워드프레스나 고스트와 같은 플랫폼에서는 CSS 배경 이미지 방식이 가장 적합한 방법입니다.CSS를 정의해두고 필요할 때만 활용하게 되면 되니까요

SEO와 표시 의무를 모두 충족하면서도, 사용자는 광고 문구를 명확히 볼 수 있습니다. 또한, 모바일 환경에서도 문제없이 작동하도록 반응형 디자인을 추가하세요.

이 방법으로 블로그 운영을 더 효과적으로 할 수 있을 것입니다.