Opengraph Tags (Meta Tags für Social Share) in TYPO3 Extension mit VHS Viewhelper

Wie erstellt man Opengraph Tags (og:image, og:description, og:title) für Facebook etc. ohne TypoScript? Mit den VHS Viewhelpern kein Problem. In diesem Codebeispiel werden die og:tags in tx_news implementiert.

Natürlich kann man dieses Problem auch mit TypoScript lösen, aber wir haben uns für diese Lösung entschieden, da wir VHS sowieso schon verwenden.

Fügt im Detail Template (../Templates/News/Detail.html) einfach irgendwo folgendes Snippet ein:

Dieser Viewhelper schreibt die Tags direkt in den <head> rein. Achtung falls ihr die Tags  schon mit TypoScript konfiguriert habt: Diese müssen natürlich für die Detail Seite deaktiviert werden, sonst hat man die Tags doppelt.

Der og:image Tag ist etwas komplizierter weil man den absoluten Pfad braucht. Natürlich könnte man http://domain.de/ vor der image url hartkodieren, ist aber nicht so schön und könnte zu Fehlern führen.

Bei RTE-Feldern müssen noch mit dem f:format.stripTags ViewHelper die HTML Tags entfernt werden.

Und fertig. Jetzt habt ihr in eurer Extension schöne Opengraph Tags ohne TypoScript.

getestet mit
TYPO3 7.6.22 & 8.7.6
VHS 2.4.0 & 4.2.0

 

2 Kommentare

Füge deinen hinzu →

  1. Der Beitrag ist schon etwas älter und evtl. war die Basis damals etwas anders…

    og:* sind Properties und auch als solche in den meta-Tags aufzuführen. Die ViewHelper sollten in diesem Fall statt mit ’name‘-Attribut mit dem ‚property‘-Attribut genutzt werden:

    Inkorrekt:

    =>

    Valide:

    =>

    • Hi Julian, danke für dein Kommentar!
      Leider sind irgendwie Inhalte aus deinem Kommentar rausgefiltert worden 😀

      Ich würde es gerne veröffentlichen, falls du uns deine Lösung zukommen lasst .

      info@kreagenz.at

Schreibe einen Kommentar