Contentsharing mit Open Graph Metatags verbessern
Mit unserem Umstieg auf das CMS System Contao [1] werden nun auch alle Blogposts hier gepflegt. Wenn nun ein neu veröffentlichter Post zum Beispiel auf Linkedin oder Xing geteilt werden soll, finden diese sozialen Netzwerke zunächst keine Vorschaubilder oder Kurzbeschreibungen. Abhilfe schafft Open Graph [2] und ich möchte hier kurz aufzeigen, wie man dieses Protokoll einfach in Contao integrieren kann.
Um Vorschaubild, Titel, Beschreibung und URL des Blogpost für das Sharing bereitzustellen bedarf es nur zwei kleiner Templateanpassungen in Contao. Die grundlegende Idee stammt aus einem Blogpost von Erdmann & Freunde [3]. Open Graph nutzt meta-Tags, nach welchen die Crawler von Linkedin und Co gezielt suchen, um den Vorschauinhalt zu definieren. Beispielhaft sieht dies wie folgt aus [4]:
<head>
<meta property="og:title" content="My Shared Article Title" />
<meta property="og:description" content="Description of shared article" />
<meta property="og:url" content="http://example.com/my_article.html" />
<meta property="og:image" content="http://example.com/foo.jpg" />
</head>Umsetzung in Contao
Als erstes muss im Contao Backend unter Layout > Templates ein neues Template erzeugt werden. Als Originaltemplate wählen wir fe_page.html5, da hier der head samt den meta-Tags definiert wird. Dies kopiert das core-Template und wird können es nun anpassen. Um unsere Anpassung Updatesicher zu gestalten wollen wir nun nicht einfach unsere Änderungen direkt eintragen, sondern nutzen die Template-Vererbung [5] von Contao.
<?php $this->extend('fe_page'); ?>
<?php $this->block('meta'); ?>
<?php $this->parent(); ?>
<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} }/pfad/zum/logo.jpg" />';
?>
<?php $this->endblock(); ?>*In Zeilen 8 und 13 müssen die Leerzeichen zwischen den geschwungenen Klammern entfernt werden, damit die Inserttags von Contao erkannt werden.
Über extend(‚fe_page') wird das übergeordnete Template definiert. block(‚meta'); beschreibt, dass wir den meta-Bereich des Elterntemplates verändern möchten. Mittels der parent() Funktion wird der bisherige Inhalt aus dem Elterntemplate übernommen (wir wollen diesen Bereich ja erweitern und nicht überschreiben). Dann folgen die Open Graph meta-Tags, welche auf Contao-Variablen zugreifen. Für das Bild testen wir, ob ein spezielles gesetzt wurde (dazu kommen wir gleich), wenn nicht fallen wir auf das Logo der Webseite zurück.
Um nun ein Blogpost-spezifisches Bild zu setzen müssen wir noch das Template der Posts anpassen, in unserem Fall news_full.html5. Dabei nutzen wir das in den Beitragseinstellungen gesetzte Bild. Der Code wird einfach am Anfang des Templates eingefügt.
<?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;
}
?>Fazit
Wie man sieht, ist es mit relativ wenig Aufwand möglich, das Sharing für soziale Netze deutlich angenehmer zu gestalten. Mit Open Graph können noch deutlich mehr Eigenschaften definiert werden. Je nach dem wohin der Inhalt geteilt wird, kann man seinen Auftritt gezielt anpassen. Welcher Dienst welche Tags verwendet muss jedoch individuell getestet werden.
