TYPO3: Absolute Urls für og:image Bilder

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 IMG_RESOURCE Objekt und bekommt durch die beiden Angaben 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.