讓 Google 顯示您的影片

Google 搜尋是使用者探索及觀看影片的起始點。雖然 Google 會嘗試自行理解您影片的相關詳細資料,您仍可透過 VideoObject 明確提供說明、縮圖網址、上傳日期和時間長度等詳細資訊。Google 搜尋結果、影片搜尋結果、Google 圖片以及 Google 探索中都有可能顯示影片內容。

顯示 Google 搜尋結果、影片分頁和「探索」專區中的影片內容螢幕截圖

依您標記內容的方式而定,您的影片可能也適用下列影片強化功能:

影片強化功能

「直播」標記:為影片加上 BroadcastEvent 標記,即可讓影片顯示「直播」標記。「直播」標記適用於任何長度的公開直播影片,例如:

  • 體育賽事
  • 頒獎典禮
  • 影響者影片
  • 電玩遊戲直播

請務必遵守「直播」標記指南,並使用 Indexing API 確保 Google 在正確的時機檢索您的網頁。

搜尋結果中一部具有「直播」標記的影片
剪輯 (有使用限制):協助使用者快速前往影片中的特定時間點。 搜尋結果中啟用剪輯功能的影片
影片代管網頁輪轉介面 (有使用限制):透過新增 ItemList 結構化資料,讓使用者探索您的影片庫網頁。

如何新增結構化資料

結構化資料是一種標準化格式,作用是提供網頁相關資訊以及將網頁內容歸類。如果您是第一次使用結構化資料,請參閱這篇文章進一步瞭解結構化資料的運作方式。

以下簡要說明如何建立、測試及發布結構化資料。如需在網頁中新增結構化資料的逐步指南,請前往結構化資料程式碼研究室

  1. 新增必要屬性。如要瞭解應在網頁上的何處插入結構化資料,請觀看「JSON-LD 結構化資料:網頁上的插入位置」影片。
  2. 遵循指南的規定
  3. 使用複合式搜尋結果測試驗證程式碼。
  4. 部署幾個包含結構化資料的網頁,並使用網址檢查工具測試 Google 轉譯網頁的情形。請確認 Google 可以存取您的網頁,且網頁並未遭到 robots.txt 檔案或 noindex 標記封鎖,也未設有登入規定。如果網頁看起來沒問題,您可以要求 Google 重新檢索您的網址
  5. 為了讓 Google 掌握異動內容,建議您提交 Sitemap。您可以使用 Search Console Sitemap API 自動執行這項操作。

範例

標準影片複合式搜尋結果

標準影片搜尋結果範例

以下是採用單一 VideoObject 的範例。


<html>
  <head>
    <title>Introducing the self-driving bicycle in the Netherlands</title>
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "VideoObject",
      "name": "Introducing the self-driving bicycle in the Netherlands",
      "description": "This spring, Google is introducing the self-driving bicycle in Amsterdam, the world’s premier cycling city. The Dutch cycle more than any other nation in the world, almost 900 kilometres per year per person, amounting to over 15 billion kilometres annually. The self-driving bicycle enables safe navigation through the city for Amsterdam residents, and furthers Google’s ambition to improve urban mobility with technology. Google Netherlands takes enormous pride in the fact that a Dutch team worked on this innovation that will have great impact in their home country.",
      "thumbnailUrl": [
        "https://example.com/photos/1x1/photo.jpg",
        "https://example.com/photos/4x3/photo.jpg",
        "https://example.com/photos/16x9/photo.jpg"
       ],
      "uploadDate": "2016-03-31T08:00:00+08:00",
      "duration": "PT1M54S",
      "contentUrl": "https://www.example.com/video/123/file.mp4",
      "embedUrl": "https://www.example.com/embed/123",
      "interactionStatistic": {
        "@type": "InteractionCounter",
        "interactionType": { "@type": "http://schema.org/WatchAction" },
        "userInteractionCount": 5647018
      },
      "regionsAllowed": "NL"
    }
    </script>
  </head>
  <body>
  </body>
</html>

直播標記

搜尋結果中包含直播標記的影片範例

以下是採用 JSON-LD 程式碼的 VideoObjectBroadcastEvent 範例。

