Je vindt overal op internet wel Open Graph tags (OG) om in Blogger te plaatsen. Je merkt het niet meteen (ik toch niet) maar de afbeeldingen op Facebook zijn wazig.
Vooral indien je posts automatisch naar Facebook worden gestuurd via RSS (met Twitterfeed bvb).
Blijkt dat de gegeven code eigenlijk verkeerd is:
- in de meeste voorbeelden wordt gebruik gemaakt van
blog.postImageThumbnailUrl. Hiermee wordt de thumbnail van je afbeelding in Blogger opgehaald en die is 70x70 px klein. Facebook vergroot die dan uit en het resultaat is een wazige afbeelding. Met onderstaande code wordt de originele afbeelding uit je post gebruikt. (gebruik minimum 600x315 px voor een goed resultaat). - vaak worden 2 title tags gegeven wat conflicten geeft, je gebruikt best site name en title (van je post).
Werkwijze:
- Ga naar Sjabloon
- Doe een back-up van je template
- Ga naar HTML bewerken
- Voeg op het einde van de HTML tag het volgende toe:
xmlns:og='http://ogp.me/ns#'
- Je code ziet er nu zo uit:
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' 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:og='http://ogp.me/ns#'>
- Voeg voor de </head> tag volgende code toe:
<!-- Begin Open Graph metadata -->
<b:if cond='data:blog.pageType == "item"'>
<meta content='article' property='og:type'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta expr:content='data:blog.pageName' property='og:title'/>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
</b:if>
<b:else/>
<meta expr:content='data:blog.title' property='og:title'/>
<meta content='blog' property='og:type'/>
</b:if>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
</b:if>
<!-- End Open Graph metadata -->
Testen:
Je kan het resultaat testen met de Facebook Debugger.Handig om te weten is dat indien je nu eerder gepubliceerde posts met wazige afbeelding door de debugger haalt, de afbeeldingen zullen worden vernieuwd.
Geen opmerkingen:
Een reactie posten