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

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

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

자동으로 동영상 구조화 데이터를 삽입하는 방법

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

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

이 코드를 적용하면:

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

1. 자동 삽입 스크립트 코드 예시

<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;

    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> 또는 적절한 위치에 삽입합니다.

3. 확인

구글 리치 결과 테스트 도구에서 적용 결과를 확인하세요.
정상적으로 VideoObject 메타데이터가 인식되어야 합니다.

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

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

검색결과 내 영상 썸네일 노출
리치 결과 노출로 클릭률 증가
AI 검색 및 음성 검색에서 콘텐츠 인식도 상승
블로그 콘텐츠 신뢰도 및 전문성 강화

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

4. 요약 정리

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

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

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

검색엔진은 구조화 데이터를 통해 영상의 제목, 썸네일, 업로드 날짜 등을 인식하고, 검색결과에 리치 결과(썸네일, 재생 버튼 등)를 노출합니다. 이를 통해 클릭률과 방문자 수가 크게 증가할 수 있습니다.

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

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

저작자표시 비영리 변경금지 (새창열림)

'SEO > seo-tips' 카테고리의 다른 글

광고 미노출 대응 방법 총정리 2 , 구글이 예고한 애드센스 광고 '빈 공간 최적화' 업데이트, (5)	2025.07.05
광고 노출 실패! 광고가 보이지 않는 이유와 자동화 광고 사용 시 레이아웃 깨짐 해결법 (3)	2025.07.02
origin-trial 메타 태그란? 왜 내 사이트에 뜨는 걸까? — 장단점과 SEO 영향까지 (5)	2025.07.02
검색에 내 블로그 제대로 알리기! Organization 구조화 데이터 완벽 가이드 (2)	2025.07.01
FAQ 질문과 답변 구조화 데이터 자동 생성으로 검색 노출 최적화하는 방법 (1)	2025.06.29
광고 안정적으로 노출 하는 방법, 애드센스 광고 어떤 태그로 감싸야 할까? (1)	2025.06.26
이미지 검색 노출 최적화,블로그에 이미지 구조화 데이터 적용하는 가장 쉬운 방법 (1)	2025.06.26