Howto: Rich Snippets für Online Shops – Microdata in Magento

Vor ein paar Tagen haben sich Google, Yahoo! und Bing zusammengetan um ein einheitliches Format der Microdata vorzustellen. Unter schema.org haben sie eine zentrale Referenz dazu bereitgestellt.
Diese HTML Markups sollen den Suchmaschinen helfen zu verstehen, was für Informationen auf einer Webseite vorhanden sind und welche für den Besucher von Interesse sind. Zum Beispiel kann man auf einer Produktseite eines Shops festlegen was der Produktname, was der Preis, was ein Bild, was die Verfügbarkeit, was eine Bewertung und so weiter ist.

Richtig nützlich wird das aber erst, wenn diese Informationen auch direkt in den Suchergebnissen angezeigt werden. Aus Mangel an Live-Beispielen aus Deutschland, hier ein Beispiel von google.com:

Unterhalb der gewohnten Überschrift werden in diesem Fall vier zusätzliche Informationen angezeigt:
1. Bunte Sternchen als Indikator eines Bewertungsystems (4,5)
2. Anzahl der Erfahrungsberichte (12)
3. Preis ($429,99)
4. Verfügbarkeit (In Stock)

Jetzt aber zur Erklärung, wie man das im eigenen (Magento-)Shop umsetzen kann. Für dieses Howto gehe ich davon aus, dass die Funktionsweise der Microdata grundsätzlich geläufig ist.

Aus unserem Template müssen – je nach dem wie viele verschiedene Produkt-Typen benutzt werden – vier bis sieben Dateien bearbeitet werden:
[php] /app/design/frontend/*/*/template/catalog/product/view.phtml
/app/design/frontend/*/*/template/catalog/product/price.phtml
/app/design/frontend/*/*/template/catalog/product/view/media.phtml
/app/design/frontend/*/*/template/catalog/product/view/type/simple.phtml
+ evtl.:
/app/design/frontend/*/*/template/catalog/product/view/type/configurable.phtml
/app/design/frontend/*/*/template/catalog/product/view/type/grouped.phtml
/app/design/frontend/*/*/template/catalog/product/view/type/virtual.phtml
[/php]

view.phtml

Zuallererst müssen wir ein neues Produkt „aufmachen“. Hierzu einfach um die Daten, die markiert werden sollen, ein neues div legen. Die Zahl der Zeilen kann je nach Template etwas abweichen:
[php firstline=“45″ highlight=“46″] <form action=“<?php echo $this->getAddToCartUrl($_product) ?>“ method=“post“ id=“product_addtocart_form“<?php if($_product->getOptions()): ?> enctype=“multipart/form-data“<?php endif; ?>>
<div itemscope itemtype=“http://schema.org/Product“>
<div class=“product-img-box“>
<?php echo $this->getChildHtml(‚media‘) ?>
[/php] [php firstline=“118″ highlight=“120″] }.bind(productAddToCartForm);
</script>
</div>
<div class=“product-collateral“>
[/php]

Dem Produktnamen muss nur die class=“product-name“ und itemprop=“name“ mitgegeben werden:
[php firstline=“53″ highlight=“54″] <div class=“product-shop“>
<h3 class=“product-name“ itemprop=“name“>
<?php echo $_helper->productAttribute($_product, $this->htmlEscape($_product->getName()), ’name‘) ?>
</h3>
[/php]

Da Preis und Verfügbarkeit Eigenschaften eines „Offer“ sind muss nun auch dies aufgemacht werden:
[php firstline=“70″ highlight=“70,74″] <div itemprop=“offers“ itemscope itemtype=“http://schema.org/Offer“>
<?php echo $this->getChildHtml(‚alert_urls‘) ?>
<?php echo $this->getChildHtml(‚product_type_data‘) ?>
<?php echo $this->getTierPriceHtml() ?>
</div>
[/php]

Zu guter letzt fehlt noch die Produktbeschreibung:
[php firstline=“95″ highlight=“96″] <h4><?php echo $this->__(‚Quick Overview‘) ?></h4>
<div class=“short-description“ itemprop=“description“><?php echo $_helper->productAttribute($_product, nl2br($_product->getShortDescription()), ’short_description‘) ?></div>
<?php endif;?>
[/php]

price.phtml

Damit auch der Preis in den Rich Snippets auftauchen kann, muss auch dieser richtig markiert werden. In der price.phtml muss man darauf achten, dass man die richtige Variante des Preises (regular-price, special-price, price-excluding-tax etc.) auswählt. Im Zweifelsfall einfach ausprobieren:
[php firstline=“200″ highlight=“200″] <span class=“regular-price“ id=“product-price-<?php echo $_id ?><?php echo $this->getIdSuffix() ?>“ itemprop=“price“>
<?php echo $_coreHelper->currency($_price,true,true) ?>
</span>
[/php]

media.phtml

In der media.phtml wird unter anderem das Produktbild aufgerufen. Hierzu wieder einfach die Markierung beachten:
[php firstline=“41″ highlight=“42″] <?php
$_img = ‚<img itemprop=“image“ id=“image“ src=“‚.$this->helper(‚catalog/image‘)->init($_product, ‚image‘).'“ alt=“‚.$this->htmlEscape($this->getImageLabel()).'“ title=“‚.$this->htmlEscape($this->getImageLabel()).'“ />‘;
echo $_helper->productAttribute($_product, $_img, ‚image‘)
?>
[/php]

simple.phtml

In der Datei simple.phtml finden wir den Aufruf der Verfügbarkeit. Hier einfach wieder die Markups einfügen. Gegebenenfalls müssen noch die anderen Produkttypen (bzw. Dateien in diesem Ordner) angepasst werden, die Vorgehensweise bleibt aber die gleiche:
[php firstline=“35″ highlight=“36,38″] <?php if($_product->isSaleable()): ?>
<p class=“availability“><link itemprop=“availability“ href=“http://schema.org/InStock“ /><?php echo $this->__(‚Availability: In stock.‘) ?></p>
<?php else: ?>
<p class=“availability“><link itemprop=“availability“ href=“http://schema.org/OutOfStock“ /><?php echo $this->__(‚Availability: Out of stock.‘) ?></p>
<?php endif; ?>
?>
[/php]

Wenn alles geklappt hat, kann man in dem Rich Snippets Testing Tool kontrollieren, ob die Infos richtig übergeben werden. Zu beachten ist, dass, nur weil man die Microdata richtig implementiert hat, das nicht bedeutet, dass auch ein Rich Snippet angezeigt wird. Auch weil das Thema noch relativ neu ist, findet man erst wenige Seiten die bereits Rich Snippets in den SERPs haben. Hier ein paar Beispiele aus den deutschen Suchergebnissen:

Verfasst von Ferdinand v. Seggern