Pinterest-pins voorbereiden met HTML-code

Wist je dat je veel meer invloed hebt op hoe anderen een Pinterest-pin van jouw site bewaren dan je misschien zou denken?

Je hebt een goede blogpost geschreven. Check. Mooie afbeeldingen erbij gemaakt en netjes voorzien van ALT-tekst. Check. Een goede pin-afbeelding gemaakt. Check. En ook een pinbeschrijving met Pinterest-zoekwoorden er in. Check. Je blogpost is helemaal klaar om het te gaan maken op Pinterest, toch?

Helaas bewaren je bezoekers niet automatisch de beste afbeeldingen voor Pinterest. Ze kunnen bijvoorbeeld een liggende afbeelding kiezen of ze bewaren een pin zonder goede pinbeschrijving. In dit bericht laat ik je zien hoe je, door het toevoegen van attributen, je bezoekers kunt helpen de juiste afbeeldingen met de juiste beschrijvingen te bewaren. Hiervoor duiken we in HTML, maar laat je niet afschrikken, ik wijs je stap-voor-stap de weg.

Pinterest-pins voorbereiden

Door je Pinterest-pins op deze manier voor te bereiden, is de kans veel groter dat je pins, die bewaard worden door anderen, het goed gaan doen op Pinterest. Voor nieuwe pins is de pinbeschrijving namelijk erg belangrijk, anders weet Pinterest niet waar de pin over gaat. En je weet waarschijnlijk ook wel dat staande afbeeldingen beter opvallen dan liggende. In dit bericht komen de volgende onderwerpen aan de orde:

HTML-tags en -attributen simpel uitgelegd
Een afbeelding een pinbeschrijving meegeven
De mogelijkheid om een afbeelding te pinnen uitzetten
Een andere afbeelding laten pinnen
De pin naar een andere pagina laten verwijzen
Geen Pinterest bewaarknop tonen als men er met de muis overheen gaat
De afbeeldingen laten bewaren als repin
Pinterest-attributen

HTML-tags en -attributen simpel uitgelegd

Websites zijn geschreven in HTML. Dit is de codetaal die webpagina’s opmaakt en ervoor zorgt dat tekst (en plaatjes) aanklikbaar zijn. Met de handige editors die je tegenwoordig hebt (bijvoorbeeld WordPress), hoef je maar weinig van HTML te weten om een website te maken en te beheren. Maar soms als je iets net wat anders wil, is het wel handig om wat van HTML te weten.

In WordPress heb je een tab Visueel en Tekst, op de pagina Bericht bewerken. Bij Tekst staat de HTML-code. In Blogger kun je kiezen voor Opstellen en HTML. Het spreekt natuurlijk voor zich dat je bij HTML de HTML-code vindt.

HTML maakt gebruikt van tags. Dit is tekst die tussen de kleiner dan (<) en groter dan (>) tekens staat. De tag die belangrijk is voor je Pinterest-pins is de img-tag. In zijn meest simpele vorm ziet die er zo uit:

<img src="adres_van_afbeelding.jpg" />

“src” is een attribuut van de img-tag. Een tag kan meerdere attributen hebben, bijvoorbeeld hoogte, breedte en alt-tekst:

<img src="adres_van_afbeelding.jpg" width="600" height="800" alt="alt tekst"/>

En ook een aantal Pinterest-attributen. Die voeg je dus toe door in de img-tag te gaan staan en hier het attribuut met een waarde (dat wat tussen de aanhalingstekens staat) toe te voegen, per afbeelding. Hieronder zal ik verschillende attributen bespreken en voorbeelden laten zien.

Een afbeelding een pinbeschrijving meegeven

Met data-pin-description kun je een pinbeschrijving meegeven aan een afbeelding. Een goede pinbeschrijving bevat zoekwoorden, bestaat uit twee tot drie zinnen en een paar hashtags. Een pinbeschrijving kan uit maximaal 500 tekens bestaan (waarvan er 75-100 in de grid view getoond worden). Om de pinbeschrijving via HTML toe te voegen aan een afbeelding kopieer je het volgende stukje code:

data-pin-description=””

en plak je deze ín de img-tag:

<img src="adres_van_afbeelding.jpg" data-pin-description="" />

NB er kunnen dus nog meer attributen in de img-tag staan, laat deze vooral staan. Ik heb src als voorbeeld toegevoegd, omdat die er altijd staat.

Vervolgens vul je de pinbeschrijving in tussen de aanhalingstekens. Dit kan inclusief hashtags.

<img src="adres_van_afbeelding.jpg" data-pin-description="Dit is de pinbeschrijving met zoekwoorden. Deze tekst zal in de beschrijving bij een Pinterest pin komen. #pinterest #pins" />

De mogelijkheid om een afbeelding te pinnen uitzetten

Heb je liever niet dat een afbeelding op Pinterest bewaard wordt (bijvoorbeeld je header-afbeelding of als je een een round-up post hebt gemaakt en afbeeldingen van anderen ge-embed hebt), dan kun je dat instellen. De afbeelding zal dan niet verschijnen in het scherm waar je een afbeelding kunt kiezen zodra je op de Pinterest-browserbewaarknop drukt. Ook verschijnt er geen Pinterest-bewaarknop zodra je over de afbeelding gaat met je muis.

De methode is niet helemaal waterdicht, want als je een pin maakt via de pinmaker en je vult een URL in via Bewaren vanaf website, dan kun je uit alle afbeeldingen kiezen. Tailwind neemt deze informatie wel over en toont ook geen Schedule-knop, maar hoe dat met andere Pinterest-planner zit, weet ik niet.

