블로그 이미지 저작권 보호와 구글 SEO, 스크립트 하나로 해결하는 방법

블로그나 웹사이트에 직접 만든 이미지나 사진을 올릴 때, 이미지 정보(메타 데이터)를 꼼꼼히 챙기는 건 검색 엔진 최적화(SEO)에도 좋고, 내 사이트를 더 많은 사람에게 알리는 데도 정말 중요해요. 사실 이미지 하나하나 만들고 편집하는 데 시간이 꽤 많이 걸리잖아요. 그런데 누군가 허락 없이 내 소중한 결과물을 가져가서 쓴다면 정말 속상한 일이죠. 이럴 때 이미지 메타 태그를 잘 활용하면 검색 엔진에게 “이건 내 창작물이야”라고 확실하게 알려줄 수 있고, 이미지 권리도 똑똑하게 지킬 수 있답니다.

이미지 SEO와 저작권 보호, 스크립트가 왜 필요할까요?

매번 수동으로 정보를 입력하기는 너무 번거롭죠. 자동화 스크립트를 쓰면 어떤 정보를 챙길 수 있고, 그게 어떤 역할을 하는지 표로 정리해봤어요. 스키마 마크업을 적용할 때 참고하시면 좋을 거예요.

설정 항목	설명 (JSON-LD 필드)	어떤 효과가 있나요?
저작권 정보	copyrightNotice	함부로 퍼가는 걸 막고 내 것임을 표시해요
라이선스 주소	license	이미지 검색 결과에 ‘라이선스 가능’이라고 떠요
제작자 이름	creator / name	이미지를 만든 사람의 브랜드 가치를 높여줘요
캡션/설명	caption	이미지 내용을 더 잘 설명해서 검색에 잘 걸려요

1. 검색 엔진에게 이미지를 친절하게 소개하기

SEO를 잘하려면 검색 엔진이 이미지를 텍스트처럼 잘 읽을 수 있게 도와줘야 해요. 이미지 메타 데이터를 정확하게 넣어주면 구글 같은 검색 엔진이 내 이미지를 훨씬 더 잘 이해하게 되거든요.

1.1. 구조화된 데이터(JSON-LD)가 좋은 이유

JSON-LD 방식을 써서 구조화된 데이터를 만들어주면, 검색 결과에서 내 이미지가 더 풍부한 정보와 함께 뜰 확률이 높아져요. 이렇게 되면 보는 사람들에게 신뢰감을 주니까 자연스럽게 클릭도 더 많이 하게 된답니다.

2. 자동으로 메타 태그 입혀주는 코드 사용법

아래 코드는 웹페이지에 있는 이미지를 찾아서 자동으로 필요한 정보를 추출해 구조화된 데이터로 바꿔주는 스크립트예요. 특히 특정 클래스(p class=”image”)가 붙은 이미지만 골라서 처리하기 때문에, 내가 직접 만든 이미지만 쏙쏙 골라 관리하기 편해요.

<script type="application/ld+json" id="dynamicImageMetadata">{}</script>

2.1. 내 블로그 정보로 수정하는 요령

스크립트가 제대로 작동해서 내 권리를 주장하려면, 코드 안의 아래 내용들을 본인 사이트 정보에 맞게 꼭 바꿔주셔야 해요.

const creditText = "내 블로그 이름";
"license": "https://내블로그주소.com/"
"copyrightNotice": "내 블로그 이름"
"name": "내 닉네임" // 이미지 제작자 이름

아래는 실제로 사용할 스크립트 본문이에요.

<script>
function processImageMetadata() {
 let imagesFound = false;

 const figureElements = document.querySelectorAll('figure');

 figureElements.forEach((figureElement) => {
 const previousElement = figureElement.previousElementSibling;
 if (
 !previousElement ||
 previousElement.tagName.toLowerCase() !== 'p' ||
 !previousElement.classList.contains('image')
 ) {
 return;
 }

 const img = figureElement.querySelector('img');
 if (img) {
 imagesFound = true;

 const imgSrc = img.src;
 const imgAlt = img.alt || '설명 텍스트 없음';
 const imgWidth = img.width;
 const imgHeight = img.height;

 const imageData = {
 "@context": "https://schema.org/",
 "@type": "ImageObject",
 "contentUrl": imgSrc,
 "url": imgSrc,
 "caption": imgAlt,
 "height": imgHeight.toString(),
 "width": imgWidth.toString(),
 "license": location.origin, // 블로그 주소 자동 인식
 "creator": {
 "@type": "Organization",
 "name": "작성자이름" // 여기를 수정하세요
 },
 "copyrightNotice": "ⓒ 작성자이름", // 여기를 수정하세요
 "acquireLicensePage": window.location.href,
 "creditText": "출처: 이 블로그"
 };

 let scriptTag = document.getElementById('dynamicImageMetadata');
 let currentData = {};

 if (scriptTag) {
 currentData = JSON.parse(scriptTag.textContent || '{}');
 }

 currentData.images = currentData.images || [];
 currentData.images.push(imageData);

 if (scriptTag) {
 scriptTag.textContent = JSON.stringify(currentData, null, 2);
 } else {
 scriptTag = document.createElement('script');
 scriptTag.type = 'application/ld+json';
 scriptTag.id = 'dynamicImageMetadata';
 scriptTag.textContent = JSON.stringify(currentData, null, 2);
 document.head.appendChild(scriptTag);
 }
 }
 });

 if (!imagesFound) {
 const scriptTag = document.getElementById('dynamicImageMetadata');
 if (scriptTag) {
 scriptTag.remove();
 }
 }
}

document.addEventListener("DOMContentLoaded", processImageMetadata);
</script>