Damit Ihre Seite für Pinterest optimal aufbereitet ist, sollte für jeden Beitrag und jedes Produkt ein pinnbares Bild zur Verfügung gestellt werden. Doch manchmal passt das für Pinterest optimale Format nicht in das Layout. Hier finden Sie 5 verschiedene Möglichkeiten Bilder auf der Webseite zu „verstecken“.

5 Möglichkeiten, wie Sie einen Pin auf der Webseite verstecken

Für jede der vorgestellten Varianten müssen Sie zuallererst ein Bild, das für Pinterest aufbereitet ist, in Ihre Mediathek hochladen. Achten Sie schon dabei darauf, dass Sie der Datei einen sprechenden Namen und einen Alt-Text hinzufügen. Die meisten dieser Möglichkeiten sind speziell für WordPress-Nutzer.

Variante #1 – mit einem einfachen HTML Code

Für diese Methode müssen Sie in den HTML-Code der Webseite und den Bildcode manuell mit einem zusätzlichen Code versehen.

Mit dem div-Style „display-none“, den Sie in der Textansicht eingeben, kann Ihr Bild gepinnt werden, ist aber im Beitrag selbst nicht zu sehen. Suchen Sie einfach im HTML-Code das Bild, das Sie verstecken möchten, geben Sie vor dem Bild <div style=“display: none;“> ein und am Ende </div>. Achten Sie auf die Verwendung der richtigen Anführungszeichen!

So sieht dies dann an einem Beispiel aus:

<div style=“display: none;“><img class=“aligncenter size-full wp-image-1358″ src=“https://www.kaleidocom.at/wp-content/uploads/2017/05/Source.jpg“ alt=“So prüfen Sie, welche Pins von Ihrer Webseite bereits gepinnt wurden.“ width=“1870″ height=“888″ /></div>

Das ist die bekannteste und einfachste Methode mit einem Nachteil: das Bild wird dennoch im Hintergrund geladen und hat dadurch natürlich Auswirkungen auf die Performance Ihrer Webseite. Manche WordPress-Themes haben auch ein CSS, das diesen Befehl überschreibt. Dennoch ist es für die meisten Webseitenbetreiber der schnellste Weg.

Variante #2 – mit CSS

Diese Variante ist schon ein wenig komplexer, da Sie in das Style-Sheet Ihrer Webseite etwas einfügen müssen. Sie ist aber sauberer als die vorangegangene Möglichkeit. Bevor Sie dies ausprobieren, machen Sie unbedingt vorher ein Backup Ihrer Webseite. Falls etwas schiefgeht, haben Sie dies dann als Sicherheit. Oder bitten Sie einen Programmierer Ihres Vertrauens um Unterstützung.

Viele Themes haben ein Feld, in das Sie einen Custom CSS Code einfügen können. Sollte das nicht der Fall sein, suchen Sie Ihr style.css und geben Sie den nächsten Schritt dort direkt ein.

Schritt 1

Fügen Sie diesen Code in Ihrem Custom CSS Feld oder in Ihrem style.css ein.

auch interessant:  Epische Pinterest Profilbeschreibung - so geht's

.hiddenpinimage {
opacity: 0;
position: absolute;
top: 0;
left: 0;
height: 0px;
width: 0px;
}

Dieser Code sorgt dafür, dass Sie eine zusätzliche CSS-Klasse in Ihrem Theme definieren, die Sie dann den Bildern zuweisen können.

Schritt 2

Geben Sie das Wort hiddenpinimage im definierten Bild in den Einstellungen unter CSS-Klasse direkt ein. Hier sehen Sie ein Beispiel.

Variante #3 – Bild hinter dem Bild

Eine der charmantesten Varianten bietet ein spezieller Code, der von Pinterest direkt zur Verfügung gestellt wird. Mit diesem Code können Sie hinter jedes Bild ein anderes Bild legen, das nur dann erscheint, wenn der Pin-It-Button gedrückt wird oder über die Browser-Extension gepinnt wird. Sie können hiermit ein komplett anderes Bild zum Pinnen definieren oder eine bessere Auflösung anbieten.

