Hoe krijg ik de juiste afbeelding van Blogger naar Facebook?

26
mrt

Een vaak gestelde vraag is: Waarom komt er een verkeerde afbeelding mee wanneer ik mijn blogpost op Facebook deel?
Dit komt door de manier waarop Facebook zoekt naar afbeeldingen in een weblog. Wanneer Facebook geen afbeelding kan vinden dan gaat het op zoek naar een andere afbeelding, vaak is dit een afbeelding uit één van de geplaatste gadgets.

Kan ik dit voorkomen?
Jazeker, Facebook heeft een aantal eigen Open Graph meta tags. Wanneer je deze tags toevoegt aan een Blogger sjabloon dan stuur je Facebook de goede kant op.

Maak altijd eerst een back-up van de sjabloon …. voor het geval dat …

Het eerste wat moet gebeuren is: vertellen dat je Open Graph tags gaat gebruiken, hiertoe moet een onderstaande (in het rood) code toegevoegd worden:

<html xmlns:b="http://www.google.com/2005/gml/b" xmlns:data="http://www.google.com/2005/gml/data" xmlns:expr="http://www.google.com/2005/gml/expr" xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#"> </html>

Deze code kun je vinden op regel 3 van de sjabloon

Wanneer dit gebeurd is kunnen de tags zelf worden toegevoegd. Deze dienen direct onder <head> geplaatst te worden:

<b:if cond='data:blog.pageType == "item"'>  <meta expr:content='data:blog.pageName' property='og:title'/> <meta expr:content='data:blog.canonicalUrl' property='og:url'/> <meta content='article' property='og:type'/> </b:if> <meta expr:content='data:blog.title' property='og:site_name'/> <b:if cond='data:blog.postImageThumbnailUrl'> <meta expr:content='data:blog.postImageUrl' property='og:image'/> <b:else/> <meta content='logo-link' property='og:image'/> </b:if> <b:if cond='data:blog.metaDescription != ""'> <meta expr:content='data:blog.metaDescription' name='og:description'/> </b:if>  <meta content='app_id' property='fb:app_id'/>

Bij de logo-link vul je de url/link van de afbeelding die getoond moet worden wanneer er geen afbeelding in het bericht aanwezig is.
Bij fb:app_id vul je de numerieke waarde van je Facebook profiel in. Deze waarde kun je hier vinden.

Het kan tot 24 uur duren voor Facebook deze wijzigingen toepast bij het delen.

De tags og:image en og:url zijn begin maart 2016 toegevoegd aan de officiële Blogger sjablonen, deze hoeven dus niet meer handmatig toegevoegd te worden.

Reageer

Het e-mailadres wordt niet gepubliceerd. Verplichte velden zijn gemarkeerd met *