Das große Linkvorschau-Tutorial für Typo3 und WordPress (Google, Facebook, Twitter)

Wer durch den Facebook Newsfeed scrollt, sieht die unterschiedlichsten Beiträge: Textposts, Videos, Bilder  – und Links. Meist sind sie toll aufgemacht, mit großen, bunten Bildern, und Beschreibungstexten, die zum Klicken anregen. Was viele nicht wissen: Damit die Links toll aussehen, geht so einiges an Arbeit in den Post. Ihr möchtet auch eine attraktiv aussehende Linkvorschau? Super! Hier zeige ich euch, wie’s geht.

Zunächst einmal: Das wollt ihr auf keinen Fall haben!

schlechte Linkvorschau auf Google

Wenn Google keine Beschreibung des Artikels findet, wird einfach ein Auszug verwendet.

Bild statt Vorschaubild

Verschenkte Klickfläche: Wäre das Bild in den Link eingebunden, würden mehr Fans klicken.

Diese Variante sieht man häufig: Text + Link + Bild. Das kann Sinn machen – falls der Link nur schnödes Beiwerk ist. Wenn die Fans den Link klicken sollen, braucht ihr ein Vorschaubild und einen Beschreibungstext.

Wie funktioniert das? Suchmaschinen und soziale Netzwerke gehen über eure Seite mit einem „Scraper“ und schauen in den Meta-Tags nach den für sie relevanten Informationen. Ein Beispiel: Im Code der Seite ist über og:image definiert, welches Bild Facebook für die Vorschau verwenden soll. Diese Tags müsst ihr theoretisch für jedes Netzwerk einzeln festlegen. Praktisch müsst ihr das nur für Google, Facebook und Twitter tun. Keine Angst: Dazu müsst ihr nicht programmieren können (aber es hilft). Ich empfehle euch, alle Texte und Bilder gleich von Anfang an zu definieren. Erstens erspart ihr euch damit viel Bastelarbeit auf Facebook (mehr dazu weiter unten), und zweitens wird euer Content dann immer perfekt dargestellt – egal, auf welcher Plattform und unabhängig von dem, der es teilt.

Was braucht es, um eine gute Linkvorschau zu erzeugen?

a) Google-Auszug

  • Titel: beschreibt das Thema, enthält das Fokus-Keyword, ist nicht zu lang, optional: Name des Blogs / der Seite
  • URL: enthält das Fokus-Keyword, Stichworte werden mit Bindestrichen verbunden
  • Meta-Beschreibung: erläutert den Inhalt, mindestens 120 Zeichen, maximal 156, enthält das Fokus-Keyword

Tipp: Der Titel ist für SEO viel wichtiger als die Beschreibung. Sie dient vornehmlich zur besseren Darstellung für Leser und damit zu höherer Klickwahrscheinlichkeit.

b) Linkvorschau („Open Graph“ auf Facebook, „Twitter Card“ auf Twitter)

  • Bild: Facebook (1200 x 630 px), Twitter (maximal 800 x 400 px), kein Hochformat, hohe Qualität
  • Titel: beschreibt das Thema, enthält das Fokus-Keyword, ist nicht zu lang, optional: Name des Blogs / der Seite
  • Beschreibung: beschreibt den Inhalt, 1-2 kurze Sätze, macht neugierig

Tipp: Ihr könnt Vorschaubilder auch selbst basteln! Wichtig ist, dass das Bild attraktiv den Inhalt vermittelt.

Ohne diese Angaben ziehen sich die Plattformen einfach ein oder mehrere Bilder von der Seite. Wenn es kein Bild gibt, sieht man kein Bild oder das Logo der Webseite, wenn ihr das im Code eingestellt habt. Das hat aber meist nur eine geringe Auflösung und es passt nicht zum Post.

Habt ihr die Angaben festgelegt oder geändert, müst ihr den Link in den meisten Fällen noch durch den Facebook Debugger jagen. Das ist nötig, um Facebook die neuen Infos „mitzuteilen“. Macht ihr das nicht, spielt Facebook noch die alten Infos aus – trotz Speicherung auf der Website. Dazu fügt ihr den Link in das Formular ein und klickt den Debug-Knopf. Wird daraufhin nicht das neue Bild angezeigt, klickt ihr solange auf ‚Scrape again‘, bis es dort auftaucht. Zu Spitzenzeiten habe ich das bis zu 10 mal gemacht. Nicht aufgeben – es lohnt sich!

Toll: Eure Links werden nach dieser Bearbeitung in Google+, Xing und Linkedin ebenfalls mit dem ausgewählten Vorschaubild und der Beschreibung angezeigt!

Google-Auszug und Vorschaubilder in Typo3

Typo3 ist eine Content Management-Software, die in vielen Redaktionen eingesetzt wird. Ich habe hier keine Bilder, weil die Versionen von Typo3 sehr unterschiedlich aussehen können. Nichtsdestotrotz möchte ich euch ein paar Hinweise geben, damit ihr eure Beiträge richtig bestücken könnt.

a) Google-Auszug

