Artikelvorschaubilder für Facebook festlegen
Shareability und Click-Through-Rate
Wenn der Nutzer seinen Beitrag verfasst ist ihm vor allem eines wichtig: Was er postet soll ihn vor seinen Kontakten gut aussehen lassen. Das bedeutet, dass er möglicherweise wert auf ein ansprechendes Erscheinungsbild des Posts legt. Hat er kein oder nur unpassende Vorschaubilder zur Auswahl, könnte er es sich anders überlegen und den Link nicht posten. Gute Vorschaubilder tragen somit zur sogenannten Shareability bei.
Ist der Beitrag verfasst und erscheint im Stream von anderen Nutzern, trägt ein interessantes Erscheinungsbild natürlich dazu bei, dass die Click-Trough-Rate (also die Anzahl der Klicks pro Einblendung) steigt.
Welche Bilder zeigt Facebook an?
Standardmäßig versucht Facebook alle <img>-Tags der Website auszulesen und diese als Vorschaubildchen anzubieten (per CSS eingebundene Layoutgrafiken werden richtigerweise ignoriert). Alle Bilder bedeutet häufig aber auch eine Menge an Werbebannern, Icons und Teaserbildern, die mit dem eigentlichen Inhalt nichts zu tun haben.
Wie aber können wir die Kontrolle über die Bilderauswahl bekommen?
Open Graph ist ein, vor allen Dingen von Facebook entwickelter, offener Standard um Webdokumente mit speziellen Meta-Informationen anzureichern. In diesem Fall ist das og:image-Tag interessant für uns. Sobald eine Seite ein og:image-Tag gesetzt hat, ignoriert Facebook alle anderen Bilder auf der Seite. Die Anzahl der so eingeschleusten Bilder ist nicht begrenzt, so dass es dem Seitenbetreiber möglich ist die Vorschaubilderauswahl komplett frei zu bestimmen.
Lösungswege für TYPO3
Ich zeige beispielhaft Wege mit denen die og:image-Tags von TYPO3 aus gesteuert werden können.
Bilder aus Inhaltselementen auslesen
Eine bequeme Variante ist es, einfach die verwendeten Bild- und Bild-mit-Text-Elemente auszulesen und die Bilder als og:image-Tags zu verwenden.
page.headerData.848 = CONTENT
page.headerData.848 {
table = tt_content
select {
where = (CType = "image" OR CType = "textpic") AND colPos = 0 AND CHAR_LENGTH(image) > 0
}
renderObj = TEXT
renderObj {
field = image
split {
token = ,
cObjNum = 1
1.cObject = IMG_RESOURCE
1.cObject {
file {
import = uploads/pics/
import.current = 1
width = 200m
height = 200m
}
stdWrap.wrap = <meta property="og:image" content="{TSFE:baseUrl}|" />
stdWrap.insertData = 1
}
}
}
}
Das Tolle an dieser Variante ist, dass kein Zusatzaufwand für Redakteure entsteht. An der Pflege des Contents ändert sich nichts, aber nur die relevanten Bilder aus dem Inhaltsbereich werden Facebook angeboten.
Wiederum ist man aber mit der Bildauswahl an den Seiteninhalt gebunden: Gibt es im Content-Bereich mal kein Bild oder gibt es dort wieder Teaserbilder, die nicht zum Hauptcontent gehören, kann die Auswahl wieder unbefriedigend sein.
Das Media-Feld nutzen
Hat man das Media-Feld in den Seiteneigenschaften noch nicht in Verwendung, kann man es als dedizierte Quelle für die Facebook-Vorschaubilder verwenden.
page.headerData.849 = TEXT
page.headerData.849 {
field = media
if.isTrue.field = media
split {
token = ,
cObjNum = 1
1.cObject = IMG_RESOURCE
1.cObject {
file {
import = uploads/media/
import.current = 1
width = 200m
height = 200m
}
stdWrap.wrap = <meta property="og:image" content="{TSFE:baseUrl}|" />
stdWrap.insertData = 1
}
}
}
Die beiden Varianten kann man übrigens problemlos auch kombiniert verwenden:
page.headerData {
848 = CONTENT
848 {
table = tt_content
select {
where = (CType = "image" OR CType = "textpic") AND colPos = 0 AND CHAR_LENGTH(image) > 0
}
renderObj = TEXT
renderObj {
field = image
split {
token = ,
cObjNum = 1
1.cObject = IMG_RESOURCE
1.cObject {
file {
import = uploads/pics/
import.current = 1
width = 200m
height = 200m
}
stdWrap.wrap = <meta property="og:image" content="{TSFE:baseUrl}|" />
stdWrap.insertData = 1
}
}
}
}
849 < page.headerData.848.renderObj
849.field = media
849.if.isTrue.field = media
849.split.1.cObject.file.import = uploads/media/
}
So würden jetzt sowohl die Bilder aus der Hauptinhaltsspalte (colPos = 0), als auch die Bilder aus dem media-Feld der Seite bei Facebook zur Auswahl stehen.
tt_news
Und so könnte das Ganze mit tt_news aussehen:
page.headerData.850 = CONTENT
page.headerData.850 {
stdWrap.if.isTrue.data = GPVar:tx_ttnews|tt_news
table = tt_news
select {
pidInList = {$plugin.tt_news.pid_list}
recursive = {$plugin.tt_news.recursive}
where = CHAR_LENGTH(image) > 0
andWhere.cObject = TEXT
andWhere.cObject {
data = GPVar:tx_ttnews|tt_news
intval = 1
wrap = uid = |
}
}
renderObj = TEXT
renderObj {
field = image
split {
token = ,
cObjNum = 1
1.cObject = IMG_RESOURCE
1.cObject {
file {
import = uploads/pics/
import.current = 1
width = 200m
height = 200m
}
stdWrap.wrap = <meta property="og:image" content="{TSFE:baseUrl}|" />
stdWrap.insertData = 1
}
}
}
}
Damit das Snippet so läuft, müssen die tt_news-Konstanten pid_list und recursive (im Constant Editor zu finden) richtig konfiguriert sein. Ist das nicht gewünscht, können die IDs der Newsfolder natürlich auch direkt in das TS-Snippet eingetragen werden.
Ich hoffe diese Beispiele können einen kleinen Denkanstoß für weitere kreative Zusammenstellungen der Open-Graph-Bilder geben.
Bildnachweis: Pile of 365 von Slightlynorth (CC BY-NC-SA 2.0)
