Pinterest-Datenattribute und Meta-Tags verwenden

Pinterest ist ziemlich wichtig. In der Welt der Blogs und des E-Commerce droht es, Google als wichtigste Suchmaschine zu verdrängen. Das ist die Welt, aus der ich komme, daher hatte ich viele Gelegenheiten, mit den Datenattributen und Meta-Tags von Pinterest zu arbeiten. Diese kleinen Markup-Elemente geben Website-Betreibern die Kontrolle darüber, wie ihre Bilder und ihre Website auf Pinterest präsentiert werden und was "gepinnt" werden kann und was nicht.

Bevor wir uns mit den Details der Tags und Attribute befassen, gebe ich Ihnen einen Überblick darüber, wie Pinterest-Nutzer Pins erstellen und welche Arten von Bildern für Pinterest gut funktionieren.

Wie Leute pinnen

Pinterest-Nutzer erstellen thematische Boards in ihren Pinterest-Konten und "pinnen" Bilder aus dem Web auf diese Boards, indem sie Browsererweiterungen, das "Pinmarklet"-Bookmarklet, "Pin It"-Schaltflächen auf der Seite oder die Freigabefunktion auf mobilen Browsern verwenden. Sobald ein Bild auf einem Board gespeichert ist, wird es als "Pin" bezeichnet.

Wenn ein Pinterest-Nutzer einen Pin zu einem seiner öffentlichen Boards hinzufügt, können andere Pinterest-Nutzer den Pin sehen, zum Ursprung des Pins klicken, den Pin "liken" oder ihn auf einem eigenen Board "re-pinnen". Repinnen ist ähnlich wie Retweeten – jeder Repin wird auf dem Original-Pin gezählt, und jeder, der dem Konto des Repanners folgt, kann den Repin in seinem Pinterest-Homefeed sehen.

Pinbare Bilder

Die Freigabetools von Pinterest erkennen Bilder im Format .jpg, .png, .gif, .bmp und .tiff mit einer Mindestgröße von 80x80px. Mit Ausnahme von GIFs werden Bilder für die Anzeige auf Pinterest in .jpg konvertiert. Animierte .gif-Bilder sind auf Pinterest abspielbar.

Pinterest ignoriert SVG-Bilder, Bilder kleiner als 80x80px, Hintergrundbilder, Base64-Bilder und Bilder in Pseudo-Element-Inhalten.

Obwohl Pinterest SVG nicht erkennt, erkennt es Rasterbilder innerhalb eines picture-Elements. Sie können beliebige Pinterest-Bildattribute an das img-Element innerhalb eines picture-Elements anhängen, und die "Pin It"-Schaltflächen werden diese korrekt verarbeiten.

Pinterest-Datenattribute für Bilder

Es gibt vier Pinterest-spezifische Datenattribute für Bilder. Diese Attribute ermöglichen es Ihnen, den Weiterleitungslink für Pinterest-Bilder zu steuern, eine Standardbeschreibung festzulegen, ein alternatives Bild anzugeben und neue Pins von einer Website mit Pins im Pinterest-Konto des Website-Betreibers zu verknüpfen. Hier ist eine Aufschlüsselung, wie jedes Attribut funktioniert.

data-pin-url

<img src="blog-post-image.jpg" data-pin-url="http://www.example.com/blog-post-permalink.html">

Dieses Attribut ermöglicht es Ihnen, den Weiterleitungslink für Pins festzulegen. Standardmäßig werden Pins mit der URL der Seite verknüpft, auf der sich der Nutzer befand, als er den Pin erstellte. Das ist oft in Ordnung, aber es gibt Fälle, in denen es besser ist, den Pin mit einer anderen Seite zu verknüpfen. Zum Beispiel wird ein Pin, der von einem Beitrag auf der Homepage eines Blogs erstellt wurde, standardmäßig mit der Homepage des Blogs verknüpft. Wenn ein Pinterest-Nutzer diesen Pin Wochen oder Monate später anklickt, landet er auf der Homepage, wo der Beitrag, den er sehen möchte, längst verschwunden ist. Dieses Attribut ermöglicht es Ihnen, den Pin stattdessen mit dem Permalink des Beitrags zu verknüpfen.

data-pin-description

<img src="blog-post-image.jpg" data-pin-description="Greatest Pin of all time, #A+">

Dieses Attribut ermöglicht es Ihnen, eine Standard-Pinterest-Beschreibung für ein Bild festzulegen. Pinterest-Nutzer können die Beschreibung eines Pins jederzeit bearbeiten, daher ist es in der Praxis eher eine "vorschlagene" Beschreibung.

Pinterest sucht zuerst nach dem data-pin-description-Attribut, um das Beschreibungsfeld zu füllen. Wenn das Attribut nicht gesetzt ist, sucht es nach dem Bildtitel, dann nach dem Alt-Text. Wenn keines davon gesetzt ist, verwendet es den Seitentitel als Standardbeschreibung.