Der Titel entspricht dem Feld Seitentitel. Das müsst ihr sowieso ausfüllen, es fällt also keine zusätzliche Arbeit an. Die URL könnt ihr in Typo3 ebenfalls recht einfach ändern (in der Version, die ich nutze, steht sie unter Seiteneigenschaften > Verhalten). Die Beschreibung findet ihr unter den Seiteneigenschaften in Metadaten. Wenn ihr euch unsicher seid, probiert es aus und googelt euren Artikel zur Kontrolle.

b) Linkvorschau („Open Graph“ auf Facebook, „Twitter Card“ auf Twitter)

Die Einstellungen findet ihr in den Seiteneigenschaften, den Titel könnt ihr im Feld Open-Graph-Titel anpassen, die Beschreibung in der Beschreibung (Achtung! Die Beschreibung wird von Google und Facebook gleichermaßen verwendet!). Das Bild ladet ihr im Feld Open-Graph-Bild hoch. Standardmäßig sind keine Tags für Twitter in den Einstellungen. Wenn ihr das wollt oder braucht, kann ein Programmierer festlegen, dass die Tags für Twitter übernommen werden oder dass ihr das für den Artikel an- und ausschalten könnt.

Google-Auszug und Vorschaubilder in WordPress

In WordPress braucht ihr für die Bearbeitung dieser Inhalte ein Plugin. Ich empfehle Yoast SEO, eine weit verbreitete, kostenlose Standard-Lösung.

a) Google-Auszug

Wordpress_Yoast SEO_Google Vorschau

Mithilfe von Yoast SEO könnt ihr alle Angaben für Google ganz einfach mit einem Klick ins entprechende Feld bearbeiten.

b) Linkvorschau („Open Graph“ auf Facebook, „Twitter Card“ auf Twitter)

Wordpress_Yoast SEO_Facebook

Im Plugin lassen sich die Felder für Facebook einfach bearbeiten und ändern.

Das Plugin findet ihr unterhalb jedes Beitrags in der Bearbeitungsansicht. Standardmäßig übernimmt WordPress das Blog-Logo, das ihr zu Anfang festgelegt habt. Hier könnt ihr aber für jeden Artikel individuell ein Bild definieren. In meiner Erfahrung reicht es, die Informationen für Facebook einzufügen. Sie werden von WordPress bei Twitter automatisch in eine Karte umgewandelt. Möchtet ihr allerdings andere Angaben für Twitter, solltet ihr auch den Twitter-Tab bearbeiten.

Habt ihr bereits ein Beitragsbild festgelegt – dieses wird vor der Überschrift angezeigt -, entfällt ebenfalls die Notwendigkeit, das Bild noch einmal hochzuladen.

Beiträge direkt auf Facebook bearbeiten und Sonderfall Carousel Post

Facebook Post

Update: Diese Möglichkeit ist ab sofort nicht mehr für alle Admins zugänglich. Publisher sollen laut Facebook weiterhin die Möglichkeit haben, ihre Links zu editieren. Dazu ist eine einmalige Verifizierung der Inhaberschaft der Seite nötig. Umso wichtiger ist es, die Vorschauinformationen bereits im Code festzulegen! 

Ist das Bild erst einmal festgelegt, wird es auf allen Plattformen ausgespielt. Einzig auf Linkedin und Facebook habt ihr die Möglichkeit, unter mehreren Vorschlägen auszuwählen. Auf Facebook könnt ihr sogar den gesamten Beitrag bearbeiten. Das gilt für Bilder ebenso wie für die Texte innerhalb der Linkvorschau. Ich nutze das zum Beispiel oft, wenn ich einen neuen oder bestimmten Aspekt hervorheben möchte.

Ein Sonderfall ist der Carousel Post: In der Bearbeitung des Links könnt ihr durch den Klick auf das Plus-Zeichen weitere Bilder hochladen und ihre Reihenfolge ändern. Sie werden im fertigen Beitrag dann wie ein Karussell dargestellt. Kleiner Tipp: Jedes Bild kann eine eigene URL bekommen (Hyperlink-Symbol auf dem Billd). Auf diese Weise bringt ihr sogar mehrere Links in einem Post unter! Wollt ihr nur eines haben, könnt ihr die anderen wegklicken. Achtung: Das gewünschte Bild müsst ihr nach vorne ziehen, weil es sich sonst nicht als Beitragsbild festlegen lässt.

Bildmaterial: Woher nehmen, wenn nicht stehlen?

Im Netz gibt es eine Reihe von Seiten mit kostenlosen Bildern. Darüber hinaus kann man Bilder auch online erstellen und bearbeiten – ganz ohne Grafiker. Christiane Germann vom Amtzweinull hat die kleinen Helferlein hier, hier und hier auf ihrem Blog vorgestellt.

Die Ergebnisse: So kann und soll es aussehen

Linkvorschau Facebook

 

Mehr Community-Input gefällig? Dann schau doch mal hier vorbei:

Wie man eine Community auf der eigenen Plattform aufbaut

Interkulturelles Community Management

SEO fürs eigene Forum

Schreibe einen Kommentar