Contao Nachrichten für Facebook & Co. optimieren (Opengraph)

Kennst du das Problem? Du möchtest eine Nachricht, die du auf eurer Contao-Website veröffentlicht hast, auch auf Facebook posten, aber Facebook findet keine Vorschaubilder, obwohl du in deinem Text mindestens 1 Bild verwendest?

Das Problem ist, dass Facebook und Co. beim Durchsuchen der Seite nicht immer auf Anhieb die Bilder finden, bzw. nicht wissen, welches Bild verwendet werden soll. Deswegen hat Facebook vor ein paar Jahren das Open Graph Protocol eingeführt.

Mit ein paar wenigen Template-Anpassungen kannst du Facebook, Twitter und Google+ klar machen, dass das erste Bild deines Artikels als Vorschaubild verwendet werden soll. Außerdem kannst du vorab den Titel und die Beschreibung festlegen.

1. Vorschaubild generieren und an Contao übergeben

Im ersten Schritt bearbeiten wir das Template für die Darstellung der kompletten Nachricht, im Normalfall ist das news_full.html5. Setze diese Zeilen an den Anfang des Templates und Contao generiert ein Vorschaubild des ersten vorkommenden Bildes, und legt es als globale Variable og:image an:

<?php 
 $ogimage = $this->getImage( $this->urlEncode( $this->singleSRC ), 600, 315 , 'crop' ); 
 $GLOBALS['og:image'] = $this->Environment->base . $ogimage; 
?>

2. Zusätzliche Meta-Tags anlegen und Bild übergeben

Danach fügen wir in den <head>-Bereich der fe_page noch die erforderlichen Metatags ein. Als Minimum solltest du den Titel, die Beschreibung, die URL und das Bild angeben. Wie auf der Open Graph-Website erwähnt sind aber noch viele weitere Angaben möglich.

<meta property="og:title" content="<?php echo $this->pageTitle; ?> - <?php echo $this->mainTitle; ?>" />
<meta property="og:description" content="<?php echo $this->description; ?>" />
<meta property="og:url" content="{ {env::url } }/{ {env::request } }" />
<?php 
 if($GLOBALS['og:image']) 
 echo '<meta property="og:image" content="'.$GLOBALS['og:image'].'" />'; 
 else 
 echo '<meta property="og:image" content="{ {env::url} }/files/pfad-zum-logo/logo.jpg" />'; 
?>

* Die Inserttags in Zeile 3 müssen ohne Leerzeichen zwischen den geschweiften Klammern geschrieben werden.

Mit der if-Abfrage prüfen wir zunächst, ob ein Bild festgelegt wurde. Ist dies der Fall, dann soll es als Vorschaubild verwendet werden. Wenn kein Bild in den News verwendet wurde, soll stattdessen das Logo verwendet werden.

Mit dem Facebook-Debugger kannst du im Anschluss überprüfen, welche Daten von eurer Website ausgewertet werden.

Nachtrag von Dave N.:

Auf der FB-Developer-Seite habe ich gelesen, dass das Vorschaubild mittlerweile in einer höheren Auflösung vorliegen sollte (mind. 1200px) -- siehe https://developers.facebook.com/docs/sharing/best-practices#images

Ich habe deshalb den Code dahingehend angepasst und außerdem noch eine kleine Schleife eingebaut für den Fall, dass das News-Vorschaubild im Hochformat ist. Alles in allem sieht der angepasste Code auf meiner Seite nun folgendermaßen aus:

<?php
  if($this->width > $this->height) {
    #Querformatbilder
    $ogimage = $this->getImage($this->urlEncode($this->singleSRC), 1200, 630 , 'crop');
  }else{
    #Hochformatbilder
    $ogimage = $this->getImage($this->urlEncode($this->singleSRC), 630, 0 , 'proportional');
  }
  if($ogimage != "") {
    $GLOBALS['og:image'] = $this->Environment->base . $ogimage; 
  }
?>

Zuletzt aktualisiert am 03.12.2021 von Dennis Erdmann.

Zurück