web-dev-qa-db-fra.com

Pourquoi Google indexe les vignettes et non les grandes images?

J'ai une page pleine de vignettes, quand on clique dessus, il ouvre l'image en taille réelle dans un nouvel onglet.

Le problème est que Google indexe uniquement les photos miniatures et laisse les grandes images auxquelles il est lié.

J'ai besoin du texte de l'attribut alt de la miniature pour accéder à l'image d'origine lors d'une recherche dans Google Images.

Mon code est ci-dessous:

<div class="thumb">
  <a href="images/wallpaper.jpg">
    <img src="images/wallpaper-small.jpg" target="_blank" alt="wallpaper-description">
  </a>
</div>

Et ceci illustre le fonctionnement de ma page:

enter image description here


Qu'est ce que je fais mal? que peut-on faire pour indexer les grandes images et laisser les vignettes?

seogooglehtmlindexing
4
MEGA

Le problème est que Google ne voit qu'une seule balise ALT, donc l'autre image est sans description et ne se classera pas dans les résultats de recherche.

Si vous utilisez une lightbox, vous devez de préférence coder ou utiliser une console compatible avec données HTML5 -, par exemple: *

<div class="thumb">
    <img src="example.jpg" data-src="example-thumbnail.jpg" alt="example">
</div>

Si vous utilisez uniquement CSS et HTML, vous POUVEZ utiliser l'une des 3 méthodes auxquelles je peux penser :

Méthode 1: Scrap les vignettes et redimensionner l'image plus grande à la taille du pouce:

<!-- HTML -->
<div class="thumbnail">
    <img src="example.jpg" alt="example">
</div>

/* CSS */
.thumbnail img {
    max-width: 200px;
}
.thumbnail img:hover {
    max-width: 100%;
}

Vous pouvez même pimenter cela en utilisant un Lightbox CSS pure

Méthode 2: Lien vers une page valide plutôt qu'une image:

<!-- Embedded Small -->
<a href="/path/to/example.html" title="View Image Full Size">
    <img src="example.jpg" alt="thumbnail of example">
</a>

Méthode 3: Afficher et masquer:

<!-- Both Images -->
<div class="thumbnail">
    <img src="example.jpg" alt="example">
    <img src="example-thumbnail.jpg" alt="example thumbnail">
</div>

/* CSS */
.thumbnail img:first-child {
    max-width: 200px;
}
.thumbnail img:last-child {
    max-width: 100%;
    display: none;
}
.thumbnail:hover img:first-child {
    display: none;
}
.thumbnail:hover img:last-child {
    display: block;
}
4
Simon Hayter

Pour vos images, vous pouvez appliquer les données structurées en tant que propriété ImageObject. Quelque chose comme ceci: to rdfa 

<div class="thumb" vocab=http://schema.org/ typeof=ImageObject>
<a href="images/wallpaper.jpg" title="wallpaper-description" property=contentUrl><img src='images/wallpaper-small.jpg' alt="wallpaper-description" property=thumbnailUrl></a></div>

vers microdonnées 

<div class="thumb" itemscope itemtype="http://schema.org/ImageObject">
<a href="images/wallpaper.jpg" title="wallpaper-description" itemprop="contentUrl"><img src='images/wallpaper-small.jpg' alt="wallpaper-description" itemprop='thumbnailUrl'></a>

Cochez cette option sur testeur Google pour les données structurées.

2
nikant25

L'attribut target doit figurer sur le lien et non sur l'image. Ce n'est pas votre problème de toute façon. Le vrai problème est que Google n'a aucune idée du contenu de vos images.

Le vrai moyen de résoudre ce problème est de créer un sitemap pour image. Le la documentation de Google est ici . En gros, cela vous permet de dire à Google le contenu de l'image, la légende, et de lui donner un titre. Cela permet non seulement à Google de mieux l'indexer, mais également de mieux répondre aux recherches.

1
Itai