Open Graph Facebook en Magento voor delen van berichten

Open Graph tags Facebook

Wanneer je in Facebook links deelt, worden er bepaalde gegevens van de website overgenomen in het bericht. Je ziet dan een standaard omschrijving en een afbeelding. Deze gegevens worden opgehaald uit de metatags van Magento.
Wat echter niet bij iedereen bekend is, is dat je die metatags zelf kunt opmaken. Dit doe je door de standaard metatags te ‘overrulen’ met zogenaamde Open Graph Tags.
Standaard zie je bijvoorbeeld dit:

Facebook share Maurandi Lederwaren

Hierbij wordt de standaard omschrijving en paginatitel overgenomen uit de broncode van de webshop.
Dit kan natuurlijk beter. Daarvoor gebruiken we de Open Graph Metatags, zoals Facebook die gebruikt. Laten we dat even toepassen bij deze webshop

We gebruiken de volgende tags:

<meta property=”og:url” content=”http://maurandi-lederwaren.nl” />
<meta property=”og:type” content=”website” />
<meta property=”og:title” content=”Maurandi Lederwaren” />
<meta property=”og:description” content=”Lederwaren met oog voor design en kwaliteit” />
<meta property=”og:image” content=”<meta property=”og:image” content=”http://maurandi-lederwaren.nl/media/wysiwyg/afbeeldingen/dames.jpg” />” />
<meta name=”twitter:card” content=”summary”/>

We hebben nu een mooie omschrijving, en een duidelijke afbeelding. Let er overigens op dat de afbeelding minimaal 200px X 200px is. Zo niet, dan wordt alsnog de standaard afbeelding gebruikt. De laatste regel is bedoeld om twittercards te activeren, zodat er een afbeelding mee komt bij de gedeelde berichten via Twitter. Overigens zijn er meer tags mogelijk. Zie hiervoor de developers pagina van facebook.

Open Graph toepassen in Magento

Waar plaats je deze tags in Magento? Via Systeem –> configuratie –> ontwerp –> veelsoortige scripts –> HTML head

Hier kun je scripts en tags toevoegen, die vervolgens in de html head terechtkomen. Dit zal worden ingevoegd voor de sluitingstag in de head van de HTML, precies waar het thuishoort. Pas overigen wel even op dat je de bestaande javascripts laat staan, zodat je geen functionaliteit verliest.

Open Graph Tags Magento

Wil je nu zien hoe het eruitziet in Facebook, dan kun je gebruik maken van de debug tool van Facebook. Deze tool geeft allerlei informatie weer, en geeft eventueel ook aan wat je kunt verbeteren en aanpassen.

Hier voer je de url in, en zie je hoe je berichten zullen worden weergegeven.

In dit geval zal het dan zoiets worden:

FacebookNewShare