Facebook Link-Vorschau – Like A Boss (mit Open Graph Tags)

Open Graph?!

Kabooom! In your face!

Mithilfe der Open Graph Tags, die es übrigens schon seit rund 7 Jahren gibt, werden die Link-Vorschauen bei Facebook, Twitter und Co generiert. Richtig interessant sind sie für die meisten Blogger und Websitebetreiber aber erst im Juli diesen Jahres geworden. Das war nämlich so ziemlich genau der Zeitpunkt, an dem Facebook die Manipulation der Linkvorschau unterband.
Während man also vor Juli also noch in der Lage war, die Vorschau händisch mit einem Bild aufzupeppen oder einen Beschreibungstext hinzuzufügen, »muss« man Links jetzt teilen, wie sie sind.
Ich sag es wie es ist: Ganz schön doof für die Leute, die es für eine gute Idee hielten, die eigene Website hinter vielversprechenden Bildern und Texten zu verstecken, um den einen oder anderen Klick abzustauben, die Fake-News-Seiten oder Cyberkriminellen.

Jetzt gehören die meisten Blogger oder Websitebetreiber – zum Glück – nicht in diese Kategorie. Aber auch die mussten sich umgucken. Das nachträgliche Aufhübschen des Links oder das Erstellen von verschiedene Variationen der Vorschau war ja nicht mehr möglich. Dass die CTR (Click Through Rate:
Prozentualer Anteil von Klicks im Verhältnis zu den Impressionen) durch fehlende Optimierung von Bildern oder Texten in der Vorschau sank, ist ja leicht nachvollziehbar. Wir sind eben doch optische Gourmets.

Workaround

Für uns bedeutet das:
Man kann zumindest davon ablenken, dass die Facebook Link Vorschau ziemlich kacke und nicht gerade einladend aussieht, wenn man als Beitragsart »Bild« auswählt. Dazu schreibt man dann noch ein paar Zeilen und knallt im Abschluß den Link unter den Text. Fertig. Funktioniert und sieht besser aus als die trostlose Linkvorschau. Außerdem vertuscht man an dieser Stelle erfolgreich, dass man seine Website oder sein Blog noch nicht mit den Open Graph Tags für die sozialen Medien optimiert hat. Sehr schlau.

Sharing is caring – oder so

Unsere Facebook-Posts sehen dank des Workarounds ganz gut aus und Bilder gehen bekannterweise ja sowieso immer ganz gut. Unsere Besucherzahlen sinken nicht so rapide wie die Titanic – und wir reiben uns die Hände. Ha! Mach doch, was du willst, Facebook! Wir haben ein gutes Workaround gefunden: Also, so what, verdammte Axt 2000? Es besteht kein Bedarf zu handeln.

Zumindest besteht so lange kein Handlungsbedarf, solange man anderen Menschen verbieten kann, den Link zu teilen. Oder: Ätsch, reingelegt! Es besteht sehr wohl ein Handlungsbedarf! Die Open Graph Tags wären am Besten schon gestern auf Blogs und Websites eingebunden worden. Immerhin geht es auf den sozialen Kanälen um das Teilen von interessanten Inhalten – und was ich interessant finde und teilen möchte, entscheide ich.
Aber, Hand aufs Herz, sind wir nicht alle schon mal über einen interessanten Link gestolpert, der sich beim Generieren der Vorschau dann als die popeligste Link-Vorschau aller Zeiten entpuppte? Und wie oft haben wir dann gedacht: »Ach komm, lass‘ stecken! Dann teile ich den Link eben nicht. Ich habe jetzt keine Böcke ’nen passendes Bild zu suchen (für das ich auch noch das Urheberrecht haben muss) und einen Text dazu zu schreiben«. Und wenn ich noch ehrlicher sein darf: Rein beruflich betrachtet ist es eine Katastrophe! Natürlich ist es auch für meine Kunden ein absolutes No-Go, dass auf ihren Unternehmensseiten Links geteilt werden, die nicht aufbereitet sind.

Dabei ist es gar nicht so schwer:

1 – Blog (WordPress)

Mal ehrlich: Plugins und Addons gibt’s wie Sand am Meer.
Ich empfehle an dieser Stelle nur die Plugins, die ich für diese Zwecke einsetze.

1.1 – Squirrly

