it-swarm.com.de

Warum indiziert Google Thumbnails und keine großen Bilder?

Ich habe eine Seite voller Miniaturansichten. Wenn Sie darauf klicken, wird das Bild in voller Größe in einem neuen Tab geöffnet.

Das Problem ist, dass Google nur die Miniaturansichten indiziert und die damit verknüpften großen Bilder belässt.

Ich benötige das alt Attribut des Miniaturbilds, um beim Durchsuchen in Google Images zum Originalbild zu gelangen.

Mein Code ist unten:

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

Und dies ist ein Beispiel dafür, wie meine Seite funktioniert:

enter image description here


Was mache ich falsch? Was kann getan werden, um große Bilder zu indizieren und Thumbnails zu hinterlassen?

4
MEGA

Das Problem ist, dass Google nur ein ALT-Tag sieht, daher ist das andere Bild ohne Beschreibung und wird nicht in den Bildsuchergebnissen eingestuft.

Wenn Sie eine Lightbox verwenden, sollten Sie vorzugsweise eine codieren oder verwenden, die HTML5-Daten - unterstützt, z. B .: *

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

Wenn Sie nur CSS und HTML verwenden, können Sie _ eine von drei Methoden verwenden, die mir einfallen :


Methode 1: Verschrotte die Thumbnails und verkleinere das größere Bild auf Thumbnails:

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

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

Sie können dies sogar mit einem Pure CSS lightbox aufpeppen.


Methode 2: Link zu einer gültigen Seite anstatt eines Bildes:

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

Methode 3: Anzeigen und Ausblenden:

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

Für Ihre Bilder können Sie die strukturierten Daten als Eigenschaft ImageObject anwenden. Etwas in der Art: 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>

zu Mikrodaten

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

Aktivieren Sie dies bei Google-Tester für strukturierte Daten.

2
nikant25

Das Zielattribut sollte sich auf dem Link und nicht auf dem Bild befinden. Das ist sowieso nicht dein Problem. Das eigentliche Problem ist, dass Google keine Ahnung hat, was in Ihren Bildern ist.

Der eigentliche Weg, dies zu beheben, ist die Erstellung einer Image-Sitemap. Die Google Dokumentation ist hier . Grundsätzlich können Sie Google mitteilen, was im Bild enthalten ist, die Beschriftung, und ihm einen Titel geben. Dies ermöglicht Google nicht nur eine bessere Indexierung, sondern auch eine bessere Relevanz für die Suche.

1
Itai