Google 画像検索の画像ライセンス

ウェブサイト上の画像にライセンス情報を指定すると、Google 画像検索で画像のサムネイルに「ライセンス可」バッジが表示されます。これにより、その画像のライセンス情報が得られることがわかります。タップすると、画像ビューアでライセンスを確認し、その画像の使用に関する詳細を知ることができます。

Google 画像検索の「ライセンス可」バッジ

機能の提供状況

この機能はモバイルとパソコンのどちらにも対応しており、Google 検索を利用できるすべての地域と言語でご利用いただけます。

ウェブページと画像を準備する

Google が画像を検出してインデックスに登録できるようにするには、次のようにします。

構造化データまたは IPTC 写真メタデータを追加する

どの画像がライセンス可能であるかを Google に伝えるには、サイト内のライセンス可能な各画像に構造化データまたは IPTC 写真メタデータを追加します。同じ画像が複数のページにある場合は、画像が表示される各ページの各画像に構造化データまたは IPTC 写真メタデータを追加します。

画像にライセンス情報を追加する方法は 2 つあります。Google に次のいずれか 1 つの形式で情報を提供すれば、「ライセンス可」バッジが表示されるようにできます。

  • 構造化データ: 構造化データとは、画像と、画像がマークアップとともに表示されるページとの関連付けです。構造化データは、画像が使用されるすべてのインスタンスに追加する必要があります。画像が同じである場合も同様です。
  • IPTC 写真メタデータ: IPTC 写真メタデータは画像自体に埋め込みます。画像とメタデータは、そのまま別のページに移動させることができます。IPTC 写真メタデータは、画像ごとに 1 つだけ埋め込む必要があります。

次の図は、Google 画像検索でライセンス情報がどのように表示されるかを示しています。

Google 画像検索でライセンス メタデータのどの部分が表示されるかを示すコールアウト
  1. 画像の使用を管理するライセンスについて記述するページの URL。この情報は、Schema.org license プロパティまたは IPTC の Web Statement of Rights フィールドと合わせて指定します。
  2. 画像のライセンスを取得する方法が記述されている場所を示すページの URL。この情報は、Schema.org acquireLicensePage プロパティまたは(Licensor の)IPTC Licensor URL フィールドと合わせて指定します。

構造化データ

特定の画像がライセンス可能であることを Google に知らせる方法としては、たとえば構造化データ フィールドを追加します。構造化データは、ページに関する情報を提供し、ページ コンテンツを分類するための標準化されたデータ形式です。構造化データを初めて使用する場合は、構造化データの仕組みについてをご覧ください。

構造化データの作成、テスト、リリースの概要は次のとおりです。ウェブページに構造化データを追加するための手順ガイドについては、構造化データの Codelab をご覧ください。

  1. 必須プロパティを追加します。ページ上の構造化データを配置する場所について詳しくは、JSON-LD 構造化データ: ページでの挿入場所をご覧ください。
  2. 構造化データに関する一般的なガイドラインを遵守します。
  3. リッチリザルト テストでコードを検証します。
  4. 構造化データが含まれているページを数ページ導入し、URL 検査ツールを使用して、Google でページがどのように表示されるかをテストします。Google がページにアクセスでき、robots.txt ファイル、noindex タグ、またはログイン要件によってページがブロックされていないことを確認します。ページが正常に表示される場合は、Google に URL の再クロールを依頼できます。
  5. 今後の変更について Google への情報提供を続けるには、サイトマップを送信することをおすすめします。これは、Search Console Sitemap API で自動化できます。

単一の画像

以下に、ライセンス可能な画像が 1 つだけ表示されているページの例を示します。

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>

microdata


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

microdata


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

構造化データタイプの定義

ImageObject の完全な定義については、schema.org/ImageObject をご覧ください。

構造化データを使用してライセンス可能な画像を指定する場合は、画像が「ライセンス可」バッジと合わせて表示されるように、license プロパティを含める必要があります。情報がある場合は、acquireLicensePage プロパティを追加することもおすすめします。

必須プロパティ
contentUrl URL

実際の画像コンテンツの URL。Google は contentUrl を使用して、ライセンスが適用される画像を判定します。

license URL

画像の使用を管理するライセンスについて記述するページの URL。たとえば、ウェブサイトの利用規約のページを指定できます。該当する場合は、クリエイティブ・コモンズ ライセンス(例: BY-NC 4.0)にすることもできます。

推奨プロパティ
acquireLicensePage URL

画像のライセンスを取得する方法が記述されているページの URL。次に例を示します。

  • ユーザーが解像度や使用権を選択できる、画像のチェックアウト ページ
  • 問い合わせ方法を示す一般的なページ

IPTC 写真メタデータ

別の方法として、IPTC 写真メタデータを画像内に直接埋め込むこともできます。画像が「ライセンス可」バッジと合わせて表示されるようにするには、Web Statement of Rights フィールドを指定する必要があります。該当する情報があれば、Licensor URL フィールドを追加することもおすすめします。

必須プロパティ
Web Statement of Rights

画像の使用を管理するライセンス、およびその他の権利情報を記述するページの URL。たとえば、ウェブサイトの利用規約のページを指定できます。該当する場合は、クリエイティブ・コモンズ ライセンス(例: BY-NC 4.0)にすることもできます。

推奨プロパティ
Licensor URL

画像のライセンスを取得する方法が記述されているページの URL。Licensor URL は、画像オブジェクトのプロパティではなく、Licensor オブジェクトのプロパティである必要があります。 次に例を示します。

  • ユーザーが解像度を選択できる、画像のチェックアウト ページ
  • 問い合わせ方法を示す一般的なページ

Search Console でリッチリザルトを監視する

Search Console は、Google 検索におけるページのパフォーマンスを監視できるツールです。Search Console に登録していなくても Google 検索結果に表示されますが、登録することにより、Google がサイトをどのように認識しているかを把握して改善できるようになります。次の場合は Search Console を確認することをおすすめします。

  1. 構造化データを初めてデプロイした後
  2. 新しいテンプレートをリリースした後やコードを更新した後
  3. トラフィックを定期的に分析する場合

構造化データを初めてデプロイした後

ページがインデックスに登録されたら、関連するリッチリザルトのステータス レポートを使用して、問題がないかどうかを確認します。有効なページが増え、エラーや警告が増えていない状態が理想的です。構造化データに問題が見つかった場合の手順は次のとおりです。

  1. エラーを修正します
  2. 公開 URL の検査を行い、問題が解決したかどうかを確認します。
  3. ステータス レポートを使用して検証をリクエストします。

新しいテンプレートをリリースした後やコードを更新した後

ウェブサイトに大幅な変更を加えた場合は、構造化データのエラーや警告が増加しないかどうか監視します。
  • エラーが増加した場合は、新しく公開したテンプレートが正常に機能していないか、既存のテンプレートの動作に問題が生じていることが原因と考えられます。
  • 有効な項目が減少している(エラーの増加と一致しない)場合は、ページに構造化データが埋め込まれていない可能性があります。URL 検査ツールを使用して問題の原因を特定します。

トラフィックを定期的に分析する場合

パフォーマンス レポートを使用して Google 検索のトラフィックを分析します。このデータから、検索でページがリッチリザルトとして表示される頻度、ユーザーがページをクリックする頻度、検索結果におけるページの平均掲載順位がわかります。Search Console API を使用して、このデータを自動的に取得することもできます。

トラブルシューティング

Google 画像検索に画像ライセンスを実装する際に問題が発生した場合は、以下のリソースを確認してください。