<html>
  <head>
    <title>Bald Eagle at the Park - Livestream</title>
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "VideoObject",
      "contentURL": "https://example.com/bald-eagle-at-the-park.mp4",
      "description": "Bald eagle at the park livestream.",
      "duration": "PT37M14S",
      "embedUrl": "https://example.com/bald-eagle-at-the-park",
      "expires": "2018-10-30T14:37:14+00:00",
      "regionsAllowed": "US",
      "interactionStatistic": {
        "@type": "InteractionCounter",
        "interactionType": { "@type": "http://schema.org/WatchAction" },
        "userInteractionCount": 4756
      },
      "name": "Bald eagle nest livestream!",
      "thumbnailUrl": "https://example.com/bald-eagle-at-the-park",
      "uploadDate": "2018-10-27T14:00:00+00:00",
      "publication": [
        {
          "@type": "BroadcastEvent",
          "isLiveBroadcast": true,
          "startDate": "2018-10-27T14:00:00+00:00",
          "endDate": "2018-10-27T14:37:14+00:00"
        },
        {
          "@type": "BroadcastEvent",
          "isLiveBroadcast": true,
          "startDate": "2018-10-27T18:00:00+00:00",
          "endDate": "2018-10-27T18:37:14+00:00"
        }
      ]
    }
    </script>
  </head>
  <body>
  </body>
</html>

以下是 VideoObjectItemList 結構化資料的範例。這項功能目前僅提供少數供應商使用。

JSON-LD
<html>
  <head>
    <title>Introducing the self-driving bicycle in the Netherlands</title>
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "ItemList",
      "itemListElement": [
        {
          "@type": "VideoObject",
          "position": 1,
          "name": "Introducing the self-driving bicycle in the Netherlands",
          "url": "https://www.example.com/video/self-driving-bicycle",
          "description": "This spring, Google is introducing the self-driving bicycle in Amsterdam, the world’s premier cycling city. The Dutch cycle more than any other nation in the world, almost 900 kilometres per year per person, amounting to over 15 billion kilometres annually. The self-driving bicycle enables safe navigation through the city for Amsterdam residents, and furthers Google’s ambition to improve urban mobility with technology. Google Netherlands takes enormous pride in the fact that a Dutch team worked on this innovation that will have great impact in their home country.",
          "thumbnailUrl": [
            "https://www.example.com/video/self-driving-bicycle/1x1/photo.jpg",
            "https://www.example.com/video/self-driving-bicycle/4x3/photo.jpg",
            "https://www.example.com/video/self-driving-bicycle/16x9/photo.jpg"
          ],
          "uploadDate": "2016-03-31T08:00:00+08:00",
          "duration": "PT1M54S",
          "contentUrl": "https://www.example.com/video/self-driving-bicycle/file.mp4",
          "embedUrl": "https://www.example.com/embed/self-driving-bicycle",
          "interactionStatistic": {
            "@type": "InteractionCounter",
            "interactionType": { "@type": "http://schema.org/WatchAction" },
            "userInteractionCount": 5647018
          }
        },
        {
          "@type": "VideoObject",
          "position": 2,
          "name": "How to tie a tie",
          "url": "https://www.example.com/video/how-to-tie-a-tie",
          "description": "How to tie a four-in-hand knot.",
          "thumbnailUrl": [
            "https://www.example.com/video/how-to-tie-a-tie/1x1/photo.jpg",
            "https://www.example.com/video/how-to-tie-a-tie/4x3/photo.jpg",
            "https://www.example.com/video/how-to-tie-a-tie/16x9/photo.jpg"
          ],
          "uploadDate": "2019-02-28T08:00:00+08:00",
          "duration": "PT5M01S",
          "contentUrl": "https://www.example.com/video/how-to-tie-a-tie/file.mp4",
          "embedUrl": "https://www.example.com/embed/how-to-tie-a-tie",
          "interactionStatistic": {
            "@type": "InteractionCounter",
            "interactionType": { "@type": "http://schema.org/WatchAction" },
            "userInteractionCount": 102111
          }
        }
      ]
    }
    </script>
  </head>
  <body>
  </body>
