이미지 중심 블로그의 검색 노출 ! 저작권 보호와 이미지 SEO 구조화 데이터 적용 방법

안녕하세요! 오늘은 사진이나 일러스트, 직접 만든 디자인 작업물을 주로 올리는 창작자분들을 위해 아주 중요한 이야기를 가져왔어요. 시각적으로 멋진 콘텐츠를 만들고 계시지만, 정작 구글이나 네이버 같은 검색 엔진의 이미지 검색 결과(이미지 SEO)에서 내 글이 잘 보이지 않아 고민인 분들 많으시죠? 텍스트 위주의 글보다 이미지가 중심인 블로그는 검색 엔진이 내용을 파악하기가 조금 더 까다롭기 때문인데요.

이런 어려움을 해결하고 내 소중한 창작물의 저작권 보호는 물론 검색 노출 경쟁력까지 한 번에 잡을 수 있는 비결이 바로 JSON-LD 기반 이미지 구조화 데이터 활용법입니다. 오늘은 조금 생소할 수 있는 이 기술을 아주 쉽게 풀어서, 티스토리 같은 플랫폼에서 바로 적용할 수 있는 방법까지 꼼꼼하게 알려드릴게요.

멋진 사진이나 디자인 작업물을 올리는 이미지 중심의 창작물 블로그는 보는 즐거움을 주지만, 텍스트 검색에서는 순위가 밀리는 경우가 종종 있어요. 검색 엔진은 텍스트를 읽는 데 특화되어 있는데, 이미지는 그 자체로 내용을 파악하기 어렵기 때문이죠. 이미지에 대한 명확한 설명이나 데이터가 부족하면 검색 로봇은 그 가치를 제대로 알지 못하고 지나쳐버리곤 합니다.

그래서 우리는 단순히 이미지만 올리는 게 아니라, 이미지 검색 최적화와 함께 기계가 읽을 수 있는 구조화된 메타데이터를 제공해줘야 해요. 요즘 구글이나 빙 같은 곳에서는 이미지의 주인이 누구인지, 어떤 조건으로 사용할 수 있는지 등을 파악해서 더 정확한 검색 결과를 보여주려고 이미지 관련 구조화 데이터를 정말 많이 참고하고 있답니다.

내 소중한 이미지 지키고 이미지 SEO 높이는 구조화 데이터 활용법

이번 시간에는 이미지 블로그가 텍스트 검색의 불리함을 이겨내고 검색 결과 상단에 오를 수 있는 핵심 전략을 알아볼게요. 특히 JSON-LD라는 형식을 활용해서 내 이미지의 이름표를 달아주는 방법을 상세히 안내해 드립니다.

1. 이미지 구조화 데이터가 왜 그렇게 중요한가요?

우리가 보는 웹사이트는 HTML 태그로 이루어져 있죠. 하지만 이것만으로는 검색 엔진이 “이 이미지가 작가가 직접 그린 일러스트인지, 아니면 그냥 배경 사진인지” 완벽히 이해하기 힘들어요. 그래서 이미지 구조화 데이터라는 표준 형식을 약속해서 “이건 이런 의미를 담고 있는 정보야”라고 친절하게 알려주는 거예요.

주로 JSON-LD라는 코드를 사용하는데요, 이건 검색 엔진이 가장 좋아하는 데이터 포맷이에요. 여기에 이미지가 무엇을 담고 있는지, 창작자는 누구인지, 저작권은 누구에게 있고 라이선스는 어떻게 되는지 등을 적어두면 검색 엔진이 무릎을 탁 치며 내 콘텐츠의 가치를 인정해주게 됩니다.

2. 검색 엔진은 메타데이터로 이미지의 신뢰도를 점쳐요

• 검색 엔진 입장에서 이미지는 ‘글자 없는 그림’일 뿐이에요. 그래서 저작권자나 설명 같은 정보가 HTML 코드 안에 이미지 메타데이터 형태로 명확히 들어 있어야 신뢰할 수 있는 정보라고 판단합니다.
• 특히 구글 이미지 검색은 이 데이터를 보고 몇 가지 중요한 판단을 내려요.
  • 이 사진의 진짜 출처는 어디인가?
  • 누가 만들었고, 함부로 가져다 써도 되는 라이선스인가?
  • 이미지를 사용하고 싶은 사람이 참고할 만한 페이지가 있는가?

구조화 데이터 예시: JSON-LD 이미지 코드 살펴보기

블로그의 HTML 코드 안에 아래와 같이 이미지 정보 코드를 넣어두면 검색 엔진이 아주 좋아합니다.

{
"@context": "https://schema.org",
"@graph": [
{
"@type": "ImageObject",
"contentUrl": "이미지 실제 주소",
"caption": "이미지 설명",
"license": "이미지 사용 허가 URL",
"creator": {
"@type": "Person",
"name": "창작자 이름"
},
"copyrightNotice": "저작권 표시 문구",
"acquireLicensePage": "라이선스 확인 페이지 URL",
"creditText": "이미지 출처 명시 텍스트"
}
]
}

주요 항목 설명과 검색 엔진 최적화(SEO)의 의미

네이버나 티스토리에서 이 기능을 기본으로 주지 않는 이유

플랫폼마다 가진 기술적인 사정이 있어요

