So erstellst du versteckte Pinterest-Bilder bei Squarespace
Pinterest ist im Jahr 2020 auf Frischekur. Das bedeutet: Noch nicht gesehene Pins erleben Aufschwung und werden deutlich prominenter gezeigt als “alte Pins”. Das war früher ganz anders.
Deswegen ist es nicht nur eine gute Idee, deine Blogposts mit Grafiken zu versehen, die für Pinterest optimiert sind. Sondern: Am besten hat jeder Post sogar mehrere für Pinterest optimierte Bilder. Allerdings sieht es nicht übermäßig schön aus, wenn der ganze Post mit hochformatigen Bildern vollgestopft ist.
Die Lösung: Versteckte Bilder, die man nur sieht, wenn man die Pinterest-Browsererweiterung hat. Damit erreichst du die Powernutzer unter den Pinnern und hältst gleichzeitig deinen Blogpost aufs Wesentliche konzentriert und visuell schön elegant (ziemlich gute Kombination, wenn du mich fragst).
In diesem Artikel zeige ich dir, wie du solche versteckten Pinterest-Bilder bei Squarespace einrichtest!
Verwandter Artikel: So optimierst du deine Website für Pinterest
👉 Ständig frische Tipps für deine Squarespace-Website? Abonniere jetzt meinen Youtube-Kanal mit laufend neuen Tutorials! 🎥
Ooh, Pinterest!
Vor ein paar Jahren noch absolut unbekannt, aber inzwischen zu einer ziemlich gehypten Plattform geworden - und zwar zurecht. Blogs und Websites dadurch zu promoten funktioniert nämlich eins a.
Jetzt zeige ich dir also, wie du Bilder in deine Posts (oder Seiten) einfügst, die man zwar pinnen kann, “normale” Nutzer aber gar nicht sehen.
Wenn dein Besucher aber auf die Pin-Erweiterung klickt, sieht er mehr als nur das Hauptbild:
Wenn du bei diesem Blogpost auf die Pinterest-Erweiterung klickst, findest du noch ein Bild - nämlich diese blaue Pinterest-optimierte Grafik links. Von dieser Art kannst du auch mehrere einfügen.
So. Nun zum ersten Schritt.
Als Allererstes musst du die Bilder für die Inhalte erstellen, die du mit den unsichtbaren Grafiken versehen möchtest.
Natürlich kannst du alle Bilder für Pinterest benutzen, aber am besten funktionieren hochformatige Bilder im Verhältnis von 2:3.
Wenn du solche (z.B. mit dem kostenlosen Tool Canva*) erstellt hast, kannst du loslegen.
👉 Du startest gerade erst? Teste Squarespace hier 14 Tage lang gratis & hol dir mit dem Code VICTORIA10 10% Rabatt auf dein erstes Jahr (Das ist natürlich Werbung für meinen Liebling Squarespace)
Tipp: Ganz neu richten wir für dich als Blogleser alternativ sogar einen special 20%-Rabatt ein. → Bekommst du hier.
Warum das Bilder-Verstecken eine super Sache ist
Wenn du dir meinen Blog anguckst, wirst du feststellen, dass alle meine Grafiken mit Titel drin im Hochformat erscheinen. Tja. Ich habe meine eigene Seite tatsächlich komplett pinterestisiert.
Aber: Wenn du hochformatige Bilder nicht so toll findest, keine Sorge. Dann ist dieser Artikel genau richtig für dich.
Du kannst nämlich einfach nur quadratische oder Querformatsbilder verwenden - aber im “Hintergrund” immer auch ein paar versteckte Hochformatsbilder für Squarespace einbinden.
In vielen Fällen sehen Bilder im Querformat auch einfach besser aus. Und sie brauchen nicht so viel Platz auf deiner Seite.
So versteckst du deine Pinterest-Bilder bei Squarespace
Dazu musst du ein minimales bisschen Code verwenden. Keine Sorge: Den kannst du hier ganz einfach übernehmen, von daher ist das keine große Sache.
So. Jetzt zu den Schritten, die du zum Verstecken der Bilder angehen musst. Du kannst das in einer einfachen und in einer etwas ausführlicheren Variante machen.
Bei der einfachen Variante nimmst du einfach nur dein Bild und versteckst es. Bei der etwas ausführlicheren Variante unterlegst du das Bild noch mit einer Pinterest-Beschreibung und einem SEO-Text für bessere Auffindbarkeit bei Google.
Einfache Variante: Nur Bild verstecken
Als Erstes brauchst du natürlich einen Blogpost oder eine Seite mit Text, auf der du deine versteckten Pinterestbilder einfügen willst.
Zuerst fügst du aber nur die Bilder hinzu, die nicht für Pinterest optimiert sind und ganz normal sichtbar bleiben sollen.
Jetzt geht es an das erste versteckte Bild. Lade bei Squarespace dein Bild hoch und setze es auf einer anderen Seite ein. Das kannst du zum Beispiel machen, indem du eine nicht-sichtbare Seite erstellst und das Bild dort ganz einfach hochlädst.
Jetzt gehst du in einem anderen Browser auf die Seite mit dem Bild und klickst mit einem Rechtsklick auf “Bilderlink kopieren” oder “Bilderadresse kopieren”, um den Link des Bildes herauszufinden.
Dein Link wird etwas Langes sein und hat vorne einen Anfang mit https://images.squarespace-cdn.com/content/.
Jetzt gehst du in den Blogpost oder die Seite, auf der du das versteckte Bild platzieren möchtest.
Du fügst an beliebiger Stelle (ganz unten hat sich allerdings bewährt, dann gibt es keine Lücken) einen “Code”-Block hinzu.
Dann setzt du den folgenden Code beim Code-Block ein:
<div style="display: none;"><img src="Hier kommt dein langer Bildlink hinein"></div>
Du musst “Hier kommt dein langer Bildlink hinein” dann natürlich mit dem Link von oben ersetzen. Die Gänsefüßchen müssen bleiben.
Jetzt kannst du den Post oder die Seite veröffentlichen.
Die versteckte Seite, die du nur zum Hochladen des Bildes verwendet hast, kannst du löschen. Musst du aber nicht.
Fertig! Jetzt kannst du das Ganze mit der Pinterest-Browsererweiterung testen.
Ausführlichere Variante: SEO- und Pinterest-Beschreibungen hinzufügen
Dir ist es nicht genug, das Bild zu verstecken - sondern du willst noch weiter optimieren? Das kannst du, indem du deine Bilder auch noch mit Alt-Texten (super für Google!) und Pin-Beschreibungen (natürlich super für Pinterest!) versiehst.
Dann musst du einfach statt des kleinen fetten Code-Schnipsels von oben diesen hier verwenden:
<div style="display:none">
<img src="Hier musst du deinen Bildink einsetzen" alt="Hier solltest du einen SEO-freundlichen Alt-Text platzieren" data-pin-description="Hier kommt deine Pinterest-Beschreibung rein" />
</div>
Die deutschen Texte innerhalb der Gänsefüßchen musst du dann noch ersetzen. Deine Pinterest-Beschreibung kann am Ende übrigens auch ein paar Hashtags enthalten.
Mehrere Bilder verstecken
Um mehrere Bilder zu verstecken, setzt du sie einfach hintereinander in den Code-Block, behältst vorne und hinten aber nur einmal die Bereiche mit “div”. Das geht bei beiden Versionen. Für die ausführliche Variante würde das also so aussehen:
<div style="display:none">
<img src="Hier musst du deinen Bildink 1 einsetzen" alt="Hier solltest du einen SEO-freundlichen Alt-Text platzieren" data-pin-description="Hier kommt deine Pinterest-Beschreibung rein" />
<img src="Hier musst du deinen Bildink 2 einsetzen" alt="Hier solltest du einen SEO-freundlichen Alt-Text platzieren" data-pin-description="Hier kommt deine Pinterest-Beschreibung rein" />
</div>
Der Code funktioniert übrigens auch für einige andere Systeme wie Shopify* oder Wordpress.
Teste am Ende am besten einmal selbst mit der Pinterest-Browsererweiterung, ob sich deine Bilder auch anzeigen. Wenn nicht: In diesem Blogpost sind auch versteckte Bilder, daran kannst du gucken, wie es aussehen müsste.
Tadaa - fertig!
Wenn du Fragen hast, schreib sie einfach unten in die Kommentare.
Diese Artikel könnten dich auch interessieren: