블로그 동영상의 검색 색인 등록을 위한 구조화 데이터 설정법

유튜브, 동영상 색인 빠르게 하는 구조화 데이터 적용법

블로그에 삽입된 유튜브 동영상 콘텐츠의 검색엔진 색인 속도를 높이고 리치 결과(Rich Results)를 노출시키기 위한VideoObject 구조화 데이터 자동 적용 방법을 소개합니다. 특정 iframe을 타겟팅하는 JSON-LD 자바스크립트 코드를 활용하여 수작업 없이 SEO를 최적화하고 클릭률(CTR)을 올려 보세요!.

---

블로그 콘텐츠를 풍성하게 만들기 위해 동영상을 많이 활용하지만, 단순히 영상 플레이어만 삽입하는 것은 방문자만이 알수 있는 방법입니다. 블로그에 동영상을 넣을 때는 검색엔진에 영상 정보를 명확히 알려주는 것이 매우 중요합니다. Google, Bing 등 주요 검색엔진은 구조화 데이터(Structured Data)를 통해 콘텐츠의 의미를 이해하고, 검색결과에 썸네일, 재생 버튼 등 리치 결과(Rich Results)를 노출시킵니다.

특히 동영상 콘텐츠가 썸네일과 함께 노출되면 클릭률(CTR)이 크게 올라가 방문자 증가에 큰 도움이 됩니다. 이때, VideoObject 타입의 구조화 데이터는 영상 제목, 썸네일, 업로드 날짜, 재생 URL 등 영상을 설명하는 메타데이터를 검색엔진에 전달하는 표준으로 활용됩니다.

유튜브 동영상 VideoObject 구조화 데이터 자동 삽입 스크립트 활용

동영상마다 JSON-LD 형태의 VideoObject 메타데이터를 일일이 작성하는 것은 현실적으로 어렵습니다. 그래서 이번 글에서는 블로그 내에서 특정 클래스명(custom-video-container)으로 감싼 영역 안의 iframe 유튜브 영상을 자동으로 찾아 구조화 데이터를 생성하고, head 영역에 동적으로 삽입하는 자바스크립트 코드를 소개합니다.

왜 특정 클래스명으로 감싼 동영상만 구조화하는가?
모든 영상을 직접 제작했다면 문제가 없겠지만, 타인의 동영상을 사용할 경우 저작권 문제나 원치 않는 영상이 포함될 수 있기 때문에, 의도한 영상만 선택적으로 구조화하여 검색엔진에 정확한 정보를 제공하기 위함입니다.

이 코드를 적용하면:

• 내 블로그에 삽입된 특정 유튜브 영상들을 자동으로 인식합니다.
• 영상별로 제목, 썸네일, 업로드 날짜 정보를 메타데이터에 추가합니다.
• 별도의 수작업 없이 SEO 최적화된 리치 결과 지원이 가능해집니다.

1. 자동 삽입 스크립트 코드 예시 (JSON-LD 동적 생성)

script
document.addEventListener("DOMContentLoaded", () = {
 const videoIframes = document.querySelectorAll(".custom-video-container iframe");
 if (videoIframes.length === 0) return;

 function extractYouTubeID(url) {
 const regExp = /(?:youtube\.com\/(?:embed\/|v\/|watch\?v=)|youtu\.be\/)([a-zA-Z0-9_-]{11})/;
 const match = url.match(regExp);
 return match ? match[1] : null;
 }

 const videos = [];

 videoIframes.forEach((iframe, index) = {
 const src = iframe.src;
 const videoId = extractYouTubeID(src);
 if (!videoId) return;

 // iframe title 속성을 활용하여 영상 제목 가져오기, 없을 경우 기본 제목 사용
 const title = iframe.title || document.title + " - Video " + (index + 1);
 const thumbnail = `https://img.youtube.com/vi/${videoId}/hqdefault.jpg`;
 const uploadDate = new Date().toISOString(); // 현재 날짜를 업로드 날짜로 설정 (실제 업로드 날짜가 아님에 유의)

 videos.push({
 "@context": "https://schema.org",
 "@type": "VideoObject",
 "name": title, // 영상 제목 (자동 또는 iframe title 속성 활용)
 "description": "This video is part of the blog content.", // 블로그 내용과 관련된 설명으로 변경 가능
 "thumbnailUrl": [thumbnail], // 썸네일 URL (자동 생성)
 "uploadDate": uploadDate, // 업로드 날짜 (자동 생성)
 "contentUrl": src, // 동영상 URL (iframe src)
 "embedUrl": src, // 임베드 URL (iframe src)
 "publisher": {
 "@type": "Organization",
 "name": "일상허브", // 사이트 또는 운영자 이름으로 반드시 변경하세요
 "logo": {
 "@type": "ImageObject",
 "url": "https://tistory1.daumcdn.net/tistory/7331789/skin/images/everyday.png" // 사이트 로고 이미지 URL로 반드시 변경하세요
 }
 }
 });
 });

 if (videos.length 0) {
 const script = document.createElement("script");
 script.type = "application/ld+json";
 script.textContent = videos.length === 1
 ? JSON.stringify(videos[0], null, 2)
 : JSON.stringify(videos, null, 2);
 document.head.appendChild(script);
 }
});
/script

