web-dev-qa-db-fra.com

Comment changer quelle image du site Web est affichée dans les résultats de recherche Google?

Quelqu'un peut-il me dire comment Google décide quelle image utiliser lorsqu'il affiche une image avec les résultats de la recherche (comme c'est parfois le cas avec la recherche sur mobile)?

Si vous regardez ces résultats de recherche mobile…

… Et prenons comme exemple le résultat AliExpress.com, en inspectant le HTML vous pouvez voir que l'image utilisée par Google ne semble pas avoir de déclaration spéciale, etc. juste le premier fichier JPG qui apparaît dans le code HTML de cette page - je pensais donc que c’est peut-être la raison pour laquelle c’est l’image utilisée dans les résultats de recherche Google.

Cependant, lorsque vous consultez ces résultats de recherche pour mobile…

… Et considérons le résultat de Backpack Billboards, le HTML révèle que l'image utilisée est en fait la septième image déclarée dans le code HTML.

Quelqu'un peut-il expliquer comment Google détermine quelle image afficher? J'aimerais savoir si je peux ensuite contrôler quelle image est affichée pour mon site.

Mise à jour/Solution

Grâce aux réponses ci-dessous, c’est le code que j’ai ajouté à mon head HTML afin d’obtenir la vignette affichée dans Google lors de la recherche de panneaux d'affichage pour sac à dos :

<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

Le problème que vous avez cité est dû au fait que Google n'est pas en mesure de déterminer quelle est votre image principale et c'est pourquoi, il affiche de manière aléatoire une image sur cette page pour afficher sur le résultat SERP.

Cela dépend également de la requête de recherche que vous avez entrée et de la page (page de détails de l'offre, page de liste des offres, page d'accueil de la boutique du vendeur, etc.) affichée sur le résultat de la recherche.

Cependant, si je considère que la même page apparaît dans vos deux captures d'écran, voici des solutions que vous pouvez appliquer sur cette page.

Nous pouvons laisser le robot Google savoir ce que notre page "signifie" via balisage de données structuré. Nous devons "baliser" chaque élément de notre page afin que Google le comprend bien et donne ensuite de meilleurs résultats sur le SERP.

Vous pouvez marquer ce balisage de données structurées par programme dans l’un de ces trois formats

  1. JSON LD (recommandé car acceptable par Google, Yahoo, Bing et Yandex)

  2. Microdonnées

  3. RDFa

L'exemple de code JSON LD est déjà expliqué ci-dessus par L. Martin. Pour en savoir plus sur marquage JSON LD, cliquez ici.

Si vous souhaitez le faire rapidement, Google dispose également d'un outil structuré assistant de balisage des données que vous pouvez utiliser à partir des Google Webmasters.

Une fois cette opération effectuée, Google saura quelle image afficher sur la page de résultats de recherche.

Bonjour, après la discussion en commentaires, voici le code que vous pouvez essayer et expérimenter. J'ai vérifié dans l'outil de test de données structurées et cela fonctionne bien.

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

J'ai essayé de suivre

  1. Ajout de trois propriétés en tant que tableau sous un attribut "nom" de type "Produit"
  2. Ajout de trois propriétés en tant que tableau sous un attribut "marque" de type "Thing"
  3. Ajout de trois propriétés en tant que tableau sous un attribut "nom" de type "Organisation"

Ce script fonctionne dans l'outil de test de données structurées, cependant, il n'est pas sûr que ce soit la solution correcte selon votre requête. Essayez-le d'abord et laissez-moi savoir si cela fonctionne ou non.

4
Bhargav Joshi

Vous pouvez indiquer à Google quelle image vous souhaitez utiliser pour votre propriété à l'aide du balisage Schema.org. Voici un exemple rapide site Web de la société :

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

Il est maintenant beaucoup plus probable que la recherche de cette entreprise montre ce logo lorsque Google a besoin d’une image.

Si vous le faites pour page du produit , vous aurez besoin de ce balisage:

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

Vous pouvez ensuite tester la mise en œuvre à l'aide de cet outil pour vous assurer que Google la détecte:

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

Ils indiqueront également les propriétés manquantes dont ils ont besoin pour traiter les données de votre schéma.

6
L Martin

En tant que top contributeur de Google sur le forum d'aide de Webmaster Central, j'ai vu beaucoup de questions et de cas d'utilisation. Cette question spécifique sur la vignette concerne d’autres questions pour lesquelles Google peut se comporter de la même manière.

Ce que ces vignettes ne sont pas: D'après d'autres commentaires, ces vignettes ne sont pas:

  • Listes d'entreprises
  • Données structurées/extraits enrichis/json ou données de schéma
  • Une partie du graphe de connaissances
  • Partie de carrousels comme des articles de nouvelles/POI

A mon humble avis, les techniques derrière ces vignettes et les images A.I. de Google pour décider de les montrer ou lesquelles sont plus liées aux balises de titre et aux méta descriptions qu'aux données structurées/extraits riches. C'est pourquoi je vais commencer par une explication de base sur la manière dont les balises de titre et les méta-descriptions sont affichées. Et suivez cela avec les vignettes.

Tags de titre Vous pouvez définir une étiquette de titre, mais Google peut la modifier si le titre contient du spam, est identique à chaque page où il manque des informations pertinentes ou si Google peut déterminer un titre en fonction du contenu. qui est plus liée à la requête de recherche.

Meta description Vous pouvez définir une méta description. Encore une fois: s'il est pertinent, représente le contenu de la page et ​​est lié à la requête, Google affichera probablement votre méta description. Si Google pense pouvoir générer une description plus pertinente et plus attrayante, il indiquera sa propre méta description préférée.

Récemment, Google a augmenté la longueur de la description dans les résultats de recherche. Donc, fondamentalement, Google adapte/étend maintenant la plupart des méta-descriptions. La meilleure pratique pourrait être de laisser votre méta description vide, comme le fait Wikipedia.

Miniatures
Donc, fondamentalement, Google peut afficher des images, en particulier lorsque vous n’avez pas configuré les choses. Les vignettes que Google utilise dans un élément de résultat de recherche sont utilisées pour renforcer votre visibilité/représentation. En ce qui concerne ce que j'ai vu jusqu'à présent et comment Google devrait l'aborder, vous pouvez indiquer à Google une miniature pour indiquer ces conditions:

  • bien sûr, l'image doit être analysable et indexée, donc ne le faites pas empêcher ou bloquer l'analyse .
  • placé au début/dans le contenu principal de la page. Dans le passé, j'avais un site Web où j'avais un <img> à l'intérieur du premier <p>. Google vient d'utiliser cette image en miniature. Et ils ont même utilisé le texte alternatif dans leur version de méta-description (qui n’était pas très belle). Au moins, l'image était étroitement liée au contenu principal. Ils se renforcent mutuellement.
  • l'image doit être nique. Il semblerait étrange que Google affiche la même vignette (stock) pour chaque résultat de recherche de la première page.
  • l'image doit être liée à la requête de recherche et doit la représenter la. Lorsque je recherche "London Eye", Google parvient à générer une vignette de la tête-image de le 4ème article de cette page . Les images de tête des trois premiers articles ne montrent pas l'œil de Londres. Ces images n'ont même pas de texte alternatif et l'article s'intitule "croisière fluviale". Le contexte textuel n'est donc pas pris en compte. Je pense que nous pouvons assumer l'image A.I. fait beaucoup de travail ici. Les captures d'écran sont jointes ci-dessous.
  • visible au dessus du voe (sur le bureau). Je n'ai aucune preuve pour cela, ceci est une hypothèse. Mais je pense que cela aide beaucoup si l'image est visible dans l'outil d'extraction et de rendu de Google. Et l'indexé est encore basé sur le bureau, cette année, il passera probablement à la première indexation mobile. Je pense qu'il est important que l'image que vous souhaitez afficher sous forme de vignette soit l'une des premières images visibles pour les visiteurs.
  • utilisé dans les métadonnées opengraph] et dans le contenu principal de la page. Les métadonnées opengraphes. Comparez cela avec la méta description. Si votre og:image représente la page, est visible sur la page et est lié à la requête de recherche, pourquoi Google ne l'utilise-t-il pas pour générer sa vignette?.
  • utilisé dans un (valide ou invalide) balise méta ( exemple ) et dans le contenu principal de la page. La chose étrange de cet exemple est qu'il s'agit de la 3ème ou 4ème image du diaporama, mais que cela est mentionné dans une balise méta personnalisée. Peut-être que c'est la raison pour laquelle Google a choisi celui-ci pour générer un pouce.
  • en ignorant les données structurées. Les données structurées sont utilisées dans les carrousels pour les actualités, les produits, les articles, etc. Je n'ai vu aucune relation entre les données structurées et les vignettes à l'intérieur d'un élément de résultat de recherche.

