Dynamische Konfiguration von Meta-Daten mit pimcore

Lukas [Pimcore, php, Technologien]

Es gibt einige wichtige Meta-Daten, die jede gute Webseite haben sollte. Dies umfasst neben den bekannten description und meta-tags, auch Open Graph Tags für Social Media sowie ein Favicon. Damit diese einfach konfigurierbar sind, versorgen wir diese in der Website-Konfiguration. Wir gestalten dabei auf den Namen so, dass man einfach selbst auch neue Meta-Tags hinzufügen kann.

Dabei können einige Einstellungen (Title, Description, Keywords) auch pro Dokument eingestellt werden. Das wird zuerst geprüft. Im Anschluss werden alle Konfigurationen, die einem bestimmten Muster entsprechen den Meta-Tags hinzugefügt.

Auch soll es möglich sein in einem Controller alle Meta-Tags zu überschreiben. So kann man zum Beispiel auf einer Detailseite eines Produktes den Titel, die Beschreibung sowie das Open Graph Image anhand des aktuellen Objektes überschreiben. Dies geschieht über die metaConfig Variable, die der View übergeben wird.

$this->view->metaConfig["og:image"] = $object->getMainImage()->getThumbnail("ogimage");

Der Teil im Header, der die Meta-Daten sammelt und zusammenstellt:

foreach ($this->config as $key => $value) {
       if (isset($this->metaConfig[$key])) {
           $value = $this->metaConfig[$key];
       }
       if ($key == "meta:keywords") {
           $this->headMeta()->appendName("keywords", ($this->document->getKeywords() != "") ? $this->document->getKeywords() : $value);
       } elseif ($key == "meta:description") {
           $description = ($this->document->getDescription() != "") ? $this->document->getDescription() : $value;
           $this->headMeta()->appendName("description", $description);
           $this->headMeta()->appendProperty('og:description', $description);
       } elseif (substr($key, 0, 4) == "meta:") {
           $this->headMeta()->appendName(substr($key, 4, strlen($key)), $value);
       } elseif (substr($key, 0, 3) == "og:") {
           if ($key == "og:image") {
               $value = Pimcore_Tool::getHostUrl().$value;
           }
           $this->headMeta()->appendProperty($key, $value);
       } elseif (substr($key, 0, 5) == "link:") {
           if ($value instanceof Asset_Image) {
               $this->headLink(array('href' => $value->getFullPath(), 'rel' => substr($key, 5, strlen($key))));
           }
       }
   }

Folgende Konfigurationen sollte man hinterlegen:

  • meta:description: Eine allgemeingültige Seitenbeschreibung, für den Fall das vergessen geht, diese individuell auf einer Seite eingetragen wird.
  • meta:keywords: Entsprechend der Seitenbeschreibung
  • meta:author: Hinweis auf den Ersteller
  • meta:copyright: Angabe des Copyrights

Einstellungen für das Open Graph Protocoll

  • og:image: Vorschaubild der Webseite
  • og:type: Art der Seite, in der Regel website
  • og:description: Wird automatisch über die meta:description gesetzt
  • og:title: Wird automatisch über den pageTitle gesetzt.

Links zu Bildern, wie dem Favicon und den Apple-Touch-Bildern

  • link:shortcut icon: Favicon für die Tableiste und Favoritenliste
  • link:apple-touch-icon: Bild, welches verwendet wird, wenn man die Webseite als Shortcut auf dem Homescreen eines iOS Gerätes speichert

zurück