web-dev-qa-db-fra.com

Recadrage des images et référencement

J'ai donc une page avec un tas d'images avec des tailles très variables. De plus, la mise en page de la page est telle que les images ont toutes la forme de carreaux carrés, un simple redimensionnement causera donc des images déformées. Ce que je faisais auparavant, c’est lorsque les utilisateurs téléchargent des images, je les redimensionne et les découpe correctement, puis affiche la nouvelle image en tant que vignette et charge l’image complète lorsque l’utilisateur clique dessus. Cependant, je viens de me rendre compte que le problème est lié au référencement, car Google va explorer les vignettes et coller les vignettes sur Google Images au lieu des images complètes. Existe-t-il un moyen d'afficher une image recadrée/redimensionnée mais Google Image doit-il afficher l'intégralité de l'image? Je peux faire quelque chose avec les CSS en utilisant une div et un débordement: caché, mais j'imagine que la performance serait assez mauvaise. Aucune suggestion?

Merci!

PS J'ai vu ceci ( = Make Google index l'image réelle et non la vignette ), mais dans mon cas, les utilisateurs téléchargent en permanence des images, et la base de données d'images est en constante évolution et assez volumineuse (en milliers), alors sitemap sera assez difficile à manier ..

seocssimagesgoogle-image-search
4
user1181950

Le truc que j'utilise pour cela est avec les images de fond:

<div style="background-image: url('imageA.jpg');"></div>
<div style="background-image: url('imageB.jpg');"></div>
<div style="background-image: url('imageC.jpg');"></div>

div{
    background-position: center center; /* or sometimes center top */
    width:  100px;
    height: 100px;
}

Désormais, lorsque vous redimensionnez les images, la taille minimale ou la largeur minimale doit être de 100 pixels. Je pense que Google détectera les images, mais je ne suis pas sûr à 100% (Google peut en voir beaucoup).

En fin de compte, le plus important est que vos utilisateurs restent sur votre page. Il s’agit d’une solution très conviviale.

1
Martijn

Désactivez l'URL de la vignette avec le fichier robots.txt (à l'aide de UserAgent ci-dessous) et configurez un sitemap image pour qu'il ne contienne automatiquement que les URL de l'image aux images en taille réelle.

User-agent: Googlebot-Image
Disallow: /images/thumbs*

La directive Disallow doit contenir le chemin d’URL correct qui correspond à toutes les images miniatures.

1
zigojacko