Google 圖片中的圖片授權

如果您為網站上的圖片指定授權資訊,該圖片在 Google 圖片的縮圖上即可顯示「可申請授權」標記。這可讓使用者知道該圖片提供授權資訊,並在圖片檢視器中提供授權連結,方便使用者進一步瞭解圖片使用方式詳情。

Google 圖片中的「可申請授權」標記

功能適用情況

這項功能適用於行動裝置、電腦,以及可使用 Google 搜尋的所有語言和地區。

為您的網頁和圖片做好準備

如何確保 Google 可檢索到您的圖片,並為其建立索引:

添加結構化資料或 IPTC 相片中繼資料

如要讓 Google 知道哪些圖片可申請授權,請為您網站上每張可申請授權的圖片添加結構化資料或 IPTC 相片中繼資料。如果您有某張圖片重複出現在多個網頁上,請為每個網頁上的每張該圖片添加結構化資料或 IPTC 相片中繼資料。

有兩種方式能為圖片添加授權資訊,您只需透過下列任一方法向 Google 提供其中一種格式的資訊,即可顯示「可申請授權」標記:

  • 結構化資料:結構化資料所表示的,是圖片以及加上標記的圖片所在網頁之間的關聯。您必須為使用的每張圖片新增結構化資料,即使是相同圖片也一樣。
  • IPTC 相片中繼資料:IPTC 相片中繼資料內嵌於圖片本身,且圖片和中繼資料可在不同網頁之間移動而不會有所改變。每張圖片只需嵌入一次 IPTC 相片中繼資料。

下圖說明授權資訊在 Google 圖片中的顯示方式:

這個圖說內容說明 Google 圖片中會顯示授權資訊的哪些部分
  1. 這個網址所指向的網頁說明了規範圖片使用方式的授權。請使用 Schema.org license 屬性或 IPTC「Web Statement of Rights」欄位指定這項資訊。
  2. 這個網址所指向的網頁,說明了使用者可在何處找到申請該圖片授權的相關資訊。請使用 Schema.org acquireLicensePage 屬性或Licensor的 IPTC「Licensor URL」欄位指定這項資訊。

結構化資料

新增結構化資料欄位,是讓 Google 知道圖片接受申請授權的其中一種方式。結構化資料是一種標準化格式,能夠提供網頁相關資訊並分類網頁內容。如果您是第一次使用結構化資料,請參閱這篇文章,進一步瞭解結構化資料的運作方式。

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

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

範例

單一圖片

以下是包含單一可申請授權圖片的網頁範例。

JSON-LD


<html>
  <head>
    <title>Black labrador puppy</title>
    <script type="application/ld+json">
    {
      "@context": "https://schema.org/",
      "@type": "ImageObject",
      "contentUrl": "https://example.com/photos/1x1/black-labrador-puppy.jpg",
      "license": "https://example.com/license",
      "acquireLicensePage": "https://example.com/how-to-use-my-images"
    }
    </script>
  </head>
  <body>
    <img alt="Black labrador puppy" src="https://example.com/photos/1x1/black-labrador-puppy.jpg">
    <p><a href="https://example.com/license">License</a></p>
    <p><a href="https://example.com/how-to-use-my-images">How to use my images</a></p>
  </body>
</html>

RDFa


<html>
  <head>
    <title>Black labrador puppy</title>
  </head>
  <body>
  <div vocab="https://schema.org/" typeof="ImageObject">
    <img alt="Black labrador puppy" property="contentUrl" src="https://example.com/photos/1x1/black-labrador-puppy.jpg" /><br />
    <span property="license"> https://example.com/license</span><br />
    <span property="acquireLicensePage">https://example.com/how-to-use-my-images</span>
  </div>
  </body>
</html>

微資料


<html>
  <head>
    <title>Black labrador puppy</title>
  </head>
  <body>
    <div itemscope itemtype="https://schema.org/ImageObject">
    <img alt="Black labrador puppy" itemprop="contentUrl" src="https://example.com/photos/1x1/black-labrador-puppy.jpg" /><br />
    <span itemprop="license"> https://example.com/license</span><br />
    <span itemprop="acquireLicensePage">https://example.com/how-to-use-my-images</span>
    </div>
  </body>
