web-dev-qa-db-ja.com

Google検索結果に表示されるウェブサイトの画像を変更するにはどうすればよいですか？

検索結果に画像を表示するときに、Googleがどの画像を使用するかを決定する方法を教えてもらえますか（モバイル検索の場合のように）。

これらのモバイル検索結果を見ると…

…とAliExpress.comの結果を例として、 the HTML を調べることで、Googleで使用されている the image が特別な宣言などをしていないように見えることがわかります。そのページのHTMLに表示される最初のJPGだけです。そのため、Google検索結果で使用されるのは画像であると考えていたのかもしれません。

ただし、これらのモバイル検索結果を見ると…

…そして、Backpack Billboardsの結果を検討してください。 HTML は、使用されている image が実際にHTMLで宣言された7番目の画像であることを示しています。

だから誰がGoogleがどの画像を表示するかを決定する方法に光を当てることができますか？知りたいので、自分のサイトに表示する画像を制御できます。

更新/ソリューション

以下の回答のおかげで、これはbackpack billboardsを検索するときにGoogleに表示されるサムネイルを取得するためにhead HTMLに追加したコードです。

<script type="application/ld+json">
{
  "@context": "http://schema.org/",
  "@type": "Product",
  "name": "Regular Backpack Billboard",
  "image": [
    "https://backpackbillboards.com/wp-content/uploads/2017/12/backpack-billboards-1x1.jpg",
    "https://backpackbillboards.com/wp-content/uploads/2017/12/backpack-billboards-4x3.jpg",
    "https://backpackbillboards.com/wp-content/uploads/2017/12/backpack-billboards-16x9.jpg"
   ],
  "description": "Backpack Billboards feature a rechargeable battery which powers the internal LED lights providing a bright illuminated display for up to 8 hours.",
  "sku": "BPBB8",
  "brand": {
    "@type": "Thing",
    "name": "Backpack Billboards"
  },
  "offers": {
    "@type": "Offer",
    "priceCurrency": "USD",
    "price": "299.00",
    "priceValidUntil": "2020-11-11",
    "itemCondition": "http://schema.org/NewCondition",
    "availability": "http://schema.org/InStock",
    "seller": {
      "@type": "Organization",
      "name": "Backpack Billboards"
    }
  }
}
</script>
google-searchimagesserps
9
ban-geoengineering

あなたが引用した問題は、Googleはあなたのメイン画像を特定できないため、画像をランダムに選択しますそのページでSERP結果に表示します。

また、入力した検索クエリと、検索結果に表示されるページ（オファー詳細ページ、オファーリストページ、売り手のストアフロントページなど）によっても異なります。

ただし、両方のスクリーンショットに同じページが表示されていると考えると、ページに適用できる解決策があります。

Strucuted Data Markup。を使用してページの「意味」をGoogleクローラーに知らせることができます。==ページのすべての要素に「タグ」を付けて、Googleがそれをよく理解し、SERPで強化された結果を提供する必要があります。

この構造化データマークアップは、これらのいずれかでプログラム的にタグ付けできます つの形式

  1. JSON LD（Google、Yahoo、Bing、Yandexで受け入れられるため推奨）

  2. マイクロデータ

  3. RDFa

JSON LDのコード例は、すでにL Martinによって説明されています。 JSON LD製品マークアップの詳細についてはこちらをご覧ください。

すぐに実行したい場合、Googleには構造化された データマークアップ支援ツール があり、これはGoogleウェブマスターから使用できます。

完了すると、Googleは検索結果ページに表示する画像を認識します。

こんにちは、コメントで議論した後、試して試すことができるコードを以下に示します。構造化データテストツールでチェックしましたが、正常に機能しています。

