lillbra.se

Bloggposter taggade som ‘facebook’

Så bestämmer du bild för din sajt vid Facebook-delning

När man delar en länk på Facebook så visas en tumnagel eller ikon för url:en. Facebook letar efter en passande bild på den inlänkade sajten och infogar den, vilket ibland kan tyckas aningen slumpmässigt. Men du kan själv styra vilken bild som visas.

Exempel på tumnagelbild vid delning på Facebook

Facebook har skapat OpenGraph, ett metadata-protokoll för att beskriva sidor och relationer på webben. Så för att ange vilken bild Facebook ska använda lägger du in följande meta-tagg i din head-tagg:

<meta property="og:image" content="http://lillbra.se/images/facebook-thumbnail.png"/>

Du måste dessutom specificera namespace för protokollet på detta sätt:

<html xmlns:og="http://ogp.me/ns#">

Bilden du använder ska vara minst 50×50 pixlar stor och ha en ratio på högst 3:1. Filformat som stöds är png, jpeg och gif.

OpenGraph-protokollet har utöver og:image, tre andra egenskaper som är obligatoriska att ha på sidan: title, type och url. Så det fullständiga exemplet ser ut så här:

<html xmlns:og="http://ogp.me/ns#">
<head>
<meta property="og:title" content="Lillbra.se"/>
<meta property="og:type" content="blog"/>
<meta property="og:url" content="http://lillbra.se"/>
<meta property="og:image" content="http://lillbra.se/images/facebook-thumbnail.png"/>

Läs mer om OpenGraph och på vilka sätt Facebook använder det här.

OpenGraph och HTML5-validering

Om du använder HTML5 som doctype (och det gör du väl!?) kommer ovanstående exempel att orsaka valideringsfel. Jag har hittat tre metoder att hantera detta problem:

Antingen kan du se till att endast skriva ut meta-taggarna för Facebook, genom att kontrollera user-agent-strängen. För alla andra besökare serveras alltså valid html utan OpenGraph-element. Ett exempel på hur du gör detta hittar du här.

Ett annat alternativ är att använda det gamla sättet att peka ut bilden med en link-tagg istället för en meta-tagg. Så här:

<link rel="image_src" href="/images/facebook-thumbnail.png" />

Detta sätt rekommenderades innan OpenGraph fanns, men fungerar fortfarande. Hur länge Facebook stöder detta är dock oklart.

Det tredje och sista alternativet är att använda HTML+RDFa – en standard för att använda RDFa (där du kan definiera xml-namespaces) tillsammans med HTML5. Då skriver du så här (via Semantic Overflow 1 & 2):

<!DOCTYPE html>
<html version="HTML+RDFa 1.1" xmlns:og="http://ogp.me/ns#">
<head>
<meta property="og:image" content="http://lillbra.se/images/facebook-thumbnail.png"/>

HTML+RDFa är dock en working draft och W3Cs validator stöder inte HTML+RDFa, och därför kommer du inte kunna validera din kod med den.

Annat att tänka på

Många rapporterar problem med att Facebook inte visar rätt bild, både när man använt OpenGraph och det gamla sättet. Själv har jag inte stött på några problem, bara man följer ovan beskrivna regler. Och Facebook har en egen länk-inspektor där du kan ange en url och få ett resultat på vilken metadata Facebook kan hämta för den sidan. Lycka till!

ps. Om du använder WordPress hittar du en enkel steg-för-steg guide till hur du implementerar OpenGraph här.

Mer på lillbra.se om: , , , , , ,

Andra bloggar om om: , bild , facebook , favicon , html , metadata , rdf

Twitter-followers mer lojala än Facebook-fans

Marknadsföringsfirman ExactTarget kom nyligen ut med rapporten Subscribers, Fans & Followers, där skillnader i beteendet hos Facebook-fans, Twitter-followers och e-postprenumeranter undersöks. eMarketer lyfter fram viss intressant statistik från rapporten. Bland annat konstateras att köpvilligheten hos en Twitter-follower är mer än dubbelt så stor som hos ett Facebook-fan:

Köpvillighet - Twitter vs Facebook

Och Twitter-followers är också de som rekommenderar företag till andra oftare:

Rekomendationer av företag - Twitter vs Facebook

Jag skulle tippa att detta stämmer in rätt bra på oss svenska användare också. Att följa någon på Twitter innebär ett större hängivenhet/lojalitet än att trycka ‘Like’ på Facebook. Håller du med?

Läs fler analyser från rapporten här:
Twitter-followers vs. Facebook-fans del. 1 – Cohn & Wolfe (via jardenberg.se)
Understanding How and Why Facebook Users Interact with Brands – Mashable

Rullar på Wordpress med modifierat Guerrilla-tema