</html>
微資料
<div>
      <div itemprop="video" itemscope itemtype="http://schema.org/VideoObject">
        <!-- Thumbnail -->
        <a href="https://example.com/videos/self-driving-bicycle"
           title="Introducing the self-driving bicycle in the Netherlands">
          <img src="https://example.com/videos/self-driving-bicycle/thumbnail.jpg"
               alt="Introducing the self-driving bicycle in the Netherlands"
               title="Introducing the self-driving bicycle in the Netherlands"
               itemprop="thumbnailUrl">
        </a>
        <!-- URL, name, and description -->
        <h1>
          <a itemprop="contentUrl" href="https://example.com/videos/self-driving-bicycle"
             title="Introducing the self-driving bicycle in the Netherlands">
            <span itemprop="name">Introducing the self-driving bicycle in the Netherlands</span>
          </a>
        </h1>
        <a href="https://example.com/videos/self-driving-bicycle"
             title="Introducing the self-driving bicycle in the Netherlands">
          <div itemprop="description">"This spring, Google is introducing the self-driving bicycle
            in Amsterdam, the world’s premier cycling city. The Dutch cycle more than any other
            nation in the world, almost 900 kilometres per year per person, amounting to over 15
            billion kilometres annually. The self-driving bicycle enables safe navigation through
            the city for Amsterdam residents, and furthers Google’s ambition to improve urban
            mobility with technology. Google Netherlands takes enormous pride in the fact that a
            Dutch team worked on this innovation that will have great impact in their home country.
          "</div>
        </a>
        <!-- Other metadata -->
        <meta itemprop="duration" content="PT1M54S" />
        <meta itemprop="uploadDate" content="2016-03-31T08:00:00+08:00" />
        <span itemprop="interactionStatistic" itemscope itemtype="http://schema.org/InteractionCounter">
        	<span itemprop="interactionType" itemscope itemtype="http://schema.org/WatchAction"></span>
        	<meta itemprop="userInteractionCount" content="5647018" />
        </span>
      </div>

      <div itemprop="video" itemscope itemtype="http://schema.org/VideoObject">
        <!-- Thumbnail -->
        <a href="https://example.com/videos/how-to-tie-a-tie"
           title="How to tie a tie">
          <img src="https://example.com/videos/how-to-tie-a-tie/thumbnail.jpg"
               alt="How to tie a tie"
               title="How to tie a tie"
               itemprop="thumbnailUrl">
        </a>
        <!-- URL, name, and description -->
        <h1>
          <a itemprop="contentUrl" href="https://example.com/videos/how-to-tie-a-tie"
             title="Tie a Tie">
            <span itemprop="name">Tie a Tie</span>
          </a>
        </h1>
        <a href="https://example.com/videos/how-to-tie-a-tie"
             title="Tie a Tie">
          <div itemprop="description">How to tie a four-in-hand knot.</div>
        </a>
        <!-- Other metadata -->
        <meta itemprop="duration" content="PT5M01S" />
        <meta itemprop="uploadDate" content="2019-01-05T08:00:00+08:00" />
        <span itemprop="interactionStatistic" itemscope itemtype="http://schema.org/InteractionCounter">
        	<span itemprop="interactionType" itemscope itemtype="http://schema.org/WatchAction"></span>
        	<meta itemprop="userInteractionCount" content="102111" />
        </span>
      </div>
    </div>
  

剪輯 (有使用限制)

搜尋結果中啟用剪輯功能的影片

以下是用 JSON-LD 程式碼呈現的 VideoObjectClip。這項功能目前僅提供少數供應商使用。如果您想使用這項功能,歡迎填寫意願表單

<html>
  <head>
    <title>Cat jumps over the fence</title>
    <script type="application/ld+json">
    {
      "@context": "http://schema.org/",
      "@type": "VideoObject",
      "name": "Cat video",
      "duration": "P10M",
      "uploadDate": "2019-07-19",
      "thumbnailUrl": "http://www.example.com/cat.jpg",
      "description": "Watch this cat jump over a fence!",
      "contentUrl": "http://www.example.com/cat_video_full.mp4",
      "regionsAllowed": "US",
      "hasPart": [{
        "@type": "Clip",
        "name": "Cat jumps",
        "startOffset": 30,
        "endOffset": 45,
        "url": "http://www.example.com/example?t=30"
      },
      {
        "@type": "Clip",
        "name": "Cat misses the fence",
        "startOffset": 111,
        "endOffset": 150,
        "url": "http://www.example.com/example?t=111"
      }]
    }
    </script>
  </head>
  <body>
  </body>