<script type="application/ld+json">
{
  "@context": "http://schema.org/",
  "@type": "Product",
  "name": [
    "Regular Backpack Billboard",
    "Walking Billboards",
    "Human Billboards"
   ],
  "image": [
    "https://backpackbillboards.com/wp-content/uploads/2017/12/backpack-billboards-1x1.jpg",
    "https://backpackbillboards.com/wp-content/uploads/2017/12/backpack-billboards-4x3.jpg",
    "https://backpackbillboards.com/wp-content/uploads/2017/12/backpack-billboards-16x9.jpg"
   ],
  "description": "Backpack Billboards feature a rechargeable battery which powers the internal LED lights providing a bright illuminated display for up to 8 hours.",
  "sku": "BPBB8",
  "brand": {
    "@type": "Thing",
    "name": [
    "Regular Backpack Billboard",
    "Walking Billboards",
    "Human Billboards"
    ]
  },
  "offers": {
    "@type": "Offer",
    "priceCurrency": "USD",
    "price": "299.00",
    "priceValidUntil": "2020-11-11",
    "itemCondition": "http://schema.org/NewCondition",
    "availability": "http://schema.org/InStock",
    "seller": {
      "@type": "Organization",
      "name": [
    "Backpack Billboards",
    "Human Billboards",
    "Walking Billboards"
      ]
    }
  }
}
</script>

私はフォローしようとしました

  1. タイプ「製品」の属性「名前」の下に配列として3つのプロパティを追加しました
  2. タイプ「Thing」の属性「brand」の下に配列として3つのプロパティを追加しました
  3. タイプ「Organization」の属性「name」の下に配列として3つのプロパティを追加しました

このスクリプトは構造化データテストツールで動作しますが、クエリごとに正しいソリューションであるかどうかはわかりません。最初に試してみて、機能するかどうかを教えてください。

4
Bhargav Joshi

Schema.orgマークアップを使用して、プロパティに使用する画像をGoogleに示すことができます。簡単な 会社のWebサイト の例を次に示します。

<script type="application/ld+json">
{"@context" : "http://schema.org",
 "@type" : "Organization",  
  "name" : "Example Company",
  "url" : "https://www.example.org", 
  "logo": "https://www.example.org/images/my-logo.png" }
</script>

その会社を検索すると、Googleで画像が必要なときにそのロゴが表示される可能性が高くなります。

製品ページ でこれを行う場合、次のマークアップが必要です。

<script type="application/ld+json">
{"@type": "Product",
 "image": "http://example.org/product-image.png",
 "url": "http://example.org/my-products-url",
 "name": "Example Product Name"
 }
</script>

その後、このツールを使用して実装をテストし、Googleがそれを選択していることを確認できます。

https://search.google.com/structured-data/testing-tool

また、スキーマデータの処理に必要なプロパティが欠落していることも示します。

6
L Martin

ウェブマスターセントラルヘルプフォーラムのGoogleトップコントリビューターとして、多くの質問とユースケースを見てきました。サムネイルに関するこの特定の質問は、Googleが同様に動作できる他の質問に関連しています。

これらのサムネイルではないもの：他のコメントに基づくと、これらのサムネイルではありません：

  • ビジネスリスティング
  • 構造化データ/リッチスニペット/ JSONまたはスキーマデータ
  • ナレッジグラフの一部
  • ニュース記事/ POIのようなカルーセルの一部

私の謙虚な意見には、これらのサムネイルとA.I. Googleで表示するか、構造化データ/リッチスニペットよりもタイトルタグとメタディスクリプションに関連するものを選択します。そのため、タイトルタグとメタディスクリプションの表示方法の基本的な説明から始めます。そして、サムネイルでフォローアップします。

タイトルタグタイトルタグを設定できますが、タイトルにスパムが含まれている場合、関連する情報が欠落しているすべてのページで同じである場合、またはGoogleがコンテンツに基づいてタイトルを決定できる場合、Googleはそれを変更する場合がありますこれは、検索クエリにより関連しています。

メタの説明メタの説明を設定できます。繰り返しますが、関連する場合、ページのコンテンツを表しますandは検索クエリに関連します。おそらくGoogleはyourメタ説明を表示します。 Googleがより関連性が高く、より魅力的な説明を生成できると判断した場合、独自の優先メタ説明が表示されます。

最近、Googleは検索結果の説明の長さを増やしました。したがって、基本的にGoogleはほとんどのメタ記述をすでに適応/拡張しています。ウィキペディアのように、メタ記述を空のままにしておくことをお勧めします。