Il n'y a pas vraiment de documentation claire à ce sujet, mais j'ai trouvé cet article de blog qui est lié à notre discussion ici: Résultats de Google sur les images en filigrane. . Les conclusions de Google concernant les vignettes sont au moins les suivantes:

  • Les utilisateurs préfèrent les images volumineuses de haute qualité (haute résolution, net).
  • Les utilisateurs sont plus susceptibles de cliquer sur les miniatures de qualité dans les résultats de recherche. Des images de qualité (encore une fois, haute résolution et mise au point) sont souvent meilleures avec la taille des vignettes.
  • Les fonctions distrayantes telles que les filigranes forts, le texte sur l'image et les bordures risquent de ternir l'image lorsqu'elle est réduite à la taille d'une miniature.

Mise à jour 25-12: Le camarade TC Barry Hunter m'a indiqué cette discussion sur Twitter où John Mueller indique que bloquer cette image n'est possible qu'avec le fichier robots.txt.

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

3
p3sn

Il devrait être en mesure de changer via Google Search Console. Vous pouvez mettre en surbrillance les données de votre page Web, y compris l'image représentant cette page/article à afficher dans Google SERP.

Cependant, ceci est juste un moyen de le changer dans Google Browser, je ne peux pas hésiter à le changer sur un autre navigateur.

1
Jakub Kliský

Accéder à la console de recherche Google >> Apparence de la recherche >>

  1. Données structurées
  2. Cartes riches
  3. Surligneur de données

Grâce à ceux-ci, vous pouvez personnaliser SERP résultats.

Et aussi vous voyez GMB. il existe de nombreuses ressources utiles sur la gestion de votre tableau de bord Google My Business. Pour illustrer

Modifier les informations de votre entreprise (faites défiler cette page et voir les informations sur les images)

Aide Google My Business

J'espère que cela t'aides

0
Mazharul Haq SEO