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:
|
1 2 3 4 5 |
<v:page.header.meta name="og:description" content="{newsItem.teaser -> f:format.stripTags()}" /> <v:page.header.meta name="og:title" content="{newsItem.title}" /> <f:if condition="{newsItem.falMedia}"> <v:page.header.meta name="og:image" content="{f:uri.image(src:newsItem.falMedia.0.uid, treatIdAsReference: 1)-> v:format.prepend(add: '{v:site.url() -> v:format.substring(length: \'-1\')}/')}" /> </f:if> |
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
Julian
März 16, 2023 — 9:52 am
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:
=>
Stefan Schoner
März 22, 2023 — 12:43 pm
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