Facebook Vorschaubild mit TYPO3

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.

 

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.