</html>

含有影片的 AMP 網頁

以下是 AMP 頁面上的 VideoObject 範例。

<html amp>
  <head>
    <title>Introducing the self-driving bicycle in the Netherlands</title>
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "VideoObject",
      "name": "Introducing the self-driving bicycle in the Netherlands",
      "description": "This spring, Google is introducing the self-driving bicycle in Amsterdam, the world’s premier cycling city. The Dutch cycle more than any other nation in the world, almost 900 kilometres per year per person, amounting to over 15 billion kilometres annually. The self-driving bicycle enables safe navigation through the city for Amsterdam residents, and furthers Google’s ambition to improve urban mobility with technology. Google Netherlands takes enormous pride in the fact that a Dutch team worked on this innovation that will have great impact in their home country.",
      "thumbnailUrl": "https://www.example.com/thumbnail.jpg",
      "uploadDate": "2016-03-31T08:00:00+08:00",
      "duration": "PT1M54S",
      "publisher": {
        "@type": "Organization",
        "name": "Google Nederland",
        "logo": {
          "@type": "ImageObject",
          "url": "https://example.com/logo.jpg",
          "width": 600,
          "height": 60
        }
      },
      "contentUrl": "https://www.example.com/video/123/file.mp4",
      "embedUrl": "https://www.example.com/embed/123",
      "interactionStatistic": {
        "@type": "InteractionCounter",
        "interactionType": { "@type": "http://schema.org/WatchAction" },
        "userInteractionCount": 5647018
      },
      "regionsAllowed": "NL"
    }
    </script>
  </head>
  <body>
  </body>
</html>

指南規範

為了讓 Google 更瞭解您的影片,請務必遵守下列規範:

「直播」標記指南

如果您要為直播影片新增 BroadcastEvent,請遵守下列規範:

  • 請勿在結構化資料中使用粗俗或可能令人反感的用語。
  • 請使用 Indexing API,以確保 Google 在正確的時機檢索您的直播影片。請在下列情況下呼叫 API:
    • 當影片開始直播時
    • 當影片停止串流,且網頁標記已更新為表示 endDate
    • 當標記有所異動,且有必要通知 Google 時

在 YouTube 中標示時間戳記的最佳做法

如果您的影片是由 YouTube 代管,Google 搜尋可能會根據 YouTube 上的影片說明自動為您的影片啟用剪輯功能,無須您親自在 YouTube 說明中標示特定的時間戳記。不過,您可以明確告知我們您影片中的重點段落,Google 會偏好採用您所提供的資訊。下圖說明 YouTube 影片說明中的時間戳記和標籤,可能會如何顯示在搜尋結果中:

搜尋結果中含有時間戳記和標籤的影片
1. 時間戳記:剪輯開始的時間。
2. 標籤:剪輯名稱。

為 YouTube 影片說明標示時間戳記和標籤時,請遵循下列指南規範:

  • 採用下列格式設定時間戳記:[hour]:[minute]:[second]。如果沒有小時這個單位,則不必包含在格式中。
  • 在時間戳記的同一行指定時間戳記標籤。
  • 在影片說明中的每一行列出一個時間戳記。
  • 將時間戳記連結至影片中指定的時間點。
  • 確認標籤包含至少一個字詞。
  • 依時間順序列出時間戳記。

剪輯指南 (有使用限制)

如果您要新增 Clip 以標記影片片段,請遵守以下規範:

  • 影片必須對外公開,讓使用者不需訂閱即可觀看。
  • 影片必須具備深層連結,可將使用者帶至影片網址起點之外的特定內容。舉例來說,http://www.example.com/example?t=30 可跳至影片播放 30 秒後的畫面。
  • 您必須在使用者能夠觀看影片的頁面中新增 Clip 結構化資料。如果將使用者導向無法觀看影片的網頁,可能會導致使用者體驗不佳。
  • 影片總長度必須至少為 30 秒。
  • 請確定在相同頁面中定義的同一部影片,沒有開始時間重複的剪輯片段。
  • 影片必須具有 VideoObject 結構化資料。

