web-dev-qa-db-fra.com

Comment forcer Google et d'autres robots à sélectionner des images réelles et non des vignettes?

Par exemple, s'il existe un site Web d'achat en ligne avec des milliers de miniatures de produits et que vous cliquez dessus, il affiche la véritable image rétine/Full HD dans une fenêtre contextuelle. Dans ce scénario, comment pouvons-nous nous assurer que Google ou d'autres robots ne doivent explorer que l'image rétine/HD et non la vignette lorsqu'une personne effectue une recherche dans les images Google?

seoweb-crawlersimages
3
Ravi Maniyar

Liez les vignettes aux images pour les utilisateurs pour lesquels JavaScript n'est pas activé. Comme ça:

<a href="full-image.jpg"><img src="thumb-nail.jpg"></a>

Tant que les utilisateurs peuvent voir la totalité de l'image en cliquant, vous pouvez désactiver l'événement click sur le lien à l'aide de JavaScript sans encourir de pénalité de la part de Google.

Google traite les liens vers les images de la même façon que l'image complète dans la page elle-même. La liaison obtiendra l'image complète à classer dans la recherche d'image et l'associera à la bonne page de votre site.

Vous pouvez également ajouter aux images miniatures un en-tête empêchant Google d’indexer celles-ci:

X-Robots-Tag: noindex

Si vous avez le serveur Apache, vous pouvez utiliser une directive dans . Htaccess comme:

<FilesMatch ".*thumb.*\.(gif|jpg|jpeg|png)$">
    Header set X-Robots-Tag noindex
</FilesMatch>
3
Stephen Ostermiller

Appliquer des images sensibles:

  • tiliser des tailles relatives pour les images. Par exemple:

    img{max-width:100%}

  • Améliore les images avec srcset pour les périphériques à haute résolution. L'attribut srcset ​​améliore le comportement de l'élément img, facilitant ainsi la fourniture de plusieurs fichiers image pour différentes caractéristiques de périphérique. Srcset, similaire à la fonction CSS d’images définie en CSS, permet au navigateur de choisir la meilleure image en fonction des caractéristiques de l’appareil, par exemple en utilisant une image 2x sur un écran 2x, et éventuellement une image 1x sur. un appareil 2x sur un réseau à bande passante limitée.

  • Direction artistique dans les images sensibles avec image . Pour modifier les images en fonction des caractéristiques du périphérique, également appelé direction artistique, utilisez l'élément picture. Cet élément définit une solution déclarative permettant de fournir plusieurs versions d’une image en fonction de différentes caractéristiques, telles que la taille, la résolution, l’orientation et plus encore. Utilisez l'élément image lorsqu'une source d'image présente plusieurs densités ou lorsqu'un modèle réactif dicte une image quelque peu différente sur certains types d'écrans. Par exemple: L'élément <picture> de Google.

  • Images de taille relative. Lorsque la taille finale de l’image n’est pas connue, il peut être difficile de spécifier un descripteur de densité pour les sources d’image. Cela est particulièrement vrai pour les images qui couvrent une largeur proportionnelle du navigateur et qui sont fluides, en fonction de la taille du navigateur.

Au lieu de fournir des tailles et densités d’images fixes, vous pouvez spécifier la taille de chaque image fournie en ajoutant un descripteur de largeur ainsi que la taille de l’élément d’image, permettant ainsi au navigateur de calculer automatiquement la densité de pixels effective et de choisir la meilleure image à télécharger.

<img src="yourimage-200.jpg" sizes="200vw" srcset="yourimage-100.jpg 100w, yourimage-200.jpg 200w, yourimage-400.jpg 400w, yourimage-800.jpg 800w, yourimage-1000.jpg 1000w, yourimage-1400.jpg 1400w, yourimage-1800.jpg 1800w" alt="your image alternative info">

Source: images de base Web de Google.

Appliquez des données structurées à vos images:

  • Pour obtenir une liste de produits ou de catégories, appliquez le type ItemList + Informations sur le schéma.

  • Pour les images, appliquez le type ImageObject. Ici, pour vos vignettes, vous pouvez appliquer la propriété vignette. Pour la valeur de cette propriété, vous pouvez utiliser votre valeur à partir d'images de taille relative, exemple:

    img src="yourimage-200.jpg" sizes="200vw" srcset="yourimage-100.jpg 100w

Vous pouvez utiliser les propriétés width et height ​​pour l'image principale et pour la vignette. Il sera également utile d’utiliser la propriété contentUrl.

Cela aidera les moteurs de recherche et les navigateurs à déterminer l'image la plus pertinente pour chaque appareil (d'où provient la demande).

1
nikant25