In ieder geval ziet het attribuut er zo uit:

data-pin-nopin=”true”

Kopieer het bovenstaande stukje code en plak het in de img-tag van de afbeelding die niet bewaard mag worden (op Pinterest):

<img src="adres_van_afbeelding.jpg" data-pin-nopin="true" />

Een andere afbeelding laten pinnen

De volgende optie is superhandig om ervoor te zorgen dat mensen lange, verticale afbeeldingen op Pinterest bewaren in plaats van de horizontale, liggende afbeeldingen die je misschien mooier vindt in je blogpost. Die kun je nog steeds blijven gebruiken, maar je verwijst gewoon naar de pinafbeelding in de code. Zodra men dan de afbeelding wil bewaren, door bijvoorbeeld op de pinbutton te drukken die op de afbeelding verschijnt zodra je er met je muis overheen gaat, wordt de lange afbeelding hiervoor in de plaats getoond.

Zorg ervoor dat de lange Pinterest-afbeelding al ergens op je site staat en kopieer de afbeeldings-URL. Dit is de bestandsnaam, inclusief bestandsextensie, bijvoorbeeld:

naam_lange_afbeelding.jpg

Dit kun je ook in HTML-code doen. Het is de tekst die tussen de aanhalingstekens bij het src-attribuut van de lange Pinterestafbeelding staat.

Vervolgens typ je

data-pin-media=””

in de img-tag van je (liggende) afbeelding, waarvan je wilt dat er een andere Pinterestafbeelding bij bewaard wordt:

<img src="adres_van_liggende_afbeelding.jpg" data-pin-media="" />

En plak je de gekopieerde afbeeldings-URL tussen de aanhalingstekens:

<img src="adres_van_liggende_afbeelding.jpg" data-pin-media="naam_lange_afbeelding.jpg" />

De liggende afbeelding zal nu niet meer in het overzicht van de Pinterest-browserbewaarknop getoond worden. Zodra men op de Pinterest-bewaarknop op de afbeelding klikt, pakt Pinterest de lange afbeelding.

De pin naar een andere pagina laten verwijzen

Voor deze optie kan ik niet echt een goed voorbeeld bedenken, maar als jij een goed gebruik ervoor weet, laat het dan weten in de opmerkingen onder dit bericht. Met het attribuut data-pin-url kun je de pin naar een andere pagina laten verwijzen dan de pagina waar de afbeelding op staat (die wordt normaal automatisch overgenomen).

Het attribuut ziet er zo uit:

data-pin-url=””

en in de code zo:

<img src="adres_van_liggende_afbeelding.jpg" data-pin-url="andere_url.html" />

Geen Pinterest bewaarknop tonen als men er met de muis overheen gaat

Soms wil je dat er geen Pinterest-bewaarknop verschijnt als je met de muis over een afbeelding gaat. Dit kan bijvoorbeeld het geval zijn bij hele kleine afbeeldingen, bijvoorbeeld social media logo’s, waardoor het onmogelijk wordt om op de afbeelding te klikken, omdat steeds de bewaarknop tevoorschijn komt. Dan kun je data-pin-no-hover gebruiken. Kopieer het attribuut:

data-pin-no-hover=”true”

En plak hem in de img-tag:

<img src="adres_van_liggende_afbeelding.jpg" data-pin-no-hover="true" />

De afbeeldingen laten bewaren als repin

Wil je dat een afbeelding op Pinterest bewaard wordt als repin, in plaats als een nieuwe pin, dan kun je data-pin-id gebruiken. Ik ben er nog niet helemaal uit of dit een goed idee is. Repins zijn goed voor de engagement van een pin, maar als gebruikers een afbeelding van je site als nieuwe pin bewaren, geeft dit ook een sterk signaal af dat ze je content goed vinden. Kies zelf maar. Je doet het in ieder geval als volgt:

Kopieer en plak de URL van de pin die je als bron voor de repin wilt instellen. Dit doe je dus door naar de pin in je browser te gaan. Zorg dat je de close-up versie van je pin te pakken hebben. De URL zou er ongeveer zo uit moeten zien: https://nl.pinterest.com/pin/241083386279847368/ In ieder geval eindigend op pin/heelveelcijfers. Plak deze URL tussen de aanhalingstekens bij:

data-pin-id=””

Plak vervolgens het hele attribuut en de waarde in de img-tag:

<img src="adres_van_liggende_afbeelding.jpg" data-pin-id="https://nl.pinterest.com/pin/241083386279847368/" />

Pinterest-attributen

Hoe je deze Pinterest-attributen gaat gebruiken is natuurlijk aan jou. Het is handig dat het kan, maar natuurlijk ook meer werk. Op de developers pagina van Pinterest staan trouwens nog meer attributen die je kunt gebruiken. Als je WordPress gebruikt, dan kun je ook een plugin installeren, bijvoorbeeld Meta for Pinterest of WP Tasty (affiliate link). Deze plugins zullen niet alle attributen bevatten, maar in ieder geval wel de pinbeschrijving en de optie om het pinnen bij bepaalde afbeeldingen uit te zetten.

Ik ben erg benieuwd wat je van dit bericht vindt. Zelf was ik erg enthousiast toen ik achter deze opties kwam. Als er iets niet helemaal duidelijk is, wil ik je graag helpen om het op te lossen. Dus laat gerust een reactie achter.

Wil je meer Pinterest-tips ontvangen? Schrijf je dan nu in voor mijn nieuwsbrief:

Bewaar voor later op Pinterest: