Howto: Rich Snippets für Online Shops - Microdata in Magento - Online Marketing Solutions AG

Wir nutzen Cookies & das Facebook Besucheraktions-Pixel für statistische Zwecke. Einverständnis bestätigen: OK

Mehr Infos: Datenschutzbestimmungen

Google Adwords Premier Google Partner Badge
 

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:
rich-snippet-produkt

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:
rich-snippet-produkt
rich-snippet-produkt

Verfasst von Ferdinand v. Seggern

Hat dir dieser Beitrag gefallen?

Über den Autor

Blog
Unter „Blogredaktion“ werden Fachbeiträge verschiedener Experten aus dem Unternehmen ohne Autorenkennzeichnung publiziert. Ihr habt Fragen oder Anregungen zu einem speziellen Beitrag? Kein Problem, die Blogredaktion steht euch dafür gerne hier zur Verfügung.

Hinterlasse einen Kommentar

  • Peter 19.06.2011, 8:38 Uhr

    Sinnvolle Einführung, aber ich meine, dass ich so etwas auch schon auf deutschen Seiten gesehen habe.

    Wenn man beispielsweise nach einem Programm sucht, wird bei Google bei Angeboten von CHIP Online auch die „Sternvorschau“ gegeben.

  • Fabian 21.06.2011, 10:30 Uhr

    Äußerst wichtiges Thema! Microdata kann die Lösung für viele technische Webseitenprobleme sein. User-Agents können die Webseite besser „verstehen“ und sind weniger von technischen Komponenten abhängig! Auf der anderen Seite sind somit qualitative und gehaltvolle Seiten gefragt – der schnelle 5-seiteige Internetauftritt mit externer Verlinkung hat weniger Chancen. Insgesamt ein wichtiger Schritt für bessere Ergebnisse aus Suchmaschinen.

  • Ferdinand 22.06.2011, 8:41 Uhr

    Vielen Dank für euer Feedback! Ich gebe Fabian recht. Suchmaschinen wollen verstehen, was eine Webseite bietet und wird diese bevorzugt behandeln. Nicht zuletzt kann man damit aber auch Traffic generieren. Die Klickrate bei einem Ergebnis mit Bild und/oder (positiver) Bewertung ist selbstverständlich viel höher als bei einem normalen Snippet. Ein Sehr spannendes Thema!

  • Jonas 24.08.2011, 19:49 Uhr

    Ist das nur für Produkte erklaubt? Wir haben von vielen Kunden Bewertungen über uns. Zum einen über externe Portale oder über Formlure, die wir verteilen.
    Darf ich diese allgemeinen „Händlerbewertungen“ auf meiner Seite einbinden und als Rich Snippets verwenden, sodass in den SERPs Sterne angezeigt werden?

    Welche Voraussetzungen müssen erfüllt werden, damit die Bewertungssterne auch in den Serps erscheinen bei meinen URLs erscheinen?

  • Ferdinand 25.08.2011, 13:21 Uhr

    Hallo Jonas,
    Du kannst grundsätzliches alles mit Microdata versehen, nicht nur Produkte. Wenn du zum Beispiel Informationen zu einer bestimmten Person bereitstellst, kannst du ganz einfach Geburtsdatum, Beruf, Position, etc. definieren.

    Bewertungen kannst du selbstverständlich auch einbinden. Dabei ist es übrigens egal, ob das Bewertungen von z.B. Trusted Shops oder „selbsterfundene“ sind. Ob diese dann auch wirklich in den SERPs erscheinen, hat man selbst leider nicht in der Hand. Das kommt auch sehr auf die Art der Webseite an. Bei Produkten, Filmen etc. bietet sich das eher an als wenn du „nur“ für die eigene Seite Bewertungen hast.

  • nikl 05.07.2012, 17:28 Uhr

    Sehr hilfreich, vielen Dank!

    Beim Preis gibt es wohl ein kleines Problem: wenn man z.B. Upsell Produkte anbietet, werden natürlich auch diese Preise mit itemprop=“price“ versehen – das Google Test Tools gibt hier dann einen Fehler aus. Inwiefern das ein Problem ist, kann ich noch nicht sagen.

    Kann es außerdem sein, das Google nur Bilder ab einer gewissen Größe ausgibt? Ich verwende das Thumbnail mit itemprop=“image“ und das will Google einfach nicht anzeigen – obwohl die Url ausgegeben wird…

  • Martin 18.10.2012, 23:08 Uhr

    Danke für den Artikel.

    Tipp wer den Produktpreis über den pirce.phtml formatiert erhält ggf. mehrere itmes und preise. das hatte mich iritiert.

    mit diesem code snipet in der view könnt ihr das poblem lösen

    getShortDescription()):?>

    productAttribute($_product, nl2br($_product->getShortDescription()), ’short_description‘) ?>

    <span itemprop="price" content="productAttribute($_product, $_product->getFinalPrice(), ‚price‘) ?>“>

  • Stefan Kaiser 05.08.2013, 23:13 Uhr

    Hat jemand Erfahrungen bei Einsatz der Rich Snippets mit Magento 1.7.0.2 hinsichtlich der Wirkung auf die organische Suchmaschinenplatzierung?

  • Paul Stanely 22.09.2015, 5:54 Uhr

    Vielen Dank für diesen Code , es funktioniert gut .
    Rich Snippets ist sehr wichtig , um die Aufmerksamkeit der Besucher in Google-Suchergebnis zu fangen.
    Ich benutze FME Rich Snippets Erweiterung um die Schnipsel zu konfigurieren.
    Überprüfen Sie dies:https://www.fmeaddons.com/magento/rich-snippets-extension.html