웹사이트 이미지 메타 태그를 자동으로 추가하는 스크립트 코드

이미지 메타 태그를 자동으로 추가하는 스크립트 코드 활용법과 구글 이미지 SEO 최적화 방법입니다. 이미지 무단 도용 방지를 위한 JSON-LD 구조화 데이터 적용과 저작권 메타 데이터 자동 삽입 전략으로 사이트의 가시성을 높일 수 있습니다.

블로그나 웹사이트에서 이미지 콘텐츠를 활용할 때, 이미지에 대한 메타 데이터를 추가하는 것은 검색 엔진 최적화(SEO)와 웹사이트의 가시성을 높이는 데 매우 중요합니다. 자신만의 이미지와 사진을 제작하고 배포하는 데 많은 시간과 노력이 필요합니다. 그러나 이러한 콘텐츠를 무단으로 이용하게 되면 제작자의 노력이 무의미해질 수 있습니다. 이런 경우, 이미지 메타 태그를 활용하여 검색 엔진에게 자신의 저작권을 알리고 이미지 권리를 행사해야 합니다.

이미지 SEO 및 저작권 보호를 위한 스크립트 설정 비교

자동화 스크립트를 통해 설정할 수 있는 주요 메타 데이터 항목과 그 역할을 정리했습니다. 스키마 마크업 스크립트 적용 시 참고하시기 바랍니다.

설정 항목	설명 (JSON-LD 필드)	SEO 및 마케팅 효과
저작권 정보	copyrightNotice	무단 도용 방지 및 소유권 명시
라이선스 URL	license	이미지 검색 결과에 '라이선스 가능' 배지 노출
제작자 정보	creator / name	이미지 제작자 브랜드 가치 상승
캡션/설명	caption	이미지 맥락 이해도 증진 및 검색 노출 강화

1. 이미지 메타 데이터의 중요성과 SEO 성능 개선

SEO 최적화에 있어 이미지 메타 데이터는 검색 엔진이 이미지를 텍스트만큼 정확하게 이해하도록 돕는 가교 역할을 합니다. 이미지에 대한 메타 데이터를 정확하게 추가하면 검색 엔진의 인식률이 높아집니다.

1.1. 구조화된 데이터(JSON-LD)의 이점

JSON-LD를 통한 구조화된 데이터는 검색 결과에서 이미지가 리치 결과로 표시될 확률을 높입니다. 이는 사용자에게 더 높은 신뢰감을 주며 자연스럽게 클릭률(CTR) 상승으로 이어집니다.

2. 자동으로 이미지 메타 데이터를 추가하는 코드 활용하기

아래는 웹페이지 내의 모든 이미지에 대해 자동으로 메타 데이터를 추출하고 구조화된 데이터로 변환하는 스크립트입니다. 이 코드는 특히 사용자 지정 클래스(p class="image")를 활용하여 자작 이미지만 선별적으로 관리할 수 있는 장점이 있습니다.

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

2.1. 코드 사용 및 저작권 정보 수정 가이드

스크립트 코드 내의 다음 항목들을 본인의 사이트 정보에 맞춰 수정해야 이미지 권리 행사가 정상적으로 이루어집니다.

const creditText = "OPENIPC티스토리";
"license": "https://openpc.tistory.com/"
"copyrightNotice": "OPENIPC티스토리"
"name": "arhatnanda" // 이미지 제작자 이름

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 || 'No alt text available';
 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": "BlogAuthor" // 실제 이름 
 },
 "copyrightNotice": "ⓒ BlogAuthor",
 "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

3. 이미지 SEO 자동화가 가져오는 기술적 이점

이 스크립트를 적용하면 티스토리 블로그 이미지 검색 노출 가능성이 높아지며 다음과 같은 이점을 얻을 수 있습니다.

빠른 색인화: 구글 봇이 이미지의 정보를 즉각적으로 파악하여 인덱싱 속도가 빨라집니다.
이미지 인식 최적화: 이미지 alt 텍스트와 캡션 자동화 전략이 적용되어 이미지 검색 결과 상단 노출에 유리합니다.

Q1. 모든 이미지에 이 스크립트가 적용되나요?

A1. 아닙니다. 본 스크립트는 이미지(figure) 태그 바로 앞에 p class="image" 태그가 있는 경우에만 동작하도록 설계되어, 자작 이미지와 외부 이미지를 구분하여 관리할 수 있습니다.

Q2. JSON-LD 형식을 사용하면 사이트 속도가 느려지지 않나요?

A2. JSON-LD는 자바스크립트의 일환으로 실행되지만 텍스트 기반의 가벼운 데이터 구조이므로 웹사이트 로딩 속도에 미치는 영향은 미미합니다.

Q3. 구글 이미지 검색에 반영되려면 얼마나 걸리나요?

A3. 검색 엔진의 크롤링 주기에 따라 다르지만, 보통 며칠에서 몇 주 이내에 구조화된 데이터가 반영되어 이미지 검색 결과에 라이선스 정보 등이 나타나기 시작합니다.

이미지 메타 태그 자동화는 이미지 콘텐츠가 중요한 웹사이트에서 선택이 아닌 필수입니다. 스키마 마크업을 통해 검색 엔진에 명확한 신호를 보내고, 소중한 자산인 이미지의 저작권을 스마트하게 보호하세요.

Daily Hub