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. 新增必要屬性。如要瞭解應在網頁上的何處插入結構化資料，請觀看「JSON-LD 結構化資料：網頁上的插入位置」影片。
  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="http://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="http://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>
單一網頁上有多張圖片

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

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="http://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="http://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="http://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="http://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 圖片中導入圖片授權，請參考下列資源。