web-dev-qa-db-fra.com

Comment gérer différentes tailles d'images et URL avec le référencement

Je crée mon propre CMS et je dois gérer des images de différentes tailles.

Je stocke toutes les informations de mon image dans une base de données. Pour chaque image, j'ai:

  • un nom de fichier (avec extension)
  • un titre
  • un attribut alt
  • dimensions

Les images peuvent être utilisées de différentes manières:

  • tondu
  • carrelé
  • dimensions exactes
  • une seule dimension (par exemple: hauteur 200px et largeur automatique)

En ce moment, mon URL vers cette image ressemble à ceci:

http://example.com/uploads/{id}/{mode}/{size_x}-{size_y}/{filename}.{ext}

Un exemple réel:

http://example.com/uploads/tile/24/200-200/my-picture.png
http://example.com/uploads/crop/24/200-200/my-picture.png

L'URL est assez longue. Mais j'ai besoin de toutes les informations fournies.

Est-ce un problème pour le référencement? Quelles sont les solutions pour optimiser le référencement des images de plusieurs tailles?

Edit: informations canoniques supprimées

seourlimagescanonical-url
6
Hugo H

Servir plusieurs images de taille n'est pas un gros problème de référencement, mais j'essaie de m'en tenir à deux tailles:

  • la vignette
  • grand

De cette façon, je peux avoir des images plus petites dans les pages, mais les grandes images sont classées dans la recherche d'images. Pour optimiser la recherche d'images, vous devez:

  • Utilisez des images volumineuses (au moins 600 pixels dans la direction la plus petite, mais pas trop grandes pour qu’elles ne puissent pas tenir à l’écran ou pour des tailles multiples). Google dit que la "qualité d'image" est un facteur de classement. La principale composante de ce problème est la taille, autant que je sache.
  • Le pagerank d'images est important - les images ont un meilleur classement lorsqu'elles sont utilisées dans des pages avec un pagerank élevé. L'utilisation d'images sur plusieurs pages est également utile.
  • Vous pouvez utiliser <img src= ou <a href= pour passer le pagerank aux images et les amener à se classer. Cela signifie que vous pouvez faire quelque chose comme <a href="large.jpg"><img src="thumb.jpg"></a> pour que seule la vignette se trouve dans la page, mais la grande image apparaît lorsque vous cliquez dessus et est celle qui se classe dans la recherche d'image.

Si vous avez plusieurs images de grande taille, Google en choisira une pour la classer dans la recherche d'images. Ce sera probablement le plus grand avec un PageRank décent. Si vous utilisez des images de tailles différentes sur des pages différentes, vous en diluez un peu votre PageRank. Vous pouvez utiliser l'astuce de liaison ci-dessus pour atténuer ce problème.

Autant que je sache, il n’existe pas de pénalités de contenu en double pour différentes tailles d’image. Les images sont largement copiées et redimensionnées sur le Web. Google essaie de détecter le contenu en double et d'afficher une seule copie de chaque image (quelle que soit sa taille) dans les résultats de la recherche, mais cela ne semble pas avoir d'effets néfastes sur les images en double.

2
Stephen Ostermiller

À mon sens, rel="canonical" est un attribut de niveau de page conçu pour les pages HTML (et les PDF). L'objectif est d'aider les moteurs de recherche à identifier l'URL préférée pour votre contenu.

Vous pouvez trouver deux bonnes discussions:

RL canoniques de Google

Relatif de Moz = Confus? Réponses à votre Rel = Questions canoniques

0
jeffatrackaid

Ceci est géré via l'attribut HTML 5 SrcSet qui permet à une seule image d'avoir différentes sources. Le problème est que la prise en charge du navigateur est toujours à la traîne. Par conséquent, vous devez utiliser des polyfills ou des cales pour le faire fonctionner correctement.

En ce qui concerne votre CMS, je vous suggérerais d’avoir un original, puis de redimensionner les autres images de manière dynamique. Si vous êtes sur ASP.net, consultez imageresizer.net, si vous êtes sur une plate-forme php, alors timthumb.php pourrait être quelque chose qui peut faire le travail. Faites redimensionner les images côté serveur, puis mettez-les en cache sur le disque (afin de ne pas les redimensionner à chaque fois).

Lorsque vous créez votre balisage, utilisez ensuite srcset ou des images d'arrière-plan css3 avec des requêtes multimédia pour fournir des images de tailles différentes à différents utilisateurs.

0
Frank