한국에서는 광고 및 제휴 콘텐츠를 작성할 때, 대가성 문구를 첫 줄에 표시해야 하는 것이 의무화되었습니다. 하지만, 이로 인해 SEO(검색엔진 최적화) 측면에서 부정적인 영향을 걱정하는 경우가 많습니다. 첫 줄에 "이 글은 링크를 통해 구매 시 수수료를 제공합니다"라는 문구가 들어가면, 검색엔진이 이를 본문 요약(메타디스크립션)으로 노출시키기 때문입니다.
이를 해결하기 위해 이미지를 활용해 광고 문구를 표시하고 CSS 배경 이미지를 사용하는 방법을 추천합니다. 이 방법은 법적 의무를 충족하면서도 SEO에 부정적인 영향을 최소화할 수 있습니다.
빈텍스트에 sponsored 속성을 정해주고 CSS로 표현
1. 빈 텍스트 블록 추가 및 CSS 클래스 지정
클래스 정의 해주
워드프레스 글 편집기를 열고, 새 텍스트 블록을 추가합니다.
텍스트 내용은 비워 둡니다.
블록 설정 메뉴에서 고급 옵션으로 이동합니다.
오른쪽 사이드바의 블록 설정에서 추가 CSS 클래스 입력란을 찾습니다.
sponsored를 입력합니다.
이 클래스가 광고 문구를 배경 이미지로 표시할 CSS와 연결됩니다.
블록을 저장합니다.
2. CSS를 통해 배경 이미지 설정
이제 광고 문구를 배경 이미지로 표시하기 위한 CSS를 추가합니다. 워드프레스 관리 패널에서 외모 → 사용자 정의 → 추가 CSS로 이동하여 아래 코드를 입력합니다.
.sponsored-banner {
width: 100%; /* 배너 전체 너비 */
height: 50px; /* 배너 높이 */
background-image: url('sponsored-banner.png'); /* 광고 문구 이미지 경로 */
background-size: contain; /* 배경 이미지를 컨테이너에 맞게 조정 */
background-repeat: no-repeat; /* 반복 방지 */
background-position: center; /* 중앙 정렬 */
margin-bottom: 16px; /* 본문과의 간격 */
display: block; /* 블록 요소로 처리 */
}
워드프레스나 고스트와 같은 플랫폼에서는 CSS 배경 이미지 방식이 가장 적합한 방법입니다.CSS를 정의해두고 필요할 때만 활용하게 되면 되니까요
토론