구조화된 데이터 (Schema Markup) - VideoObject 설정 방법

구조화된 데이터 (Schema Markup) - VideoObject 설정 방법

2025. 6. 4. 22:34ㆍ프로그램/Javascript

구조화된 데이터 (Schema Markup)는 검색 엔진이 웹 페이지의 콘텐츠를 더 잘 이해할 수 있도록 웹사이트에 추가하는 특별한 코드 형식입니다. 특히 VideoObject 스키마는 웹페이지에 포함된 동영상에 대한 자세한 정보를 검색 엔진에 제공하여, 검색 결과에 **리치 스니펫(Rich Snippets)**으로 표시될 가능성을 높여줍니다. 리치 스니펫은 일반적인 검색 결과보다 더 많은 정보(예: 썸네일, 재생 시간, 업로드 날짜)를 보여주므로 사용자의 클릭률(CTR)을 높이는 데 매우 효과적입니다.

VideoObject 스키마를 설정하는 가장 일반적이고 권장되는 방법은 JSON-LD (JavaScript Object Notation for Linked Data) 형식을 사용하는 것입니다. HTML 코드 안에 <script type="application/ld+json"> 태그를 사용하여 삽입합니다.

1단계: VideoObject 스키마의 핵심 속성 이해하기

VideoObject 스키마는 여러 속성을 가질 수 있지만, 검색 엔진이 동영상을 이해하고 리치 스니펫을 표시하는 데 필요한 필수 속성과 권장 속성이 있습니다.

필수 속성:

name: 동영상의 제목. (예: "강릉 맛집 여행 가이드")
description: 동영상의 상세한 설명. (예: "강릉 현지인 추천 맛집 소개와 여행 팁!")
thumbnailUrl: 동영상의 대표 썸네일 이미지 URL. 고품질의 썸네일 이미지를 사용해야 합니다.
uploadDate: 동영상이 업로드된 날짜. ISO 8601 형식 (예: YYYY-MM-DDTHH:MM:SSZ 또는 YYYY-MM-DD).
duration: 동영상의 재생 시간. ISO 8601 형식 (예: PT1H30M5S는 1시간 30분 5초, PT8M15S는 8분 15초).
contentUrl: 동영상 파일 자체의 직접적인 URL (예: .mp4 파일). 만약 유튜브/비메오 등 외부 플랫폼 동영상이라면 이 속성 대신 embedUrl을 사용하거나 둘 다 사용할 수 있습니다.
embedUrl: 동영상 플레이어가 삽입된 URL (예: 유튜브 임베드 코드의 src 속성 URL).

권장 속성:

publisher: 동영상을 게시한 단체 또는 개인 정보. (Organization 또는 Person 스키마 사용)
interactionCount: 동영상의 조회수 (YouTube API 등을 통해 가져올 수 있음).
transcript: 동영상의 전체 대본 또는 자막 텍스트.
expires: 동영상이 더 이상 유효하지 않거나 공개되지 않을 날짜.
inLanguage: 동영상의 언어 (예: ko for Korean).

2단계: JSON-LD 코드 작성하기

아래는 웹사이트에 유튜브 동영상을 임베드한 경우의 VideoObject 스키마 예시입니다. <yourdomain.com> 부분은 실제 도메인으로, [각괄호] 안의 내용은 실제 콘텐츠에 맞게 변경해야 합니다.

HTML

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>[강릉 맛집 여행 가이드] - [당신의 웹사이트명]</title>
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "VideoObject",
      "name": "강릉 맛집 여행 가이드: 현지인 추천 TOP 5",
      "description": "강릉을 방문하는 분들을 위한 현지인 추천 맛집 베스트 5를 소개하는 동영상입니다. 해산물, 커피, 초당순두부 등 강릉의 대표적인 음식들을 생생하게 만나보세요!",
      "thumbnailUrl": "https://www.yourdomain.com/images/gangneung-food-guide-thumbnail.jpg",
      "uploadDate": "2025-06-03T10:00:00+09:00", // 업로드 날짜 및 시간 (ISO 8601 형식)
      "duration": "PT0H08M15S", // 동영상 재생 시간 (ISO 8601 형식: P=기간, T=시간, H=시, M=분, S=초)
      "embedUrl": "https://www.youtube.com/embed/YOUR_YOUTUBE_VIDEO_ID", // 유튜브 임베드 URL (실제 ID로 변경)
      "potentialAction": {
        "@type": "WatchAction",
        "target": {
          "@type": "EntryPoint",
          "url": "https://www.youtube.com/watch?v=YOUR_YOUTUBE_VIDEO_ID" // 유튜브 원본 영상 URL
        }
      },
      "publisher": {
        "@type": "Organization",
        "name": "당신의 회사/채널명",
        "logo": {
          "@type": "ImageObject",
          "url": "https://www.yourdomain.com/images/your-logo.png",
          "width": 600,
          "height": 60
        }
      },
      "uploadDate": "2025-06-03", // YYYY-MM-DD 형식도 허용됨
      "audience": {
        "@type": "Audience",
        "audienceType": "여행객, 미식가"
      },
      "keywords": "강릉맛집, 강릉여행, 강릉음식, 해산물, 초당순두부, 강릉카페" // 동영상 관련 키워드
    }
    </script>
    </head>
