사진, 일러스트, 디자인 등 이미지 중심 창작 블로그가 텍스트 검색에서 불리한 점을 극복하고 이미지 검색에서 경쟁력을 확보하는 SEO 방법을 구상합니다
저작권 보호와 검색 노출을 향상시키는 JSON-LD 기반 이미지 구조화 데이터(ImageObject) 활용법, 주요 필드(license, creator) 설명, 그리고 티스토리와 같은 플랫폼에서 JavaScript를 활용하여 창작 이미지에 메타 태그를 동적으로 적용하는 방법입니다.
사진, 일러스트, 디자인 등 이미지 중심의 창작물 블로그는 시각적으로 뛰어난 콘텐츠를 제공하지만, 의외로 검색 엔진에서의 텍스트 검색에서는 상대적으로 불리한 면이 있습니다. 이유는 이미지 자체가 텍스트처럼 직접 검색 대상이 되지 않고, 이미지에 대한 설명이나 메타데이터가 부족하면 검색 엔진이 그 가치를 제대로 인식하지 못하기 때문입니다.
따라서, 단순히 창작물 이미지 게시를 넘어서 이미지 검색 최적화와 구조화된 이미지 메타데이터 제공이 무엇보다 중요합니다. 구글, 네이버, 빙과 같은 주요 검색 엔진들은 이제 이미지의 저작권, 출처, 사용 조건 등을 이해하고 사용자에게 더 정확한 결과를 제공하기 위해 이미지 관련 구조화 데이터를 적극 활용합니다.
이미지 저작권 보호와 검색 노출을 위한 구조화 데이터 활용법
본 글에서는 이미지 창작물 블로그가 검색에서 불리한 점을 극복하고, 이미지 검색에서 강력한 경쟁력을 확보할 수 있도록 돕는 핵심 전략과 JSON-LD 기반 이미지 메타데이터 활용법을 상세히 안내합니다.
1. 왜 이미지 구조화 데이터가 중요한가?
웹사이트에 존재하는 정보들은 기본적으로 HTML 태그로 작성되어 있지만, 이 태그들만으로는 검색 엔진이 그 의미를 완벽하게 이해하기 어렵습니다. 그래서 이미지 구조화 데이터라는 별도의 표준화된 형식을 통해 콘텐츠의 의미를 명확히 알려줍니다.
구조화 데이터는 검색 엔진이 읽기 쉽고 해석하기 쉬운 데이터 포맷으로, 주로 JSON-LD, Microdata, RDFa 형태로 작성됩니다. 이미지 구조화 데이터는 웹페이지에 포함된 이미지에 대한 상세 정보를 명확하게 알려주는 메타데이터입니다. 예를 들어, 이미지가 무엇인지, 누가 만들었는지, 저작권은 누구에게 있는지, 어떤 라이선스로 사용 가능한지 등을 명시합니다.
2. 검색 엔진은 메타데이터로 이미지의 신뢰도를 판단합니다.
- 이미지는 검색엔진 입장에서 콘텐츠와 달리 ‘읽을 수 없는’ 자원이므로, 저작권자, 설명, 라이선스 정보가 HTML 코드 안에 명확히 들어 있어야 합니다.
- 특히 Google 이미지 검색에서는 이 메타데이터를 기반으로 다음을 판단합니다:
- 이 이미지가 어디서 왔는가? (출처)
- 누가 만들었고, 어떤 조건으로 사용할 수 있는가? (저작권 및 라이선스)
- 사용자가 이 이미지를 사용할 때 참고해야 할 링크가 있는가? (사용 조건 링크)
구조화 데이터 예시: JSON-LD 이미지 코드
블로그 HTML head 또는 body 내부에 아래와 같은 구조화된 이미지 정보를 script type="application/ld+json" 형태로 추가할 수 있습니다.
{
"@context": "https://schema.org",
"@graph": [
{
"@type": "ImageObject",
"contentUrl": "이미지 실제 주소",
"caption": "이미지 설명",
"license": "이미지 사용 허가 URL",
"creator": {
"@type": "Person",
"name": "창작자 이름"
},
"copyrightNotice": "저작권 표시 문구",
"acquireLicensePage": "라이선스 확인 페이지 URL",
"creditText": "이미지 출처 명시 텍스트"
}
]
}
주요 필드 설명 및 SEO 의미
| 필드명 | 설명 | SEO 의미 |
|---|---|---|
| @type | 객체 유형 | ImageObject로 검색엔진이 이미지 정보임을 인식합니다. |
| contentUrl, url | 이미지 경로 | 실제 이미지 주소. 이미지 원본을 참조하며 인덱싱에 활용됩니다. |
| caption | 이미지 설명 | 검색 노출 시 함께 표시될 수 있으며, alt 속성의 역할도 병행합니다. |
| license | 사용 허가 URL | 블로그 글 또는 라이선스 안내 페이지로 연결되며, Google이 신뢰하는 라이선스 정보를 제공합니다. |
| acquireLicensePage | 라이선스 구입 또는 확인 URL | license와 함께 사용하면 신뢰도가 향상되며, Google 이미지 검색 결과에 “이미지 사용 조건 보기” 링크를 제공합니다. |
| creator | 창작자 이름 | 저작권자 명시. 검색 결과에 저자명으로 노출을 유도하여 브랜딩에 기여합니다. |
| copyrightNotice | 저작권 고지 | 명시적 고지. 콘텐츠 보호에 실질적 효과를 더합니다. |
| creditText | 표시되는 출처명 | Google 이미지 검색 결과에 표시될 수 있습니다. |
국내 플랫폼(네이버, 티스토리)에서 구조화 데이터를 기본 제공하지 않는 이유
주요 플랫폼의 기술적, 정책적 한계
- 플랫폼 구조와 정책의 차이: 네이버 블로그와 티스토리 같은 대형 블로그 플랫폼은 사용자 편의성에 초점을 맞춥니다. 구조화 데이터 삽입은 고급 SEO 기능에 해당하여, 개별 사용자가 직접 세밀하게 설정하지 않는 한 일괄적으로 적용하기가 어렵습니다.
- 운영 비용과 기술적 난제: 모든 이미지에 대해 정확한 라이선스, 제작자 정보를 자동으로 수집하고 생성하는 작업은 매우 많은 비용과 기술적 노력을 요구합니다. 특히 저작권 정보가 불분명한 이미지가 다수인 블로그 환경에서는 자동화에 어려움이 큽니다.
- 콘텐츠 저작권과 관리 이슈: 저작권과 관련된 민감한 정보를 잘못 표시할 경우 법적 분쟁이 발생할 수 있기 때문에, 플랫폼 차원에서 상세한 구조화 데이터를 일괄 제공하는 데 신중할 수밖에 없습니다.
- 개별 블로거의 SEO 역할 강조: 티스토리와 네이버 블로그는 기본적인 플랫폼 틀만 제공하며, 세부적인 SEO 작업은 개별 블로거가 직접 수행하도록 유도합니다. 따라서 구조화 데이터 삽입 역시 블로거가 직접 스크립트나 플러그인 형태로 적용하는 방식이 일반적으로 사용됩니다.
license와 acquireLicensePage의 결정적 중요성
Google은 이 두 항목을 기반으로 “이미지 사용 조건 보기” 링크를 제공합니다. 라이선스 주소가 자신의 블로그 주소와 일치하지 않으면 Search Console 구조화 데이터 경고 발생 및 검색 노출 시 신뢰도 하락 문제가 발생할 수 있습니다.
올바르게 입력 시:
- 내 이미지가 명확한 출처와 저작권 정보를 갖춘 것으로 인식됩니다.
- 이미지 검색 결과에서 저자 이름, 사용 조건 링크가 함께 노출되어 브랜딩 효과가 극대화됩니다.
- 도용 방지 및 내 창작물의 가치를 코드로 보호하는 실질적인 효과가 있습니다.
티스토리 등 블로그 플랫폼에서 이미지 구조화 데이터를 동적으로 삽입하는 JavaScript 코드
이미지 창작물 블로그는 타인의 이미지와 자신의 창작 이미지를 분리하여 메타 태그를 적용해야 합니다. 아래 코드는 자바스크립트를 이용해 특정 클래스(div.my-license-img)로 감싸진 자신의 창작 이미지에만 JSON-LD 메타데이터를 동적으로 생성하여 삽입하는 예제입니다.
JavaScript 코드 예제 (MutationObserver 포함)
script
document.addEventListener('DOMContentLoaded', () = {
const buildImageMetadata = () = {
const images = [];
const seen = new Set();
// div.my-license-img 내 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 || "No alt text available",
"height": img.height.toString(),
"width": img.width.toString(),
"license": "https://qcai.kr/", // 자신의 라이선스 URL
"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 {
script?.remove();
}
};
buildImageMetadata();
// DOM 변경 감지 및 메타데이터 갱신 (티스토리 치환자 변환 후 이미지 로드 대응)
new MutationObserver(mutations = {
mutations.forEach(mut = {
mut.addedNodes.forEach(node = {
if (node.nodeType === 1) { // ELEMENT_NODE
if (node.tagName === "IMG" || node.querySelector("img")) {
buildImageMetadata();
}
}
});
});
}).observe(document.body, { childList: true, subtree: true });
});
/script
티스토리 이미지 메타 태그 적용 방법
티스토리 블로그는 이미지 삽입 시 특별한 치환자(플레이스홀더) 형태로 이미지를 넣습니다. 일반 img 태그가 아니므로, 치환자를 직접 감싸는 div를 통해 JS가 구분할 수 있도록 처리해야 합니다.
- 1. 창작 이미지만 선별하여 감싸기: 티스토리에서 이미지를 넣은 후, HTML 편집에서 해당 이미지 코드(치환자 형태)를
div class="my-license-img".../div로 감쌉니다. - 2. JS의 동작 원리: 티스토리 페이지가 로드되면 치환자는 실제
img태그로 변환됩니다. 위의 JavaScript 코드는document.querySelectorAll("div.my-license-img img")를 통해 이 변환된 이미지를 찾아 JSON-LD 메타데이터를 생성합니다. - 3. MutationObserver 활용: 티스토리처럼 이미지 로드가 비동기적으로 이루어지거나 DOM 변경이 잦은 환경에서,
MutationObserver를 사용해 페이지가 완전히 로드되거나 새로운 이미지가 추가될 때마다 메타데이터를 갱신하여 누락을 방지합니다.
자신이 창작한 이미지를 업로드하고 콘텐츠를 보호하고, 검색에서 더 잘 보이고, 내 작업물에 대한 저작권을 분명히 하기 위해서라도 구조화 데이터 삽입은 더 이상 선택이 아닌 필수입니다. 특히 디자인 일러스트 사진 블로그를 운영하신다면, 오늘부터라도 구조화 데이터와 메타 정보 삽입을 통해 콘텐츠에 법적, 기술적 가치를 더해보세요.
Q1: 이미지 구조화 데이터가 텍스트 검색 SEO에도 영향을 주나요?
네, 간접적으로 영향을 줍니다. 구조화 데이터를 통해 이미지가 콘텐츠의 맥락과 주제를 명확하게 설명하고(caption 필드 등), 페이지의 신뢰도(저작권, license 정보)를 높이면, 검색 엔진은 해당 페이지 전체의 품질을 높게 평가하게 됩니다. 따라서 텍스트 검색 결과 순위 향상에 간접적인 긍정적 효과를 줄 수 있습니다.
Q2: 타인의 무료 이미지와 나의 창작 이미지를 한 페이지에 사용하고 있다면, 구조화 데이터는 어떻게 적용해야 하나요?
반드시 자신의 창작 이미지에만 구조화 데이터를 적용해야 합니다. 타인의 이미지에 자신의 creator나 license 정보를 넣으면 저작권 정보를 오기재하는 것이 되어 Search Console 경고나 더 심각한 문제를 유발할 수 있습니다. 위 예시 코드처럼, 자바스크립트에서 div.my-license-img와 같은 특정 클래스를 사용하여 자신의 창작 이미지만 선별하여 메타 태그를 생성하는 것이 안전하고 올바른 방법입니다.
Q3: license와 acquireLicensePage 필드를 현재 글의 URL로 설정해도 문제가 없나요?
자신의 창작물이며, 해당 글에서 이미지의 사용 조건(예: 상업적 이용 금지 등)을 명확히 설명하고 있다면 현재 글의 URL(window.location.href)로 설정하는 것이 일반적이며 권장됩니다. Google은 이 링크를 통해 사용자가 이미지 사용 조건을 확인할 수 있도록 안내하며, 이는 이미지의 출처와 저작권 신뢰도를 높이는 데 결정적인 역할을 합니다.