</html>
srcset 標記中的單一圖片

以下網頁範例具有一個 srcset 標記,其中包含一張可申請授權的圖片。

JSON-LD


<html>
  <head>
    <title>Black labrador puppy</title>
    <script type="application/ld+json">
    {
      "@context": "https://schema.org/",
      "@type": "ImageObject",
      "contentUrl": "https://example.com/photos/320/black-labrador-puppy-800w.jpg",
      "license": "https://example.com/license",
      "acquireLicensePage": "https://example.com/how-to-use-my-images"
    }
    </script>
  </head>
  <body>
    <img srcset="https://example.com/photos/320/black-labrador-puppy-320w.jpg 320w,
                   https://example.com/photos/480/black-labrador-puppy-480w.jpg 480w,
                   https://example.com/photos/800/black-labrador-puppy-800w.jpg 800w"
           sizes="(max-width: 320px) 280px,
                  (max-width: 480px) 440px,
                  800px"
           src="https://example.com/photos/320/black-labrador-puppy-800w.jpg"
           alt="Black labrador puppy"><br />
    <p><a href="https://example.com/license">License</a></p>
    <p><a href="https://example.com/how-to-use-my-images">How to use my images</a></p>
  </body>
</html>

RDFa


<html>
  <head>
    <title>Black labrador puppy</title>
  </head>
  <body>
    <div vocab="https://schema.org/" typeof="ImageObject">
      <img property="contentUrl"
           srcset="https://example.com/photos/320/black-labrador-puppy-320w.jpg 320w,
                   https://example.com/photos/480/black-labrador-puppy-480w.jpg 480w,
                   https://example.com/photos/800/black-labrador-puppy-800w.jpg 800w"
           sizes="(max-width: 320px) 280px,
                  (max-width: 480px) 440px,
                  800px"
           src="https://example.com/photos/320/black-labrador-puppy-800w.jpg"
           alt="Black labrador puppy"><br />
      <span property="license"> https://example.com/license</span><br />
      <span property="acquireLicensePage">https://example.com/how-to-use-my-images</span>
   </div>
  </body>
</html>

微資料


<html>
  <head>
    <title>Black labrador puppy</title>
  </head>
  <body>
    <div itemscope itemtype="http://schema.org/ImageObject">
      <img itemprop="contentUrl"
           srcset="https://example.com/photos/320/black-labrador-puppy-320w.jpg 320w,
                   https://example.com/photos/480/black-labrador-puppy-480w.jpg 480w,
                   https://example.com/photos/800/black-labrador-puppy-800w.jpg 800w"
           sizes="(max-width: 320px) 280px,
                  (max-width: 480px) 440px,
                  800px"
           src="https://example.com/photos/320/black-labrador-puppy-800w.jpg"
           alt="Black labrador puppy"><br />
     <span itemprop="license"> https://example.com/license</span><br />
     <span itemprop="acquireLicensePage">https://example.com/how-to-use-my-images</span>
   </div>
  </body>
</html>
單一網頁上有多張圖片

以下是包含多張可申請授權圖片的網頁範例。

JSON-LD


<html>
  <head>
    <title>Photos of black labradors</title>
    <script type="application/ld+json">
    [{
      "@context": "https://schema.org/",
      "@type": "ImageObject",
      "contentUrl": "https://example.com/photos/1x1/black-labrador-puppy.jpg",
      "license": "https://example.com/license",
      "acquireLicensePage": "https://example.com/how-to-use-my-images"
    },
   {
      "@context": "https://schema.org/",
      "@type": "ImageObject",
      "contentUrl": "https://example.com/photos/1x1/adult-black-labrador.jpg",
      "license": "https://example.com/license",
      "acquireLicensePage": "https://example.com/how-to-use-my-images"
    }]
    </script>
  </head>
  <body>
    <h2>Black labrador puppy</h2>
    <img alt="Black labrador puppy" src="https://example.com/photos/1x1/black-labrador-puppy.jpg">
    <p><a href="https://example.com/license">License</a></p>
    <p><a href="https://example.com/how-to-use-my-images">How to use my images</a></p>
    <h2>Adult black labrador</h2>
    <img alt="Adult black labrador" src="https://example.com/photos/1x1/adult-black-labrador.jpg">
    <p><a href="https://example.com/license">License</a></p>
    <p><a href="https://example.com/how-to-use-my-images">How to use my images</a></p>
  </body>