Für diese Variante müssen Sie den HTML-Code Ihres Bildes um data-pin-media=“https://IhreBILDURL“ erweitern. Dieser Codeteil sagt Pinterest – ebenso wie data-pin-description für die Beschreibung – dass dieses Bild zum Pinnen herangezogen werden soll.

Hier sehen Sie ein Beispiel:

<img class=“aligncenter size-full wp-image-3700″ src=“https://www.kaleidocom.at/wp-content/uploads/2019/02/Bild-verstecken-Hand-über-Notizblock.png“ data-pin-media=“https://www.kaleidocom.at/wp-content/uploads/2019/02/verstecken1.png“ alt=““ width=“1200″ height=“627″ />

Da Sie dies bei jedem Bild in Ihrem Beitrag nutzen können, ist es auch ideal, die querformatigen Headerbilder damit zu versehen, anstatt sie vom Pinnen auszuschließen. Ein Live-Beispiel sehen Sie in diesem Beitrag beim horizontalen Bild.

Variante #4 – mit dem Plugin Tasty Pins

Für bequeme WordPress Nutzer gibt es das kostenpflichtige Plugin Tasty Pins, das neben mehreren anderen Vorteilen für Pinterest auch eine einfache Möglichkeit bietet, ein spezielles Bild für Pinterest bereitzustellen.

Tasty Pins fügt Ihrem Beitrag eine Box hinzu, wo Sie einfach den Pin hochladen und damit ein eigenes Pinbild definieren.

Mit dem Plugin können Sie auch einfach Bilder vom Pinnen ausschliessen und eine separate Pinbeschreibung setzen.

Momentan kann leider nur ein einziges Bild pro Beitrag zusätzlich hochgeladen werden. Tasty Pins ist aber geeignet für Nutzer, die nicht selbst an Ihrem CSS und HTML-Code Änderungen vornehmen möchten.

Variante #5 – mit dem Plugin Shariff

Das Plugin Shariff ist ein DSGVO-konformes Plugin für WordPress und bietet neben Social Media-Sharing-Funktionen auch die Möglichkeit ein spezielles Bild für Pinterest zu hinterlegen. Es wurde entwickelt um datenschutzkonforme Teilen-Buttons zu ermöglichen.

Ein Bild für Pinterest zu definieren ist hiermit sehr einfach:

auch interessant:  Pinterest Video Pin

Welche Methode ein Bild zu verstecken ist die beste?

Darauf gibt es keine Antwort, die für alle gilt. Wollen Sie es möglichst einfach, dann nutzen Sie ein Plugin. Wollen Sie nicht an den Code, dann nutzen Sie ein Plugin. Denken Sie dabei immer daran, dass jedes Plugin auf die Performance Ihrer Seite geht.

Wenn Sie einen HTML-Code lesen können, nutzen Sie Variante 1 oder 3. Wenn Sie sich über CSS trauen, die Variante 2.

Wenn Sie kein WordPress-Nutzer sind, fallen die Plugin-Varianten für Sie leider weg. Dann sollten Sie ebenfalls 1, 2 oder 3 verwenden.

Manchmal funktionieren die Varianten 1-3 leider auch nicht auf allen Webseiten. Dies hängt von Ihrem CSS ab, das Sie im Einsatz haben.

Testen Sie die einzelnen Möglichkeiten und verraten Sie mir, welche Ihre favorisierte ist! 

Anmerkung zu einer oft gestellten Frage: Nach Aussagen von Google direkt, führt ein verstecktes Bild nicht zu einer Abstrafung. Penalties drohen nur bei verstecktem Text (z.B. weiß auf weiß).

Pin Hand ueber Notizblock Bild verstecken