<body>
    <h1>강릉 맛집 여행 가이드: 현지인 추천 TOP 5</h1>
    <p>강릉을 방문하는 분들을 위한 현지인 추천 맛집 베스트 5를 소개하는 동영상입니다. 해산물, 커피, 초당순두부 등 강릉의 대표적인 음식들을 생생하게 만나보세요!</p>

    <iframe width="560" height="315" src="https://www.youtube.com/embed/YOUR_YOUTUBE_VIDEO_ID" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

    <p>이 동영상은 강릉의 숨겨진 맛집들을 자세히 보여주며...</p>
    </body>
</html>

중요 사항:

@context: 스키마의 정의를 참조하는 URL입니다. 항상 "https://schema.org"를 사용합니다.
@type: 스키마 유형을 정의합니다. 동영상의 경우 "VideoObject"입니다.
uploadDate 및 duration 형식: 반드시 ISO 8601 형식 (예: YYYY-MM-DDTHH:MM:SSZ, PTnHnMnS)을 지켜야 합니다.
contentUrl vs. embedUrl:
- contentUrl: 동영상 파일(.mp4, .mov 등)의 직접적인 URL입니다.
- embedUrl: 유튜브나 비메오와 같이 플레이어가 포함된 페이지의 URL입니다. 둘 중 하나 또는 둘 다 제공할 수 있습니다. 유튜브 동영상이라면 embedUrl을 사용하는 것이 더 일반적입니다.
thumbnailUrl: 실제로 동영상 재생 전에 표시되는 썸네일 이미지의 URL입니다. 고품질이어야 합니다.
publisher: 동영상을 게시한 주체(회사, 개인 등)의 정보를 제공합니다. 로고 URL도 포함할 수 있습니다.
potentialAction: 사용자가 동영상과 상호작용할 수 있는 방법을 정의합니다. 예를 들어, WatchAction을 사용하여 원본 동영상 페이지로 이동하는 링크를 제공할 수 있습니다.

3단계: 웹사이트에 스키마 코드 삽입하기

작성한 JSON-LD 코드는 해당 동영상이 있는 HTML 페이지의 <head> 섹션 또는 <body> 섹션의 시작 부분에 삽입하는 것이 일반적입니다. <head>에 삽입하는 것이 검색 엔진이 페이지를 크롤링할 때 더 빨리 발견할 수 있어 권장됩니다.

4단계: 구조화된 데이터 테스트하기

코드를 웹사이트에 적용한 후에는 반드시 구글의 공식 도구를 사용하여 오류가 없는지 확인해야 합니다.

Google 리치 결과 테스트 (Rich Results Test):
- URL: https://search.google.com/test/rich-results
- 웹페이지 URL을 입력하거나, 직접 JSON-LD 코드를 붙여 넣어 테스트할 수 있습니다.
- VideoObject 스키마가 성공적으로 감지되고 유효성 검사를 통과하는지 확인하세요.
- 오류나 경고가 있다면 수정해야 합니다.

추가 팁:

고유성: 각 동영상 페이지에는 고유한 VideoObject 스키마를 사용해야 합니다.
콘텐츠 매칭: 스키마에 제공하는 정보(제목, 설명, 썸네일 등)는 실제 동영상 콘텐츠와 웹페이지의 텍스트 콘텐츠와 정확하게 일치해야 합니다. 불일치는 검색 엔진에 의해 스팸으로 간주될 수 있습니다.
지속적인 모니터링: Google Search Console의 '향상 기능' 보고서에서 구조화된 데이터에 대한 오류나 경고가 없는지 주기적으로 확인하세요.

VideoObject 스키마를 올바르게 구현하면, 검색 엔진이 내 웹사이트의 동영상 콘텐츠를 더 잘 이해하고, 사용자들에게 매력적인 형태로 노출하여 웹사이트 트래픽과 가시성을 크게 향상시킬 수 있습니다.

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

'프로그램 > Javascript' 카테고리의 다른 글

Video, Audio 태그 LoadedMetaData 에서 얻을수 있는 정보 (0)	2025.06.08
jquery radio 값 가져오기 (0)	2025.06.04
JavaScript 로 동영상 해상도 확인후 서버로 전송하기 (0)	2025.06.04
JavaScript Beautifier (0)	2025.05.21

카트로의 IT/취미세상