• 편의성이 우선인 플랫폼 정책: 네이버나 티스토리 같은 플랫폼은 누구나 쉽게 글을 쓰는 데 집중해요. 이미지 구조화 데이터 삽입은 조금 더 전문적인 영역이다 보니 모든 사용자에게 일괄 적용하기가 어렵답니다.
• 방대한 양의 데이터 관리 비용: 블로그에 올라오는 수만 장의 이미지에 대해 제작자와 라이선스를 일일이 확인하고 코드를 만드는 건 플랫폼 입장에서 엄청난 비용이 드는 일이에요.
• 저작권 분쟁의 위험: 혹시라도 잘못된 저작권 정보가 자동으로 들어갔을 때 생길 법적 문제를 방지하기 위해 플랫폼은 조심스러운 입장을 취할 수밖에 없죠.
• 블로거의 역할이 중요해요: 결국 내 창작물을 돋보이게 하는 건 블로거의 몫이에요. 그래서 티스토리 SEO 최적화를 위해서는 사용자가 직접 스크립트를 통해 이런 기능을 보완해주는 것이 좋습니다.

라이선스 정보(license)와 확인 페이지(acquireLicensePage)가 핵심!

구글 이미지 검색을 하다 보면 어떤 사진에는 ‘라이선스 가능’이라는 표시가 붙어 있는 걸 보셨을 거예요. 그게 바로 이 코드가 제대로 들어갔을 때 생기는 효과입니다. 내 블로그 주소와 라이선스 정보가 일치해야 구글 서치 콘솔에서도 경고를 주지 않고 신뢰할 수 있는 페이지로 분류해요.

이 정보들을 잘 입력해두면요:

• 내 이미지가 확실한 출처를 가진 고품질 콘텐츠로 대접받습니다.
• 이미지 검색 결과에서 내 이름과 사용 조건이 같이 나와서 내 블로그를 더 널리 알릴 수 있어요.
• 남이 내 이미지를 함부로 퍼가는 이미지 도용 방지 효과와 함께 창작물의 가치를 코드로 증명할 수 있습니다.

티스토리에서 자동으로 이미지 데이터를 넣어주는 자바스크립트 코드

블로그를 운영하다 보면 내가 직접 만든 이미지도 있고, 무료 이미지 사이트에서 가져온 사진도 섞여 있을 거예요. 모든 사진에 내 저작권을 주장하면 안 되겠죠? 그래서 내가 직접 만든 창작 이미지에만 선택적으로 정보를 넣을 수 있는 똑똑한 코드를 준비했습니다.

자동으로 이미지 정보를 찾아주는 JavaScript 예제

<script>
document.addEventListener('DOMContentLoaded', () => {
const buildImageMetadata = () => {
const images = [];
const seen = new Set();

// 내가 직접 정한 특정 구역(div.my-license-img) 안의 이미지만 찾아요
document.querySelectorAll("div.my-license-img img").forEach(img => {
if (!seen.has(img.src)) {
seen.add(img.src);
images.push({
"@type": "ImageObject",
"contentUrl": img.src,
"url": img.src,
"caption": img.alt || "창작 이미지 설명",
"height": img.height.toString(),
"width": img.width.toString(),
"license": "https://openipc.kr/", // 내 블로그의 라이선스 안내 주소
"creator": {
"@type": "Person",
"name": "arhatnanda" // 내 이름이나 닉네임
},
"copyrightNotice": "OPENIPC티스토리", // 저작권 문구
"acquireLicensePage": window.location.href, // 현재 글 주소
"creditText": "OPENIPC티스토리" // 출처 이름
});
}
});

let script = document.getElementById("dynamicImageMetadata");
if (images.length) {
const jsonLd = {
"@context": "https://schema.org",
"@graph": images
};
if (!script) {
script = document.createElement("script");
script.id = "dynamicImageMetadata";
script.type = "application/ld+json";
document.head.appendChild(script);
}
script.textContent = JSON.stringify(jsonLd, null, 2);
} else {
if (script) script.remove();
}
};

buildImageMetadata();

// 이미지가 나중에 로드되어도 놓치지 않도록 감시해요
new MutationObserver(mutations => {
mutations.forEach(mut => {
mut.addedNodes.forEach(node => {
if (node.nodeType === 1) {
if (node.tagName === "IMG" || node.querySelector("img")) {
buildImageMetadata();
}
}
});
});
}).observe(document.body, { childList: true, subtree: true });
});
</script>

티스토리에서 이미지 이름표(메타 태그)를 직접 다는 방법

티스토리는 이미지를 올리면 독특한 이미지 치환자 형태로 저장돼요. 그래서 일반적인 방법으로는 자바스크립트가 인식하기 힘들 수 있는데, 아래 순서대로 하면 아주 간단합니다.

• 1. 내 창작물만 쏙 골라 감싸기: 글을 다 쓴 뒤 HTML 편집 모드로 들어가세요. 내가 직접 만든 이미지 코드 앞뒤를 <div class="my-license-img">...</div>로 감싸주기만 하면 됩니다.
• 2. 자바스크립트의 열일: 페이지가 열리면 우리 코드가 그 구역을 찾아가서 이미지를 확인하고, 자동으로 이미지 JSON-LD를 만들어 검색 엔진에게 전달합니다.
• 3. 놓치는 이미지 없게 하기: 티스토리는 이미지가 천천히 뜨는 경우가 있는데, MutationObserver라는 기술을 써서 어떤 상황에서도 메타데이터가 빠짐없이 등록되도록 만들었습니다.

열심히 만든 작업물을 보호하고, 검색 결과에서도 주인공이 되고 싶다면 구조화 데이터 삽입은 이제 선택이 아닌 필수입니다. 특히 사진이나 디자인을 하시는 분들이라면 오늘 알려드린 이미지 메타 정보 적용을 통해 내 소중한 콘텐츠에 확실한 가치를 더해보세요!