2. 적용 방법 및 유의 사항

1. 동영상 감싸기 (필수)

• 동영상 iframe 태그를 div class="custom-video-container"로 감싸주어야 스크립트가 해당 영상을 인식합니다.

div class="custom-video-container"
 iframe src="https://www.youtube.com/embed/영상ID" title="동영상 제목" frameborder="0"/iframe
/div

2. 스크립트 삽입 및 정보 수정

• 위 자바스크립트 코드를 블로그 HTML의 head 태그 하단이나 body 닫는 태그 바로 위에 삽입합니다.
• 코드 내의 "name": "일상허브"와 "url": "..." (로고 URL) 부분을 운영자 또는 사이트 정보로 반드시 수정해야 합니다.

3. 구조화 데이터 유효성 확인

• 구글 리치 결과 테스트 도구에서 페이지 URL을 입력하여 적용 결과를 확인합니다.
• 정상적으로 VideoObject 메타데이터가 인식되고 오류가 없어야 합니다.

샘플 동영상은 명상 수행 중에 제작했던 유튜브 영상입니다.

3. VideoObject 구조화 데이터의 주요 SEO 이점

• 검색결과 내 영상 썸네일 노출: 검색 결과 페이지에서 시각적인 요소로 사용자의 시선을 끌어 클릭률을 획기적으로 높입니다.
• 리치 결과 노출로 클릭률 증가: 동영상의 재생 시간, 업로드 날짜 등 풍부한 정보가 함께 노출되어 사용자가 콘텐츠 품질을 미리 파악할 수 있게 합니다.
• AI 검색 및 음성 검색에서 콘텐츠 인식도 상승: 검색엔진이 동영상 내용을 더 정확히 이해하여 AI 기반 검색 서비스나 음성 검색 결과에 노출될 가능성이 높아집니다.
• 블로그 콘텐츠 신뢰도 및 전문성 강화: 구조화된 데이터를 제공하는 것은 웹 표준을 따른다는 의미로, 검색엔진으로부터 블로그 콘텐츠의 신뢰도를 높이는 데 기여합니다.

검색 엔진은 페이지 내의 동영상을 감지하여 검색 색인에 포함시킵니다

4. 요약: 자동화된 동영상 구조화로 SEO 효과 극대화

이처럼 자바스크립트를 활용한 자동 구조화 데이터 삽입은 특히 영상 콘텐츠가 많은 블로그 운영자에게 매우 유용합니다. 직접 하나씩 메타데이터를 작성할 필요 없이, 코드를 적용하고 특정 클래스로 동영상을 감싸기만 하면 자동으로 최신화된 JSON-LD 데이터가 만들어져 SEO 효과를 극대화할 수 있습니다.

블로그 방문자와 검색엔진 모두에게 더 나은 사용자 경험을 제공하는 방법이니 꼭 활용해보시길 권장드립니다! 궁금한 점이나 적용 관련 도움이 필요하시면 언제든 문의해주세요. 이상으로 VideoObject 자동 구조화 데이터 삽입법 소개를 마칩니다. 행복한 블로그 운영 되세요!

---

블로그에 동영상을 삽입할 때 단순 플레이어만 넣는 것과 검색엔진에 영상 정보를 구조화 데이터로 제공하는 것의 차이는 무엇인가요?

단순 플레이어 삽입은 사용자에게만 영상을 보여줄 뿐입니다. 반면, 구조화 데이터(VideoObject)를 제공하면 검색엔진이 영상의 제목, 썸네일, 업로드 날짜 등의 메타데이터를 명확히 인식하여, 검색결과에 리치 결과(썸네일, 재생 버튼 등)를 노출합니다. 이를 통해 검색 결과에서의 시각적 효과가 증대되어 클릭률(CTR)과 블로그 방문자 수가 크게 증가하는 효과를 얻을 수 있습니다.

블로그에서 여러 유튜브 영상을 효과적으로 구조화하기 위한 방법은 무엇인가요?

다수의 영상에 수동으로 메타데이터를 작성하는 것은 비효율적입니다. 대신, 특정 클래스명(예: custom-video-container)으로 감싼 유튜브 iframe을 자동으로 인식해 JSON-LD 형태의 VideoObject 구조화 데이터를 생성하고 HTML head에 동적으로 삽입하는 자바스크립트를 사용하면 SEO 최적화와 리치 결과 지원을 수월하게 자동화할 수 있습니다.

자바스크립트로 생성된 VideoObject의 업로드 날짜(uploadDate)가 실제 영상 업로드 날짜와 다른데 괜찮은가요?

제공된 스크립트는 코드가 실행되는 시점의 현재 날짜를 uploadDate로 설정합니다. 이는 실제 유튜브 영상의 업로드 날짜와 다를 수 있습니다. 검색엔진은 해당 정보를 통해 영상의 최신성을 판단할 수 있으나, 가장 정확한 정보를 제공하기 위해서는 실제 영상의 업로드 날짜를 수동으로 가져와 적용하는 것이 더 좋습니다. 하지만 자동화를 통한 편의성을 고려할 때, 이 방법도 색인화에 유효한 메타데이터를 제공하는 좋은 대안이 됩니다.

https://everydayhub.tistory.com/1175

https://everydayhub.tistory.com/647