Jekyll: Facebook Images festlegen

Teilt man einen Link auf Facebook so versucht Facebook den Post durch die Darstellung eines Bildes auf zu hübschen. Dafür durchsucht Facebook die Seite und sucht sich ein Bild aus. Wie die Auswahl geschieht ist hier dokumentiert. Im wesentlichen gilt:

• gibt es ein großes dann wird das auch groß dargestellt
• gibt es nur kleine dann wir eins links angezeigt und der Text erscheint rechts davon

So weit so gut. Dumm nur wenn überhaupt kein richtiges Bild in dem Beitrag ist. Dann nimmt Facebook sich eins von den Bildern die zum Beispiel in der rechten oder linke Spalte sind. Wenn es ganz schlimm kommt wird das Icon für den RSS Feed verwendet. Das ist natürlich nicht schön.

Für alle die diesen Zufall nicht wollen bietet Facebook die Möglichkeit durch spezielle Meta Tags Facebook auf die richtigen Bilder zu “stupsen”

Für meinen Blog auf Basis von Jekyll habe ich das jetzt so gelöst.

Wenn ich ein Bild dargestellt haben möchte so füge ich folgendes in den YAML Header ein

 image: /pfad/zu/dem/schönen/bild.png

und im Jekyll Template wird der Header so gefüllt:

 {% if page.image  %} 
    <meta property="og:image"  content="{{ site.url }}/{{ page.image}}">
  {% else %}
    <meta property="og:image"  content="{{ site.url }}/assets/default-image.png" />
{% endif %}

Das heißt: Gibt es ein Bild das im Post definiert wird dann wird das genommen ansonsten ein Standardbild.

Testen kann man das ganze hier