サムネイル
したがって、基本的にGoogleは画像を表示できます。特に設定しなかった場合は可能です。 Googleが検索結果アイテム内で使用するサムネイルは、可視性/表現の強化に使用されます。これまで見てきたことや、Googleがどのようにアプローチするかについて、次の条件でサムネイルを表示する方向にGoogleを向けることができます。

  • もちろん、画像はクロール可能であり、インデックスが付けられている必要があるため、 クロールを防止またはブロック しないでください。
  • ページの先頭/ メインコンテンツ内に配置されます。過去に、最初の<img>の中に<p>があるWebサイトがありました。 Googleはその画像をサムネイルとして使用しました。そして、彼らはメタ記述のバージョンでaltテキストを使用しました（それはあまり良く見えませんでした）。少なくとも画像はメインコンテンツと密接に関連していました。彼らはお互いを強化します。
  • 画像はniqueである必要があります。 Googleが最初のページのすべての検索結果に対して同じ（ストック）サムネイルを表示すると奇妙に見えます。
  • 画像は検索クエリに関連し、表現する必要があるである必要があります。 「ロンドンアイ」を検索すると、Googleは このページの4番目の記事 のヘッドイメージのサムネイルを生成します。最初の3つの記事のヘッドイメージは、ロンドンの目を示していません。これらの画像には代替テキストさえなく、記事のタイトルは「川クルーズ」なので、テキストの文脈は考慮されません。画像A.I.を想定できると思いますここで多くの仕事をしました。以下にスクリーンショットを添付します。
  • 可視誓約の上（デスクトップ上）。私はこれを証明していません。これは仮定です。しかし、画像がGoogleのfetch＆renderツールで表示されると、非常に役立つと思います。インデックス化されたものは現在でもデスクトップに基づいていますが、今年はおそらくモバイルファーストのインデックス化に移行するでしょう。サムネイルとして表示する画像は、訪問者に表示される最初の画像の1つであることが重要だと思います。
  • opengraph meta dataおよびページのメインコンテンツで使用されます。 Opengraphメタデータ。これをメタの説明と比較してください。 og:imageがページを表し、ページに表示され、検索クエリに関連している場合、Googleがこれを使用して親指を生成しないのはなぜですか。
  • （有効または無効）メタタグ（ 例 ）およびページのメインコンテンツで使用されます。この例の奇妙な点は、スライドショーの3番目または4番目の画像ですが、カスタムメタタグで言及されていることです。たぶんそれが、Googleが親指を生成するためにその1つを選択した理由です。
  • 構造化データを無視する。構造化データは、ニュース、製品、記事などのカルーセルで使用されます...構造化データと検索結果アイテム内のサムネイルとの関係は今まで見たことがありません。

明確なドキュメントはありませんが、ここでの議論に関連するこのブログ投稿を見つけました： Googleの透かし入り画像に関する調査結果 。少なくともサムネイルに関するGoogleの調査結果は次のとおりです。

  • ユーザーは、大きくて高品質の画像（高解像度、焦点が合っている）を好みます。
  • ユーザーは、検索結果で高品質のサムネイルをクリックする可能性が高くなります。高品質の画像（再び、高解像度で焦点が合っている）は、多くの場合、サムネイルサイズでより良く見えます。
  • 大きな透かし、画像上のテキスト、境界線などの注意散漫な機能は、サムネイルサイズに縮小したときに画像が乱雑に見える可能性があります。

更新25-12：Fellow TC Barry Hunterは このTwitterのディスカッション を指摘しました。JohnMuellerによると、この画像のブロックはrobots.txtでのみ可能です。

Screenshot search result London Eye on mobileExample for London Eye, using the River Cruise article image

3
p3sn

Google Search Consoleで変更できるはずです。 Google SERPに表示されるページ/記事を表す画像など、ウェブページのデータを強調表示できます。

ただし、これはGoogleブラウザで変更する方法に過ぎず、別のブラウザで変更することを気にすることはできません。

1
Jakub Kliský

Google Search Console >>検索の外観>>に移動します

  1. 構造化データ
  2. リッチカード
  3. データハイライター

これらにより、SERPの結果をカスタマイズできます。

また、GMBも表示されます。 Googleマイビジネスダッシュボードを管理する方法については、多くの優れたリソースがあります。説明する

ビジネス情報の編集 （このページを下にスクロールして、画像に関する情報を表示します）

Googleマイビジネスヘルプ

お役に立てれば

0
Mazharul Haq SEO