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

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

검색엔진 최적화(SEO)를 위한 이미지 메타 태그 자동화 스크립트

이 글에서는 이미지 메타 데이터를 자동으로 추가할 수 있는 스크립트 코드를 소개하고, 이를 통해 사이트의 SEO 성능을 개선하는 방법을 다루겠습니다.

이미지 무단 도용 방지 및 검색 최적화

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

1. 이미지 메타 데이터의 중요성

SEO 최적화에 있어 이미지 메타 데이터는 중요한 역할을 합니다. 이미지에 대한 메타 데이터를 정확하게 추가하면 검색 엔진이 해당 이미지를 더 잘 인식할 수 있습니다. 또한, 검색 결과에서 이미지가 미리보기 형태로 표시될 때, 관련성 높은 이미지를 보여줄 수 있어 클릭률을 높이는 데 기여합니다.

대표적인 메타 데이터는 alt 텍스트, title, 그리고 JSON-LD를 통해 구조화된 데이터입니다. 구조화된 데이터는 검색 엔진에 이미지의 맥락을 제공해주어, 이미지 검색 결과에서 더 높은 순위를 차지할 수 있습니다.

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

아래는 웹페이지에서 자동으로 이미지 메타 데이터를 추가하는 스크립트입니다. 이 코드는 페이지 내 모든 이미지에 대해 필요한 메타 데이터를 추출하고, 이를 구조화된 JSON-LD 형식으로 <script> 태그에 추가하여 검색 엔진이 이를 쉽게 인식하도록 합니다.

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

3. 이 코드를 어떻게 사용하나요?

스크립트 추가하기: 위 코드를 블로그나 웹페이지의 <head> 태그 안에 추가합니다.
저작권 정보 수정: 코드 내 creditText, license, copyrightNotice와 같은 부분은 반드시 본인의 사이트와 이미지 저작권에 맞게 수정해야 합니다.
자동화: 이 스크립트는 페이지 로드 시 자동으로 모든 이미지에 대해 메타 데이터를 추출하여 <script> 태그 안에 JSON-LD 형식으로 저장합니다. 이렇게 하면 검색 엔진이 이미지를 인식하고 해당 이미지를 포함하는 페이지의 SEO를 향상시킬 수 있습니다.

스크립트 코드는 자신의 이미지 저작권에 맞게 수정하여 사용하시면 됩니다.

아래 코드는 자신의 이미지 앞에 <p class="image"> 태그를 먼저 입력하면 자신의 이미지로 등록됩니다. 만약 이미지 코드 앞에 이 태그가 존재하지 않으면, 이미지 메타 코드에서 제외되므로 자작 이미지와 타인의 이미지를 함께 사용하면서도 자신이 제작한 이미지만 이미지 권리를 행사할 수 있도록 작성된 코드입니다.

수정해야 할 코드

constcreditText="OPENIPC티스토리";
"license":"https://openpc.tistory.com/
"copyrightNotice":"OPENIPC티스토리",
"name":"arhatnanda"//이미지제작자이름
"license":"https://openpc.tistory.com/",//라이센스URL

<script> function processImageMetadata() { let imagesFound = false; // 이미지가 있는지 확인하는 변수 // 페이지 내 모든 <figure> 요소 찾기 const figureElements = document.querySelectorAll('figure'); figureElements.forEach((figureElement) => { // 각 figure의 이전 요소가 <p class="image"> 태그인지를 확인 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; // 이미지 URL const imgAlt = img.alt || 'No alt text available'; // alt 속성 (없으면 기본값 설정) const imgWidth = img.width; // 이미지 너비 const imgHeight = img.height; // 이미지 높이 const creditText = "OPENIPC티스토리"; // 저작권 정보 // 이미지 메타 데이터를 JSON-LD 형식으로 생성 const imageData = { "@context": "https://schema.org/", "@type": "ImageObject", "contentUrl": imgSrc, "url": imgSrc, "caption": imgAlt, "height": imgHeight.toString(), "width": imgWidth.toString(), "license": "https://openpc.tistory.com/", // 라이센스 URL "creator": { "@type": "Person", "name": "arhatnanda" // 이미지 제작자 이름 }, "copyrightNotice": "OPENIPC티스토리", // 저작권 공지 "acquireLicensePage": window.location.href, // 라이센스 획득 페이지 URL "creditText": 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) { let scriptTag = document.getElementById('dynamicImageMetadata'); if (scriptTag) { scriptTag.remove(); } } } </script>

4. SEO 최적화의 이점

자동화된 이미지 메타 데이터 추가는 몇 가지 중요한 SEO 최적화 이점을 제공합니다:

이미지 인식 최적화: 검색 엔진은 이미지의 메타 데이터를 통해 해당 이미지가 무엇을 나타내는지 더 잘 이해할 수 있습니다. 이를 통해 이미지가 검색 결과에 더 자주 노출되고, 관련성이 높아질 수 있습니다.
빠른 색인화: 구조화된 데이터는 검색 엔진이 페이지의 콘텐츠를 더 빠르고 정확하게 색인화하는 데 도움을 줍니다. 특히, JSON-LD 형식은 구글을 비롯한 주요 검색 엔진에서 선호하는 구조화된 데이터 형식입니다.

5. 이미지 메타 활용

이미지 메타 데이터 자동 추가 코드는 웹사이트의 SEO 성능을 높이는 중요한 도구입니다. 특히, 이미지 콘텐츠가 중요한 블로그나 웹사이트에서는 이 기능을 활용하여 검색 엔진 최적화(SEO)를 강화하고, 더 많은 방문자를 유치할 수 있습니다. 위의 코드를 참고하여, 자신의 웹사이트에 맞게 적절히 수정하고 적용해보세요.

이 방법을 통해 이미지 검색 결과에서 더 많은 노출을 얻고, 더 많은 트래픽을 유도할 수 있습니다. SEO에 있어서 작은 세부 사항도 중요한 영향을 미친다는 점을 잊지 마세요!

참고: 코드 사용 시, 반드시 저작권 정보를 정확히 반영하고, 자신의 웹사이트에 맞는 URL을 설정하여 사용하세요.

'IT' 카테고리의 다른 글

동영상 전체 배경 - 블로그에 동영상 배경화면 전체화면 적용하는 방법 (0)	2025.03.09
모바일 최적화를 위한 AMP 페이지 연결하는 효율적인 방법 (1)	2025.03.02
AI 시대에 최적화된 블로그 콘텐츠 제작 방법- 검색 최적화 전략 분석 (2)	2025.03.01
수익형 블로그에서 효과적인 단어를 사용해서 마케팅 성과 극대화하기 (0)	2025.02.27
[이미지 메타 프로그램 ] 이미지 메타 태그로 저작권 정보 수정및 저장하기 (0)	2025.02.23
[ 블로그 에디터 종류와 장단점 ] 마크다운, WYSIWYG, HTML, AI 에디터 비교 (2)	2025.02.18
[ 블로그 제목 작성 방법 ] 블로그 글 작성시 제목 작성의 중요한 원칙과 팁 (0)	2025.02.06

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

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

검색엔진 최적화(SEO)를 위한 이미지 메타 태그 자동화 스크립트

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

1. 이미지 메타 데이터의 중요성

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

3. 이 코드를 어떻게 사용하나요?

4. SEO 최적화의 이점

5. 이미지 메타 활용

'IT' 카테고리의 다른 글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역