Vorschau dank open graph beeinflussen

Ansprechende Vorschau beim Teilen in sozialen Medien

Beim Teilen von Links auf Facebook, Twitter und co versuchen die Plattformen, eine Vorschau zu erstellen. Wie kannst du diese Vorschau beeinflussen, damit du das Optimum aus geteilten Links herausbekommst?

Das Teilen von Links auf den genannten (und auch weiteren Kanälen) ist kostenlos möglich. Und indem deine Facebook-Freunde einen von dir verlinkten Beitrag weiter teilen, hast du Reichweite, die dir sicher willkommen ist.

Wenn du auf Facebook einen Link teilst, versucht Facebook stets, diesen wie folgt darzustellen:

Der Text über dem Bild entspricht dem, was du beim Teilen manuell eingegeben hast. Die Vorschau, die Facebook automatisch erstellt, beginnt mit dem Bild. Darunter ist die Domain-Adresse, Der Titel und ein kurzer Auszug aus dem Text auf der verlinkten Seite ersichtlich.

Richtig gelesen: Facebook erstellt diese Vorschau automatisch. Oder versucht es zumindest.

Weil für einen spannenden Link auch ein Bild dazugehört, versucht Facebook, ein passendes Bild zu finden. Bei diesem krampfhaften Suchen kann es schon mal passieren, dass Facebook ein Bild findet, aber dieses nicht im korrekten Format vorhanden ist. Oder noch schlimmer: Es passt überhaupt nicht zum Thema.

Als Website-BetreiberIn kannst du entsprechend vorsorgen und die Daten so hinterlegen, dass Facebook sie findet. Damit kannst du nicht nur bestimmen, wie deine Link-Vorschauen auf Facebook daher kommen, sondern du steigerst auch noch völlig kostenlos die Aufmerksamkeit, wenn jemand deine Seite teilt.

Das funktioniert mit den sogenannten Open Graph Meta Tags. Dabei handelt es sich um – wie der Name schon sagt – Meta Tags, die auf der entsprechenden Seite jeweils individuell angepasst werden und dafür sorgen, dass Facebook, Twitter und Co die jeweils gewünschten Texte und Bilder anzeigen.

Es gibt so einige Möglichkeiten, mit Open Graphs zu beeinflussen, wie eine Seite auf sozialen Seiten integriert wird. Die wichtigsten für die meisten Seiten dürften jedoch die nachstehenden sein.

Hilfe, Code?!

Und für diejenigen, die mit Codes wie

<meta property=“og:title“ content=“Website fürs kleine Budget“/> 

nichts anfangen können, dürfen aufatmen. Zumindest dann, wenn sie eine WordPress-Seite haben. Denn es gibt ein ganz einfach zu bedienendes Plugin, das jeder problemlos bedienen kann und das einem die ganze Code-Arbeit abnimmt. Mehr dazu ganz am Ende dieses Artikels.

Open Graph Title

Der fettgedruckte Titel unter dem Bild, entspricht üblicherweise dem Titel der verlinkten Seite.

<meta property=“og:title“ content=“Website fürs kleine Budget“/>

Open Graph Description

Bei der Beschreibung (=description) handelt es sich um den Textauszug, der unter dem Titel erscheint. Die sozialen Medien kürzen hier bei Bedarf selbständig. Wie lange der Auszug sein soll, kann ich nicht beeinflussen.

<meta property=“og:description“ content=“Wenig Budget heisst nicht, dass man die Website selber basteln muss.“/>

Open Graph Image

Beim Bild (=Image) handelt es sich um einen der wichtigsten bzw. spannendesten Meta Tags, ist doch das Bild der grosse Aufmerksamkeitsfänger. Dass überhaupt mal ein Bild erscheint, und dann noch das perfekt passende, können wir über diesen Tag steuern.

<meta property=“og:image“ content=“http://staging.superlook.ch/budget.jpg“/>

Open Graph URL

Mit dem Tag URL geben wir an, wohin der verlinkte Beitrag verweisen soll. Das erscheint vielleicht überflüssig, stellt aber sicher, dass bei unterschiedlichen Links (aufgrund von Werbekampagnen, etc) oder bei allfälligen noch im geteilten Link enthaltenen Suchparametern sichergestellt ist, dass eben die gewünschte URL verwendet wird.

<meta property=“og:url“ content=“http://staging.superlook.ch/website-fuers-kleine-budget/“/>

Open Graph Type

Type (Typ) entspricht… dem Typ der verlinkten Seite. Für Blogs wie diesen bietet sich die Verwendung von „article“ (Artikel) als Typ an. Es besteht aber die Möglichkeit, mit dem Open Graph Type auf besondere Inhalte wie Audio oder Filme hinzuweisen. Doch da in die Tiefe zu gehen, würde den Rahmen dieses Beitrags sprengen.

<meta property=“og:type“ content=“article“/>

Diese obigen Meta-Tags müssen als Codezeile in die jeweilige Seite eingefügt werden, damit Sie Twitter, Facebook und Co bei bedarf finden.

Und wenn ich keinen Code mag?

Besonders einfach haben es einmal mehr WordPress-Benutzer

Dass WordPress das meist genutzte CMS ist, kommt uns auch in diesem Fall zu Gute. Denn mit dem Plugin „Yoast SEO“ klappt das Anbringen der Open Graph Meta Daten kinderleicht.

Einmal installiert und aktiviert fügt das Plugin unter jeden Editor ein paar Eingabefelder hinzu. Das sieht dann im Falle dieses Beitrages wie folgt aus:

Yoast SEO fügt noch weitere Felder hinzu, die hier nicht angezeigt werden, weil sie für diesen Beitrag nicht von Bedeutung sind.

Was obiges Bild zeigt, ist die Yoast SEO-Standard-Ansicht. Die ist ebenfalls sehr wichtig, weil sie mit dem Optimieren für Suchmaschinen zu tun hat.

Für diesen Beitrag ignorieren wir diesen Aspekt aber mal und klicken stattdessen auf das Sharing-Icon. Das öffnet uns die Open Graph-Ansicht.

Und da ist dann eigentlich schon alles ziemlich selbsterklärend. Was wir bei „Facebook Titel“ eingeben, wird als og:title gespeichert, die Beschreibung erhält den Tag og:description und als drittes Element können wir das Bild auswählen.

Et voilà, fertig ist die Optimierung für Facebook. Ein Kinderspiel, oder?

Genauso einfach ist die Anpassung für Twitter, da stehen die genau gleichen Felder zur Verfügung.

Übrigens: In Yoast SEO lässt sich auch hinterlegen, welches Bild beim Teilen angezeigt werden soll, wenn kein beitragsspezifisches Bild hinterlegt wurde. Damit kannst du die Fälle abfangen, bei denen du vergessen hast, die Open Graph Meta Daten zu hinterlegen.

Allein wegen der Open Graph Meta Daten lohnt es sich also, das Yoast SEO-Plugin zu installieren. Aber auch sonst kann das Yoast SEO-Plugin noch so einiges. Das ist dann jedoch Stoff für einen weiteren Beitrag.

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Zweitbüro GmbH
Adetswilerstrasse 3a
8344 Bäretswil

hello@zweitbuero.ch
076 364 65 08