Das Gute an diesem Attribut ist, dass es Ihnen ermöglicht, die Beschreibung eines Bildes für Pinterest mit Hashtags, Schlüsselwörtern oder @-Benutzernamen anzupassen, ohne die Zugänglichkeit zu beeinträchtigen, indem Sie diesen Kram in den title- oder alt-Text packen.

data-pin-media

<img src="blog-post-image.jpg" data-pin-media="high-res-blog-post-image.jpg">

Dieses Attribut ermöglicht es Ihnen, eine alternative Version eines Bildes für Pinterest anzugeben. Sie können es verwenden, um Pinterest auf eine bessere Qualitätsversion Ihres Bildes oder auf ein anderes Bild zu verweisen. Einige Websites verwenden dieses Attribut, um ein für Pinterest optimiertes Verbundbild zu präsentieren, das alle Bilder auf der Seite enthält.

Demo: Drücken Sie die "Pin It"-Schaltfläche, um das alternative Verbundbild zu sehen, das im data-pin-media-Attribut verlinkt ist. Die Beschreibung des Verbundbildes wird mit dem data-pin-description-Attribut festgelegt und enthält einen Hashtag.

Siehe den Pen Pinterest data-pin-media demo von CSS-Tricks (@css-tricks) auf CodePen.

data-pin-id

<img src="blog-post-image.jpg" data-pin-id="ID NUMBER HERE">

Dieses Attribut gibt dem "Social Proof" einen Schub, indem es die Repin-Anzahl auf den Pins des Website-Betreibers erhöht. Es ist etwas schwieriger zu implementieren als die anderen Pinterest-Datenattribute, unter anderem, weil es keine Möglichkeit gibt, es zu automatisieren.

Um data-pin-id zu verwenden, müssen Sie zuerst einen Pin des Bildes im Konto des Website-Betreibers erstellen. Nachdem der Pin erstellt wurde, können Sie die Pin-ID-Nummer vom Ende der Pin-URL auf Pinterest abrufen. Die ID eines Pins ist in diesem Screenshot hervorgehoben

Sobald Sie die ID-Nummer haben, können Sie sie dem Bild im data-pin-id-Attribut hinzufügen. Alle nachfolgenden Pins dieses Bildes, die von dieser Seite erstellt werden, werden als "Repin" des Pins des Website-Betreibers gezählt. Wenn dieses Attribut in Kombination mit dem data-pin-url-Attribut verwendet wird, wird jeder Pin dieses Bildes von *jeder* Seite der Website als Repin gezählt.

Rich Pins

Rich Pins sind erweiterte Pins, die Pinterest und seinen Nutzern mehr Informationen über eine Seite liefern. Es gibt fünf verschiedene Arten von Rich Pins, aber alle haben ein paar Dinge gemeinsam, die sie von regulären Pins im Feed und in Suchergebnissen unterscheiden.

Alle Rich Pins zeigen das Favicon der Quellseite und den Namen der Quellseite über einem fetten Titel an. Dieses Bild zeigt einen Article Rich Pin, wie er im Pinterest-Feed zu sehen ist (links) im Vergleich zu einem Pin von derselben Seite, der erstellt wurde, bevor Rich Pins aktiviert wurden (rechts).

Pinterest unterstützt für die meisten Pins mindestens zwei Markup-Typen; die Anforderungen variieren je nach Pin-Typ. Die unterstützten Formate sind Open Graph, Schema.org, hRecipe oder oEmbed.

Pinterest übernimmt Rich Pins Markup oder Endpunkte nicht automatisch von einer Website. Die Website muss einen Markup-Check über den Rich Pin Validator bestehen. Sobald die Website den Validator bestanden hat, können Sie sie zur Genehmigung für Rich Pins einreichen. Die Genehmigungszeit variiert von ein paar Tagen bis zu etwa zwei Wochen.

Viele E-Commerce-Plattformen haben das Markup für Product Rich Pins integriert. Auch WordPress-Plugins wie Yoast WordPress SEO bieten Optionen, um Rich Pins einfach zu machen. Bevor Sie beginnen, Markup zu Ihrer Website hinzuzufügen, lohnt es sich, es im Validator zu testen, um zu sehen, ob Sie bereits alles haben, was Sie für die Genehmigung benötigen.

Hier ist eine Übersicht über die fünf Arten von Rich Pins.

Place Pins

Place Pins Markup fügt dem Pin in Suchergebnissen ein Kartenzeiger-Symbol hinzu und am Ende des Pins eine Foursquare-verlinkte Karte und eine optionale Telefonnummer.

Erkannte Formate: Open Graph oder Schema.org
Dokumentation: https://developers.pinterest.com/rich_pins_place

Recipe Pins

Recipe Pins Markup gibt Pinterest Zugriff auf Details wie Zutaten und Kochzeit und zeigt diese auf dem Pin an. Pinterest verwendet diese Informationen, um Rezepte in der Suche anzuzeigen. Zum Beispiel könnten Recipe Rich Pins einem Pinterest-Nutzer, der nach "schnellen vegetarischen Rezepten" sucht, helfen, Ihr 10-Minuten-Linsensuppen-Rezept zu finden, auch wenn die Wörter "schnell" und "vegetarisch" nicht in der Basisbeschreibung des Pins enthalten sind.

