Facebook verwendet die OpenGraph Tags, um daraus die Vorschaubilder und Texte zu generieren. Mit diesem Typoscript kann man aus den Seiteneigenschaften (Media) die notwendigen Codes generieren:
######## Typoscript: OpenGraph for Facebook ################# page.headerData.358 = COA page.headerData.358 { #media field von pages 10 = IMG_RESOURCE 10.file { import.data = levelmedia:-1, slide treatIdAsReference = 1 import.listNum = 0 width=1200 } 10.stdWrap.dataWrap = <meta property="og:image" content="{getIndpEnv:TYPO3_REQUEST_HOST}/|" /> 10.stdWrap.insertData = 1 20 = TEXT 20 { typolink.parameter.data = TSFE:id typolink.forceAbsoluteUrl = 1 typolink.returnLast = url wrap = <meta property="og:url" content="|" /> } 30 = TEXT 30.value = Schmuttermair Software 30.wrap = <meta property="og:site_name" content="|" /> 40 = TEXT 40.field = page:title 40.wrap = <meta property="og:title" content="Schmuttermair Software: |" /> 50 = TEXT 50.field = description 50.ifEmpty= TYPO3 Entwicklung und Web-Development 50.wrap = <meta property="og:description" content="|" /> 60 = TEXT 60.value = <meta property="og:type" content="website" /> }
Dieses Snippet läuft unter TYPO3 7.6 und 8.7
Testen kann man das Ganze mit dem Facebook Sharing Debugger: https://developers.facebook.com/tools/debug
Erklärung der einzelnen Felder:
- 10: Vorschaubild aus dem Feld „media“ der Page Properties. Wenn keines eingetragen wurde von der übergeordneten Seite im Seitenbaum, d.h. zumindest die Root Seite sollte ein Bild haben.
- 20: URL zum geteilten Link, wird genauso wie canonical Tag generiert
- 30, 40: Titel entsprechend der eigenen Webseite anpassen
- 50: Beschreibungstext unter dem Vorschaubild, default Text anpassen
- 60: type ist sinnvollerweise website oder article
- Es gibt noch das Feld fb:app_id, doch ich verwende keine Facebook Tools und habe keine App ID verknüpft.
Läuft!
Gut beschrieben, Danke