Erscheinungsbild der eigenen Website beim Einfügen in einen facebook-Post

Heute ein technischer Artikel für diejenigen die auch noch eine Website haben so wie ich, und die das Erscheinungsbild beim Einfügen in einen facebook-Post kontrollieren wollen.

Die Vorteile sind:

1) Ihr habt ein großes Vorschaubild, zusätzlich kann aus mehreren Bildern ausgewählt werden die ihr selbst bestimmt (bis zu zehn Bilder soviel ich weiß)

2) Der Titlel (bei mir JB Photography – Jörg Billwitz) kann unabhängig vom Titel der Website gesetzt werden

3) Der Beschreibungstext in der Zeile darunter kann individuell deviniert werden.

Alles was ihr dafür tun müßt ist in die Startseite eurer Website folgende Metatags mit aufnehmen:

<meta property=”og:title” content=”JB-Photography – Jörg Billwitz” />
<meta property=”og:description” content=”people &amp; fashion photography | bavaria, germany” />
<meta property=”og:type” content=”website” />
<meta property=”og:url” content=”http://www.joergbillwitz.de” />
<meta property=”og:locale” content=”de_DE” />
<meta property=”og:image” content=”http://www.joergbillwitz.de/fb-preview1.jpg” />
<meta property=”og:image” content=”http://www.joergbillwitz.de/fb-preview2.jpg” />
<meta property=”og:image” content=”http://www.joergbillwitz.de/fb-preview3.jpg” />

Die Vorschaubilder ladet ihr auf eure Website hoch, die Größe der Vorschaubilder ist dabei wichtig!

Wenn die Vorschaubilder 200 x 200px groß sind, erhaltet ihr in facebook das alte Erscheinungsbild:

fb-post-small

Für die großen Vorschaubilder müßen diese 1200 x 630px groß sein, dann sieht das so aus:
fb-post-big

Ob das ganze richtig funktioniert könnt ihr mit dem facebook Object Debugger testen: https://developers.facebook.com/tools/debug/ Dort einfach eure Seiten-URL eingeben, ihr solltet dann einige Infos und keine Fehlermeldung bekommen.

In WordPress gibt es für die Metatag-Erweiterung zum Beispiel das Plugin “Add Meta Tags”, meist funktioniert es aber auch wenn ihr die Startseite bearbeitet. Unten findet ihr dort ein Textfeld “Vollständige Meta-Tags”, in das ihr den Code oben eingeben könnt.

_M3_0262sw

_M3_0129sw