Erkannte Formate: Schema.org oder hRecipe
Dokumentation: https://developers.pinterest.com/rich_pins_recipe

Article

Viele Leute nutzen Pinterest als "Später lesen"-Service. Article Rich Pins haben eine fette Überschrift und eine zusätzliche erweiterte Beschreibung, die den Lesern hilft, mehr über Ihren Artikel oder Blogbeitrag zu erfahren, bevor sie darauf klicken. Diese erweiterte Beschreibung ist nicht vom Benutzer bearbeitbar, daher folgt sie Ihrem Artikel, wohin er auch immer auf Pinterest gelangt.

Erkannte Formate: Open Graph oder Schema.org
Dokumentation: https://developers.pinterest.com/rich_pins_article

Product Pins

Product Rich Pins zeigen den Preis und die Verfügbarkeit eines Produkts an. Wenn ein Produkt im Angebot ist, wird der reduzierte Preis auf der Detailseite des Pins hervorgehoben.

Nutzer, die sich für Pinterest-Preisbenachrichtigungen anmelden, erhalten eine E-Mail, wenn ein Artikel, den sie gepinnt haben, im Angebot ist.

Erkannte Formate: oEmbed, Open Graph, Schema.org
Dokumentation: https://developers.pinterest.com/rich_pins_product

App Pins (nur iOS Apps)

App Rich Pins unterscheiden sich von den anderen Arten von Rich Pins – es werden keine Meta-Tags benötigt. Um App Rich Pins zu aktivieren, erstellen Sie einen Pin innerhalb der Pinterest-App und verlinken Sie ihn mit der Seite Ihrer App im App Store. Pinterest kümmert sich um den Rest.

Dokumentation: https://business.pinterest.com/en/blog/get-more-downloads-new-app-pins

Wie man nicht gepinnt wird

Das nopin-Meta-Tag und das Bildattribut von Pinterest ermöglichen es Ihnen, das Erstellen von Pins aus Ihren Bildern website-weit, seiten- oder bildspezifisch zu verhindern.

Meta-Tag: Sperrung von Pinterest für die gesamte Website oder die gesamte Seite

<meta name="pinterest" content="nopin" />

Dies ist die Atombombe von Pinterest – wenn Sie dieses Meta-Tag im head Ihrer Website oder Seite hinzufügen, können keine der Bilder über die offiziellen Freigabekanäle gepinnt werden.

Standardmäßig zeigt das Pinterest-Fenster diese Nachricht an, wenn jemand versucht, von einer Seite mit dem nopin-Meta-Tag zu pinnen.

„Diese Seite erlaubt keine Pins auf Pinterest. Bitte kontaktieren Sie den Eigentümer bei Fragen. Danke für Ihren Besuch!“

Sie können dies durch Ihre eigene Nachricht als description-Attribut ersetzen.

<meta name="pinterest" content="nopin" description="your custom nopin message here" />

Bildattribut: Bildspezifische Pinterest-Sperrung

<img src="image.png" nopin="nopin">

Wenn Sie das Pinnen für einige Ihrer Bilder verhindern möchten, aber nicht für alle, können Sie das nopin-Bildattribut verwenden.

Um das Pinnen eines einzelnen Bildes zu blockieren, fügen Sie nopin="nopin" zum Bildelement hinzu.

Blockieren des Hover-Buttons mit dem "Nohover"-Meta-Tag

<meta name="pinterest" content="nohover" />

Standardmäßig fügt die Browsererweiterung von Pinterest in der oberen linken Ecke eines Bildes beim Überfahren mit der Maus einen "Pin It"-Button hinzu, wenn alle drei folgenden Bedingungen erfüllt sind:

1. Das Bild ist in einem pinbaren Format.
2. Das Bild ist mindestens 80x80px groß.
3. Das Bild hat nicht das Attribut nopin.

Der Hover-Button sieht so aus

Dieses Tag deaktiviert nur den Hover-Button. Es verhindert *nicht*, dass Pins von der Seite erstellt werden – das können nur das nopin-Meta-Tag und -Attribut.

Blockieren von Rich Pins

Wenn Sie für Rich Pins zugelassen sind, aber Rich Pins auf einer Seite blockieren möchten, können Sie dieses Meta-Tag im head der Seite hinzufügen.

<meta name="pinterest-rich-pin" content="false" />

Support, Eigenheiten und Probleme

Der Browser-Share von Chrome unter iOS ignoriert die data-pin-Attribute und die automatische Befüllung der Beschreibung durch den "Pin It"-Button auf der Seite. Er respektiert jedoch das nopin-Attribut.

Pinterests eigener Support für seine Meta-Tags und Datenattribute ist lückenhaft, aber verbessert sich. Rich Pin-Daten werden nicht immer auf Pins angezeigt, auch wenn die gesamte Markup vorhanden ist. Auch das data-pin-description-Attribut wird manchmal ignoriert, besonders wenn ein Bild bereits vor dem Hinzufügen des Attributs auf Pinterest gepinnt wurde.