結構化資料類型定義

本節說明與 Google 搜尋中影片功能相關的結構化資料類型。您的內容必須包含必要的 VideoObject 屬性,才能以複合式搜尋結果的形式呈現。您也可以加入建議的屬性,新增更多內容相關資訊,提供使用者更優質的體驗。除了 VideoObject 之外,您還可以新增下列資料類型,以便在 Google 搜尋中啟用影片強化功能:

  • BroadcastEvent:標記直播影片,為您的影片啟用「直播」標記。
  • ItemList:使用影片清單標記網頁,以啟用影片代管網頁輪轉介面。
  • Clip:標記影片中的重要片段,協助使用者快速前往影片中的特定時間點。

VideoObject

schema.org/VideoObject 內提供 VideoObject 的完整定義。 如果您未提供必要屬性,Google 可能無法擷取任何影片相關資訊。您也可以加入我們建議的屬性,以便為您的內容添加更多資訊,打造出更優質的使用者體驗。

必要屬性
description

Text

影片的說明。系統會忽略 HTML 標記。

name

Text

影片的標題

thumbnailUrl

重複的 ImageObjectURL

指向影片縮圖檔案的網址。

  • 圖片網址必須可供檢索和建立索引
  • 圖片必須代表加上標記的內容。
  • 圖片必須採 .jpg、.png 或 .gif 格式。
  • 圖片至少必須為 60px x 30px。
uploadDate

Date

首次發布影片的日期 (採用 ISO 8601 格式)。

建議屬性
contentUrl

URL

指向實際影片媒體檔案的網址,採用其中一種支援的編碼格式。請勿連結至影片所在的網頁,這必須是影片媒體檔案本身的網址。

請務必遵循我們的影片最佳做法

duration

Duration

影片的長度 (採用 ISO 8601 格式)。 例如 T00H30M5S 表示影片長度為「三十分鐘五秒」。

embedUrl

URL

指向特定影片播放器的網址,採用其中一種支援的編碼格式。請勿連結至影片所在的網頁,這必須是影片媒體檔案本身的網址。一般來說,這是 <embed> 標記中 src 元素的資訊。

請務必遵循我們的影片最佳做法

expires

Date

採用 ISO 8601 格式的影片到期日,使用者在該日期後將無法再觀看這部影片 (如適用)。如果您的影片並無有效期限,請不要提供這項資訊。

hasPart

如果您的影片含有重要片段,請在您的 VideoObject 中建立必要 Clip 屬性的巢狀結構。例如:


<script type="application/ld+json">
{
  "@context": "http://schema.org/",
  "@type": "VideoObject",
  "name": "Cat video",
  "hasPart": {
    "@type": "Clip",
    "name": "Cat jumps",
    "startOffset": 30,
    "url": "http://www.example.com/example?t=30"
  }
}
</script>
interactionStatistic

InteractionCounter

影片的觀看次數。例如:

"interactionStatistic":
  {
    "@type": "InteractionCounter",
    "interactionType": { "@type": "http://schema.org/WatchAction" },
    "userInteractionCount": 12345
  }
publication

如要直播影片,您必須在 VideoObject 中建立 BroadcastEvent 屬性的巢狀結構,才能讓影片顯示「直播」標記。例如:


<script type="application/ld+json">
{
  "@context": "http://schema.org/",
  "@type": "VideoObject",
  "name": "Cat video",
  "publication": {
    "@type": "BroadcastEvent",
    "name": "First scheduled broadcast",
    "isLiveBroadcast": true,
    "startDate": "2018-10-27T14:00:00+00:00",
    "endDate": "2018-10-27T14:37:14+00:00"
  }
}
</script>

BroadcastEvent

您必須在 VideoObject 中建立下列屬性的巢狀結構,才能讓您的影片顯示「直播」標記。雖然 BroadcastEvent 並非必要屬性,但如果您想讓自己的影片顯示「直播」標記,就必須新增下列屬性。

schema.org/BroadcastEvent 內提供 BroadcastEvent 的完整定義。

必要屬性
publication

BroadcastEvent

說明影片直播時間,可為清單或單一例項。