Auf code78 nutze ich das Plugin Squirrly für quasi alles: Für das Open Graph Protokoll,  Twitter Cards,  Schema, SEO-Gedöhns, JSON-LD Structured Data, Performance Analysen, … . Ich glaube, das einzige, was es wohl nicht kann, ist den Flesh-Wert eines Artikels zu ermitteln. Aber: Der hat mich eh immer unter Druck gesetzt.
Squirrly platziert unter dem Editor eine Box, in der man den Titel, die Beschreibung und das Bild hinterlegen kann:

1.2 – Facebook Open Graph, Google+ and Twitter Card Tags

Auf ruhrBLOGs haben wir schon YOAST für unseren SEO-Kram installiert. Und YOAST verträgt sich nicht mit Squirrly. Deswegen habe ich mich nach einer Alternative umsehen müssen und mit Facebook Open Graph, Google+ and Twitter Card Tags ein schlankes Plugin gefunden, das tut, was es soll.

2. Blog (Blogger / Blogspot)

Ehrlichgesagt kann ich an dieser Stelle keine schlauen Tipps geben, weil ich noch nie mit Blogger gearbeitet habe. Ich habe allerdings einen Artikel gefunden, in dem beschreiben wird, wie man die Open Graph Tags in Blogger hinzufügt.

Nach Rücksprache mit Claudia von schusteronline habe ich aber erfahren, dass sie nie irgendeinen Code eingefügt hat, aber trotzdem ganz ansehnliche Link-Vorschauen erhält. Und falls das mal nicht so klappt, zeigt sie in ihrem YouTube-Video, wie sie für ihre Blogartikel von Blogger doch noch ansehnliche Ergebnisse erhält. Ist auch eher so ein Workaround, oder ?

3. Website

Wer eine Website hat, kann coden oder kennt zumindest jemanden, der das kann. Der/Diejenige bindet die Open Graph Tags ganz einfach in den <head> der Seite ein und passt sie individuell der Seite an. Für die Facebook Link-Vorschau sind die Tags title, type, description, image und url relevant:

<meta property="og:title" content="Titel der Seite" />
<meta property="og:type" content="website" />
<meta property="og:description" content="Krasse Beschreibung oder so" />
<meta property="og:url" content="https://deine-url.tld" />
<meta property="og:image" content="https://deine-url.tld/image/tolles-bild.jpg" />

Die anderen Tags, die theoretisch noch zur Verfügung stehen, vernachlässige ich an dieser Stelle, weil dieser Artikel ja von der Facebook Link-Vorschau handelt. So stünde zum Beispiel für Insights noch der Tag fb:app_id zur Verfügung, mit der du die Analysedaten von Facebook einsehen kannst.

Testen

Bevor es nun an das Teilen auf den sozialen Netzwerken geht, kontrolliere ich meine Links und die generierte Vorschau. Ich bin nämlich einer dieser Menschen, die nur ein Beitragsbild haben und es für alles nutzen. Hin und wieder schneidet mir Facebook nämlich oben und unten oder links und rechts irgendwas ab. Und mit irgendwas meine ich Buchstaben. Sehr ärgerlich.
Mit dem Sharing Debugger könnt ihr überprüfen, wie die Vorschau durch Facebook generiert wird.

Anschubsen

Vielleicht kennt ihr das Problem ja: Ihr bemerkt beim Überprüfen oder Posten eures Links, dass ihr euch in der Beschreibung verschrieben habt oder das Bild falsch zugeschnitten wurde.
Es liegt ja nahe, diesen Fehler auf eurem Blog oder eurer Website in den Open Graph Tags zu korrigieren und den Artikel / die Seite zu aktualisieren.
Dann switcht ihr wieder zu Facebook rüber, packt den Link und wundert euch über die Vorschau. Die ist nämlich die olle Kamelle von vorher. Das liegt daran, dass der Link, sobald er von Facebook gescraped wurde, gespeichert wird.
Meine Website »minus78« wurde laut Debugger-Informationen vor rund einem Monat das letzte Mal gescraped:

So lange wollen wir aber nicht warten, oder?
Nachdem wir nun also die Tags mit den fehlerhaften Informationen geändert haben, schubsen wir den Crawler einfach durch einen Klick auf »Neue Scraping-Infos abrufen« an – und erhalten jetzt die neue Link-Vorschau.

Fazit:
Eigentlich ist es gar nicht so aufwändig und schwer, eine ansprechende Link-Vorschau zu generieren. Man muss nur wissen, wie man das am Besten anstellt.