블로그 저작권 보호와 광고 수익 표시 방법 총정리. 복사 방지, 출처 자동 삽입, 애드센스카카오 광고 안내문으로 콘텐츠 신뢰도를 높이고 SEO도 최적화하세요.
블로그 글의 품질을 높이는 핵심은 투명성과 신뢰도 입니다. 특히 광고가 포함된 콘텐츠의 경우 이는 더욱 중요합니다. 블로그를 운영하다 보면,내 글에 저작권이 있다는 걸 확실히 알려야 할 때가 있습니다. 특히, 콘텐츠 안에 광고가 포함되어 있다면, 운영자와 광고주 사이의 관계도 분명하게 표시하는 게 좋죠. 이렇게 하면 내 콘텐츠에 대한 권리를 보호할 수 있을 뿐 아니라, 무단 도용이나 글 퍼가기를 막는 데에도 도움이 됩니다.
광고와 관련된 경제적 이해관계를 표시하는 건 단순한 선택이 아니라 공정거래위원회 심사지침에서 권장하는 사항이기도 합니다.
예를 들어 내돈내산이나 수익이 발생할 수도 있음 같은 애매한 표현을 쓰는 건 사실 좋은 방법이 아니에요. 오히려 명확하게 이 광고를 통해 수익이 발생합니다 처럼 적어야 한답니다.
블로그 운영 필수: 콘텐츠 저작권 표시와 광고 경제적 이해관계 표시
그렇다면 왜 이런 규정 준수와 저작권 표기가 콘텐츠 품질을 높이는 걸까요?
간단합니다. 규정을 지키지 않으면 불필요한 제재를 받을 수 있고, 또 요즘 사용자는 광고와 콘텐츠의 관계가 명확하게 드러난다고 해서 굳이 떠나지 않거든요. 오히려 투명하게 운영하는 블로그라는 인식을 주면서 신뢰도를 높여줍니다. 신뢰가 높아지면 광고 클릭률 같은 수치에도 긍정적인 변화가 생깁니다.
명확한 경제적 이해관계 표시는 사용자의 클릭 욕구를 자극하고, 그건 곧 좋은 콘텐츠에 대한 보상으로 이어집니다. 예전 티스토리에 있었던 응원하기 기능처럼, 독자가 자연스럽게 참여하고 싶어지는 효과를 만들 수 있는 거죠.
글 내용에 저작권 표시하기
블로그를 운영하다 보면, 내 콘텐츠가 다른 곳에 무단으로 복사되는 일이 종종 있습니다.
이를 방지하기 위해 저작권 표시 플러그인을 활용하는 분들이 많습니다.
이 기능은 누군가 내 글을 복사할 때, 자동으로 출처나 저작권 문구를 붙여주는 방식인데,
단점도 있습니다.
일반적인 우클릭 방지나 복사 방지 플러그인은 사람이 직접 글을 복사할 때는 효과적일 수 있지만,
자동화된 크롤러(봇), 확장 프로그램, 개발자 도구를 이용하면 이 기능을 쉽게 우회할 수 있습니다.
결국 이런 방식만으로는 콘텐츠 도용 방지가 완벽하지 않죠.
그래서 더 강력한 방법이 필요합니다.
아래 예시 코드는 블로그나 웹사이트에 적용하면,
- 본문 특정 위치에 출처 안내문을 자동으로 삽입
- 복사 시 자동으로 출처 추가
- SEO에 불필요한 영향을 주지 않도록 data-nosnippet 등 속성 활용
이 가능하도록 구성되어 있습니다.
코드 설명
이 코드는 본문 3번째 p 태그 뒤에 콘텐츠 출처 안내문을 삽입하고, 마지막 p 태그 뒤에는 글 수정일을 자동으로 표시합니다. 또한, 사용자가 글을 복사하면 자동으로 페이지 주소와 출처를 클립보드에 함께 넣어줍니다.
검색 엔진에 불필요하게 인덱싱되지 않도록 aside role=”note” data-nosnippet 속성을 사용해, SEO에 부정적인 영향을 최소화했습니다.
script
document.addEventListener("DOMContentLoaded", () = {
const path = window.location.pathname;
if (path === '/' || path.startsWith('/category/')) return;
const h1 = document.querySelector('div.tt_article_useless_p_margin h1');
if (!h1) return;
const h1Text = h1.textContent.trim();
const newText = '⚠ ' + h1Text + ' -[출처안내:일상허브에서 제공합니다]';
const pTags = Array.from(document.querySelectorAll('div.tt_article_useless_p_margin p'));
// p 태그 3번째 뒤에 안내문 추가
if (pTags.length = 3) {
const newAside = document.createElement('aside');
newAside.className = 'source-note';
newAside.textContent = newText;
newAside.style.color = '#FFFF66';
newAside.setAttribute('role', 'note');
newAside.setAttribute('data-nosnippet', 'true');
pTags[2].insertAdjacentElement('afterend', newAside);
}
// 마지막 p 뒤에 글 수정일 기반 안내문 추가
if (pTags.length = 1) {
const lastP = pTags[pTags.length - 1];
const metaModified = document.querySelector('head meta[property="article:modified_time"]');
if (metaModified) {
const modifiedDate = new Date(metaModified.getAttribute('content'));
const dateText = `$modifiedDate.getFullYear()}.$modifiedDate.getMonth() + 1}.$modifiedDate.getDate()} 일상허브`;
const dateP = document.createElement('p');
dateP.className = 'article-modified-date';
dateP.textContent = dateText;
lastP.insertAdjacentElement('afterend', dateP);
}
}
// 복사 시 자동 출처 추가
document.addEventListener('copy', function(e) {
const selection = window.getSelection().toString();
const pageUrl = window.location.href;
const sourceText = selection + "
출처: " + pageUrl + " (일상허브)";
e.clipboardData.setData('text/plain', sourceText);
e.preventDefault();
});
});
/script
코드에 적용된 SEO 관련 속성 설명
1. aside 태그
- 의미: 본문과 직접적인 연관은 없지만 참고할 수 있는 부가 콘텐츠를 담을 때 사용.
- SEO 영향: 검색엔진은 aside 내부의 텍스트를 본문 핵심 콘텐츠로 간주하지 않음.
- 활용 이유: 출처 안내문, 저작권 안내문처럼 검색 노출에 굳이 포함될 필요 없는 문구를 넣을 때 유용
const newAside = document.createElement('aside');
newAside.textContent = newText;
newAside.style.color = '#FFFF66';
pTags[6].insertAdjacentElement('afterend', newAside);
2. role=”note” 속성
- 의미: 해당 요소가 안내/부가 정보임을 명시.
- 접근성(A11y): 화면 읽기 프로그램(스크린 리더) 등에서 참고 정보로 인식.
- SEO 영향: 검색엔진에게도 본문과 별도의 참고 정보라는 의미를 전달.
const newP = document.createElement('p');
newP.textContent = newText;
newP.style.color = '#FFFF66';
newP.setAttribute('role', 'note'); // 부가 콘텐츠 표시
pTags[6].insertAdjacentElement('afterend', newP);
3. data-nosnippet 속성
- 의미: 구글 검색에서 해당 요소의 내용을 검색결과 스니펫(미리보기)에 포함하지 않도록 지정.
- 효과: 본문에는 표시되지만, 검색결과 요약에는 노출되지 않음.
- 활용 이유: 불필요한 안내문이 검색결과 요약에 들어가지 않게 방지.
newP.setAttribute('data-nosnippet', 'true'); // 검색 스니펫 제외
광고 안내문 자동 생성 코드 정리
- aside 이건 본문 핵심이 아니야.
- role=”note” 이건 참고/안내문이야.
- data-nosnippet 검색결과 요약에는 빼줘.
이 세 가지를 조합하면 SEO 방해 없이, 사용자에게만 필요한 안내문을 보여줄 수 있습니다.
광고에 경제적 이해관계 표시하기
아래는 애드센스(AdSense)와 애드핏(AdFit) 광고 아래에 “이 광고는 광고활동의 일환으로 이에 따른 일정액의 수수료를 제공받습니다.” 라는 안내문을 자동으로 삽입하는 JavaScript 코드입니다.
블로그에서 애드센스 광고를 사용할 경우, 광고가 정상적으로 표시되면 광고 하단에 안내문을 추가해 방문자에게 경제적 이해관계를 명확히 보여줄 수 있습니다.
1. 애드센스 광고 경제적 이해관계 표시
애드센스 광고가 언필드(data-ad-status=”unfilled”) 상태이면 안내문을 표시하지 않고 광고가 노출된 경우만 광고 이해관계를 표시해 줍니다.
script
document.addEventListener("DOMContentLoaded", () = {
setTimeout(() = {
const noticeText = "※ 이 광고를 통해 이에 따른 일정액의 수수료를 제공받습니다.";
const insertNoticeBelow = (ad) = {
if (!ad.nextElementSibling || !ad.nextElementSibling.classList.contains('ad-desc-wrapper')) {
const wrapper = document.createElement('aside');
wrapper.className = 'ad-desc-wrapper';
wrapper.style.width = '100%';
wrapper.style.marginTop = '0.3rem';
wrapper.style.textAlign = 'center';
wrapper.setAttribute('role', 'note');
wrapper.setAttribute('data-nosnippet', 'true');
const notice = document.createElement('p');
notice.className = 'ad-desc';
notice.textContent = noticeText;
notice.style.color = '#fff';
notice.style.fontSize = '0.9rem';
notice.style.lineHeight = '1.3';
notice.style.margin = 0;
wrapper.appendChild(notice);
ad.insertAdjacentElement('afterend', wrapper);
}
};
document.querySelectorAll('ins.adsbygoogle').forEach(ad = {
const adStatus = ad.getAttribute('data-ad-status');
const adClient = ad.getAttribute('data-ad-client');
if (adClient === 'ca-pub-9527582522912841') return; // 특정 클라이언트 안내문 생략
if (adStatus !== 'unfilled' && ad.offsetHeight 0) {
insertNoticeBelow(ad);
}
});
}, 2000);
});
/script
코드 설명
- data-ad-status를 체크해 광고가 언필드인지 확인
- 광고 요소 높이(offsetHeight)가 0보다 클 때만 안내문 생성
- 안내문은 p 태그로 생성, 클래스 ad-desc 부여
- role=”note”와 data-nosnippet=”true” 속성으로 SEO와 접근성 고려
- 딜레이 2초(setTimeout)를 줘 광고 렌더링 완료 후 실행
2. 카카오 광고 아래 안내문 표시
카카오 광고의 경우, 광고가 삽입되면 높이가 존재할 때만 안내문을 표시합니다. 카카오 광고는 애드센스와 달리 언필드 상태가 명시되지 않으므로, 광고 영역의 높이(offsetHeight)를 기준으로 안내문 표시 여부를 판단합니다.
script
document.addEventListener("DOMContentLoaded", () = {
setTimeout(() = {
const noticeText = "※ 이 광고를 통해 이에 따른 일정액의 수수료를 제공받습니다.";
const insertNoticeBelow = (ad) = {
if (!ad.nextElementSibling || !ad.nextElementSibling.classList.contains('ad-desc-wrapper')) {
const wrapper = document.createElement('aside');
wrapper.className = 'ad-desc-wrapper';
wrapper.style.width = '100%';
wrapper.style.marginTop = '0.3rem';
wrapper.style.textAlign = 'center';
wrapper.setAttribute('role', 'note');
wrapper.setAttribute('data-nosnippet', 'true');
const notice = document.createElement('p');
notice.className = 'ad-desc';
notice.textContent = noticeText;
notice.style.color = '#fff';
notice.style.fontSize = '0.9rem';
notice.style.lineHeight = '1.3';
notice.style.margin = 0;
wrapper.appendChild(notice);
ad.insertAdjacentElement('afterend', wrapper);
}
};
document.querySelectorAll('ins.kakao_ad_area').forEach(ad = {
if (ad.offsetHeight 0) {
insertNoticeBelow(ad);
}
});
}, 2000);
});
/script
코드 설명
- 광고 영역 높이가 0보다 클 때만 안내문 생성
- 안내문 역시 p 태그로 생성, 클래스 ad-desc 부여
- 다크 모드 대응 글자색 흰색 적용
- SEO 및 접근성 고려를 위해 role=”note”와 data-nosnippet=”true” 속성 유지
광고 경제적 이해 관계 표시 코드 동작 방식
공통 안내문 생성
- createAdNotice() 함수로 안내문을 한 번에 정의.
- 스타일과 문구를 지정하여, 광고 아래에 자연스럽게 표시.
애드센스 광고 탐지
- ins class=”adsbygoogle” 요소 찾기.
- 광고 바로 뒤(afterend)에 안내문 삽입.
애드핏 광고 탐지
- div[data-ad-unit] 또는 iframe 경로에 “adfit”이 포함된 요소 찾기.
- 동일하게 광고 바로 뒤에 안내문 삽입.
3. 네이버 광고 안내문 자동 삽입 스크립트
이 스크립트는 티스토리 블로그에서 자동 게재되는 네이버 광고(NaverAd) 아래에, 이 광고는 블로그 운영자와 직접적인 관련이 없다는 안내문을 자동으로 추가하는 역할을 합니다. 이렇게 하면 방문자가 광고와 콘텐츠를 혼동하지 않게 되고, 광고에 대한 경제적 이해관계 표시 의무(공정거래위원회 가이드라인)도 자연스럽게 충족할 수 있습니다.
코드 예시
script
document.addEventListener("DOMContentLoaded", function () {
const url = window.location.href;
if (
url === window.location.origin + "/" ||
url.includes("/category/")
) {
return;
}
const naverAd = document.querySelector('div[data-tistory-react-app="NaverAd"]');
if (naverAd) {
const notice = document.createElement("p");
notice.className = "ad-desc";
notice.style.minHeight = "40px";
notice.style.marginTop = "0.5rem";
notice.style.fontSize = "0.9rem";
notice.style.lineHeight = "1.3";
notice.style.boxSizing = "border-box";
notice.style.width = "100%";
notice.textContent = "※ 이 광고는 티스토리에서 자동으로 게재되는 것으로, 블로그 운영자와 직접적인 관련이 없습니다.";
naverAd.insertAdjacentElement("afterend", notice);
}
});
/script
- 법규 준수: 광고와 콘텐츠의 이해관계를 명확히 하여 공정거래위원회 가이드라인 충족.
- 신뢰도 향상: 방문자가 이 광고는 운영자가 직접 배치한 것이 아님을 알게 되어 콘텐츠 신뢰도 상승.
- 페이지 체류시간 유지: 광고 오해로 인한 이탈 방지.
- 자동화: 글마다 수동으로 안내문을 넣지 않아도 모든 광고에 자동 적용.
이와 같은 방법들을 통해 블로그 글의 내용을 더욱 풍성하고 신뢰성 있게 만들면서 동시에 검색 엔진 최적화도 효과적으로 관리할 수 있습니다.
블로그에서 내 글의 저작권을 안전하게 지키는 방법은 무엇인가요?
블로그 글에 저작권 표시를 하고, 복사 시 자동으로 출처를 삽입하도록 설정하면 글 도용을 방지할 수 있습니다. 또한 aside, role=”note”, data-nosnippet 속성을 활용하면 SEO에 영향을 주지 않으면서 독자에게만 안내문을 보여줄 수 있습니다.
광고가 포함된 블로그 글에서 경제적 이해관계를 표시해야 하는 이유는 무엇인가요?
공정거래위원회 지침에 따라 광고와 콘텐츠의 관계를 명확히 표시하면, 방문자가 광고를 올바르게 이해하고 블로그의 신뢰도가 높아집니다. 이는 불필요한 제재를 피하고 광고 클릭률과 사용자 참여를 자연스럽게 높이는 효과가 있습니다.
애드센스와 카카오 광고 아래 안내문을 자동으로 표시하는 방법은 무엇인가요?
광고가 정상적으로 노출될 때만 p 태그로 안내문을 생성하고, 다크 모드에 맞게 글자색을 흰색으로 설정합니다. role=”note”와 data-nosnippet=”true” 속성을 사용해 SEO와 접근성을 고려하며, setTimeout으로 광고 렌더링 후 2초 딜레이를 주어 자동으로 삽입되도록 구현합니다.