publication.endDate

DateTime

直播結束或預計結束的日期和時間 (採用 ISO 8601 格式)。

影片結束並停止直播後,就必須提供 endDate。如果在直播開始前還不知道預計的 endDate,建議您提供概略的 endDate

如果 endDate 是過去或現在的時間,表示串流實際上已結束並已停止直播。如果 endDate 是未來的時間,表示串流預計在該時間結束。

publication.isLiveBroadcast

布林 (值)

如果影片正在、已經或將會直播,請設為 true

publication.startDate

DateTime

直播開始或預計開始的日期和時間 (採用 ISO 8601 格式)。如果 startDate 是過去或現在的時間,表示串流實際上已開始。如果 startDate 是未來的時間,表示串流預計在該時間開始。

ItemList (有使用限制)

為了讓 Google 更瞭解您的影片庫網頁,除了 VideoObject 屬性之外,請再加入下列 ItemList 屬性。如要進一步瞭解輪轉介面,請參閱輪轉介面一文。

schema.org/ItemList 內提供 ItemList 的完整定義。

必要屬性
itemListElement

ListItem

單一項目頁面的註解。每個 ListItem 元素都必須含有 VideoObject 屬性ListItem 屬性。

ListItem.position

Integer

項目頁面在清單中的序數位置。例如:

"itemListElement": [
  {
    "@type": "VideoObject",
    "position": 1,
    ... other VideoObject properties ...
  }, {
    "@type": "VideoObject",
    "position": 2,
    ... other VideoObject properties ...
  }
]
ListItem.url

URL

項目頁面的標準網址。每個項目都應該有一個專屬網址。

Clip (有使用限制)

您必須在 VideoObject 中建立下列屬性的巢狀結構,才能為影片啟用剪輯功能。雖然 Clip 屬性並非必要屬性,但如果您希望影片能夠播放片段,就必須新增下列屬性。

schema.org/Clip 內提供 Clip 的完整定義。

必要屬性
name

Text

剪輯內容的描述性標題。

startOffset

Number

剪輯開始時間 (以從剪輯開頭算起的秒數表示)。

url

URL

指向剪輯開始時間的網址。

剪輯網址必須指向與影片相同的網址路徑,並附上指定時間的其他查詢參數。

舉例來說,下列網址表示影片的開始時間為 2:00 分:

"url": "https://www.example.com/example?t=120"
建議屬性
endOffset

Number

剪輯結束時間 (以從剪輯開頭算起的秒數表示)。

透過 Search Console 監控複合式搜尋結果

Search Console 這項工具能協助您監控網頁在 Google 搜尋中的成效。 Google 會主動將您的網頁納入搜尋結果,您無需為此申請使用 Search Console,但是您可以藉由這項服務瞭解並改善 Google 檢索您網站的方式。建議您在下列情況下查看 Search Console:

  1. 首次部署結構化資料後
  2. 發布新範本或更新程式碼後
  3. 定期分析流量

首次部署結構化資料後

在 Google 為網頁建立索引後,請透過相關複合式搜尋結果狀態報告查看是否存在任何問題。 理想情況下,有效網頁會增加,但錯誤或警告不會變多。如果您在結構化資料中發現問題,請依下列步驟操作:

  1. 修正錯誤
  2. 檢查線上網址,查看問題是否仍繼續發生。
  3. 透過狀態報告要求驗證

發布新範本或更新程式碼後

當您對網站進行大幅變更時,請留意結構化資料中錯誤和警告的數量是否增加。
  • 如果錯誤增加,代表您推出的新範本可能無法正常運作,或者您的網站採用新方式與現有範本互動,但效果不佳。
  • 如果有效項目減少 (但錯誤並未跟著同時增加),代表您的網頁可能已不再內嵌結構化資料。請使用網址檢查工具找出問題的原因。

定期分析流量

透過成效報表分析您的 Google 搜尋流量。 這些資料會顯示您的網頁在 Google 搜尋中呈現為複合式搜尋結果的頻率、使用者點擊的頻率,以及您的搜尋結果平均排名。您也可以使用 Search Console API 自動提取這些結果。

疑難排解

如果您無法順利導入結構化資料,請參考下列資源。