</html>

RDFa


<html>
  <head>
    <title>Photos of black labradors</title>
  </head>
  <body>
  <div vocab="https://schema.org/" typeof="ImageObject">
    <h2 property="name">Black labrador puppy</h2>
    <img alt="Black labrador puppy" property="contentUrl" src="https://example.com/photos/1x1/black-labrador-puppy.jpg" /><br />
    <span property="license"> https://example.com/license</span><br />
    <span property="acquireLicensePage">https://example.com/how-to-use-my-images</span>
  </div>
  <br />
  <div vocab="https://schema.org/" typeof="ImageObject">
  <h2 property="name">Adult black labrador</h2>
  <img alt="Adult black labrador" property="contentUrl" src="https://example.com/photos/1x1/adult-black-labrador.jpg" /><br />
  <span property="license"> https://example.com/license</span><br />
  <span property="acquireLicensePage">https://example.com/how-to-use-my-images</span>
  </div>
  </body>
</html>

微資料


<html>
  <head>
    <title>Photos of black labradors</title>
  </head>
  <body>
    <div itemscope itemtype="https://schema.org/ImageObject">
    <h2 itemprop="name">Black labrador puppy</h2>
    <img alt="Black labrador puppy" itemprop="contentUrl" src="https://example.com/photos/1x1/black-labrador-puppy.jpg" /><br />
    <span itemprop="license"> https://example.com/license</span><br />
    <span itemprop="acquireLicensePage">https://example.com/how-to-use-my-images</span>
    </div>
    <br />
    <h2 itemprop="name">Adult black labrador</h2>
    <div itemscope itemtype="https://schema.org/ImageObject">
    <img alt="Adult black labrador" itemprop="contentUrl" src="https://example.com/photos/1x1/adult-black-labrador.jpg" /><br />
    <span itemprop="license"> https://example.com/license</span><br />
    <span itemprop="acquireLicensePage">https://example.com/how-to-use-my-images</span>
    </div>
  </body>
</html>

結構化資料類型定義

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

如果您使用結構化資料來指定可申請授權的圖片,您必須為圖片加入 license 屬性,才能顯示「可申請授權」標記。建議您一併新增 acquireLicensePage 屬性 (如有這項資訊)。

必要屬性
contentUrl URL

實際圖片內容的網址。Google 會使用 contentUrl 判斷授權所適用的圖片。

license URL

這個網址所指向的網頁說明了規範圖片使用方式的授權。舉例來說,這可能是您在網站上提供的條款及細則,或是 BY-NC 4.0 等創用 CC 授權 (如適用)。

建議屬性
acquireLicensePage URL

這個網址所指向的網頁,為使用者提供了如何申請該圖片授權的相關資訊。以下舉幾個例子說明:

  • 該圖片的結帳頁面,使用者可在當中選取特定解析度或使用權限
  • 說明您聯絡方式的一般頁面

IPTC 相片中繼資料

您也可以直接在圖片中嵌入 IPTC 相片中繼資料。您必須為圖片加入「Web Statement of Rights」欄位,才可顯示「可申請授權」標記。如果您有 Licensor URL 欄位的資訊,建議一併新增。

必要屬性
Web Statement of Rights

這個網址所指向的網頁,說明了規範圖片使用方式的授權,以及視需要提供的其他版權資訊。舉例來說,這可能是您在網站上提供的條款及細則,或是 BY-NC 4.0 等創用 CC 授權 (如適用)。

建議屬性
Licensor URL

這個網址所指向的網頁,為使用者提供了如何申請該圖片授權的相關資訊。Licensor URL必須是Licensor物件的屬性,而不是圖片物件的屬性。 以下舉幾個例子說明:

  • 該圖片的結帳頁面,使用者可在當中選取特定解析度
  • 說明您聯絡方式的一般頁面

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

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

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

首次部署結構化資料後

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

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

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

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

定期分析流量

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

疑難排解

如果無法順利在 Google 圖片中導入圖片授權,請參考下列資源。