Es gab einen Fehler im TypoScript Snippet bei der Angabe der Bilddatei. Habe das heute korrigiert. Sorry falls schon jemand verzweifelt ist, weil der Code nicht funktioniert ;-).
TYPO3: Absolute Urls für og:image Bilder
Um ein Bild an Facebook oder Twitter als Vorschaubild zu übergeben, muss man im Quellcode einen absoluten Pfad zum Bild angeben. Aber wie macht man das?
Schon eine ganze Weile gibt es in TYPO3 die Möglichkeit OpenGraph-Meta-Tags Tags per TypoScript zu generieren. Das gilt auch für das og:image
. Das Bild muss dabei mit einer absoluten Url angegeben sein.
Wie man das flexibel auch für mehrere Umgebungen (Production, Staging, Lokal, etc.) umsetzen kann ohne immer die Domain azupassen, das zeige ich euch in diesem kleinen Beitrag. Der erste Ansatz der den meisten (auch mir) da wohl einfällt ist dieser hier:
page { meta { og:image.cObject = IMG_RESOURCE og:image.cObject.file = EXT:path/to/file.png } }
Man nimmt ein IMG_RESOURCE
Objekt und gibt einfach den Pfad an. Im Frontend hätten man nun einen og:image
Tag, in dem das Bild ohne die gerade verwendete Domain angeben ist. <meta property="og:image" content="/fileadmin/deinpfad/deinbild.jpg" />
Wenn man nun die absolute Url inkl. der Domain haben will, kann man den Pfad natürlich auch einfach umschreiben, die Domain als Konstante einfügen oder ähnliches. Wenn man das Ganze aber unabhängig von der gerade verwendeten Umgebung/Domain haben will, muss man das TypoScript ein wenig umschreiben.
page {
meta {
og:image.cObject = TEXT
og:image.cObject {
typolink {
parameter.cObject = IMG_RESOURCE
parameter.cObject.file = EXT:path/to/file.png
returnLast = url
forceAbsoluteUrl = 1
}
}
Ich nutzte hier die typolink
Funktion und übergebe dem parameter
einfach ein
Objekt und bekommt durch die beiden Angaben IMG_RESOURCE
returnLast = url
und forceAbsoluteUrl = 1
eine Pfadangabe zu dem Bild inkl. der gerade in TYPO3 verwendeten Domain. So ist keine manuelle Anpassung notwendig wenn man verschiedene Umgebungen hat in der die Seite läuft. Also eine lokale Entwicklungsumgebung oder ein Staging Server oder was auch immer. Mit diesem Snippet habt ihr eine Ausgabe für ein Standard og:image
welches bei Verwendung der seo Extension und Angabe eines Bildes in den Seiteneigenschaften einfach überschrieben werden kann wenn ihr für bestimmte Seiten ein anderes Bild benötigt. Ich hoffe das hilft dem einen oder anderen. Für andere Lösungen oder Feedback nutzt einfach die Kommentarfunktion.