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.
\nDiese HTML Markups sollen den Suchmaschinen helfen zu verstehen, was f\u00fcr Informationen auf einer Webseite vorhanden sind und welche f\u00fcr 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\u00fcgbarkeit, was eine Bewertung und so weiter ist.
\n
\nRichtig n\u00fctzlich 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:<\/p>\n
Unterhalb der gewohnten \u00dcberschrift werden in diesem Fall vier zus\u00e4tzliche Informationen angezeigt:
\n1. Bunte Sternchen als Indikator eines Bewertungsystems (4,5)
\n2. Anzahl der Erfahrungsberichte (12)
\n3. Preis ($429,99)
\n4. Verf\u00fcgbarkeit (In Stock)<\/p>\n
Jetzt aber zur Erkl\u00e4rung, wie man das im eigenen (Magento-)Shop umsetzen kann. F\u00fcr dieses Howto gehe ich davon aus, dass die Funktionsweise der Microdata grunds\u00e4tzlich gel\u00e4ufig ist.<\/p>\n
Aus unserem Template m\u00fcssen – je nach dem wie viele verschiedene Produkt-Typen benutzt werden – vier bis sieben Dateien bearbeitet werden:
\n[php]\n\/app\/design\/frontend\/*\/*\/template\/catalog\/product\/view.phtml
\n\/app\/design\/frontend\/*\/*\/template\/catalog\/product\/price.phtml
\n\/app\/design\/frontend\/*\/*\/template\/catalog\/product\/view\/media.phtml
\n\/app\/design\/frontend\/*\/*\/template\/catalog\/product\/view\/type\/simple.phtml
\n+ evtl.:
\n\/app\/design\/frontend\/*\/*\/template\/catalog\/product\/view\/type\/configurable.phtml
\n\/app\/design\/frontend\/*\/*\/template\/catalog\/product\/view\/type\/grouped.phtml
\n\/app\/design\/frontend\/*\/*\/template\/catalog\/product\/view\/type\/virtual.phtml
\n[\/php]\n
Zuallererst m\u00fcssen 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:
\n[php firstline=“45″ highlight=“46″]\n<form action=“<?php echo $this->getAddToCartUrl($_product) ?>“ method=“post“ id=“product_addtocart_form“<?php if($_product->getOptions()): ?> enctype=“multipart\/form-data“<?php endif; ?>>
\n<div itemscope itemtype=“http:\/\/schema.org\/Product“>
\n<div class=“product-img-box“>
\n<?php echo $this->getChildHtml(‚media‘) ?>
\n[\/php]\n[php firstline=“118″ highlight=“120″]\n}.bind(productAddToCartForm);
\n<\/script>
\n<\/div>
\n<div class=“product-collateral“>
\n[\/php]\n
Dem Produktnamen muss nur die class=“product-name“ und itemprop=“name“ mitgegeben werden:
\n[php firstline=“53″ highlight=“54″]\n<div class=“product-shop“>
\n<h3 class=“product-name“ itemprop=“name“>
\n<?php echo $_helper->productAttribute($_product, $this->htmlEscape($_product->getName()), ’name‘) ?>
\n<\/h3>
\n[\/php]\n
Da Preis und Verf\u00fcgbarkeit Eigenschaften eines „Offer“ sind muss nun auch dies aufgemacht werden:
\n[php firstline=“70″ highlight=“70,74″]\n<div itemprop=“offers“ itemscope itemtype=“http:\/\/schema.org\/Offer“>
\n<?php echo $this->getChildHtml(‚alert_urls‘) ?>
\n<?php echo $this->getChildHtml(‚product_type_data‘) ?>
\n<?php echo $this->getTierPriceHtml() ?>
\n<\/div>
\n[\/php]\n
Zu guter letzt fehlt noch die Produktbeschreibung:
\n[php firstline=“95″ highlight=“96″]\n<h4><?php echo $this->__(‚Quick Overview‘) ?><\/h4>
\n<div class=“short-description“ itemprop=“description“><?php echo $_helper->productAttribute($_product, nl2br($_product->getShortDescription()), ’short_description‘) ?><\/div>
\n<?php endif;?>
\n[\/php]\n
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\u00e4hlt. Im Zweifelsfall einfach ausprobieren:
\n[php firstline=“200″ highlight=“200″]\n<span class=“regular-price“ id=“product-price-<?php echo $_id ?><?php echo $this->getIdSuffix() ?>“ itemprop=“price“>
\n<?php echo $_coreHelper->currency($_price,true,true) ?>
\n<\/span>
\n[\/php]\n
In der media.phtml wird unter anderem das Produktbild aufgerufen. Hierzu wieder einfach die Markierung beachten:
\n[php firstline=“41″ highlight=“42″]\n<?php
\n$_img = ‚<img itemprop=“image“ id=“image“ src=“‚.$this->helper(‚catalog\/image‘)->init($_product, ‚image‘).'“ alt=“‚.$this->htmlEscape($this->getImageLabel()).'“ title=“‚.$this->htmlEscape($this->getImageLabel()).'“ \/>‘;
\necho $_helper->productAttribute($_product, $_img, ‚image‘)
\n?>
\n[\/php]\n
In der Datei simple.phtml finden wir den Aufruf der Verf\u00fcgbarkeit. Hier einfach wieder die Markups einf\u00fcgen. Gegebenenfalls m\u00fcssen noch die anderen Produkttypen (bzw. Dateien in diesem Ordner) angepasst werden, die Vorgehensweise bleibt aber die gleiche:
\n[php firstline=“35″ highlight=“36,38″]\n<?php if($_product->isSaleable()): ?>
\n<p class=“availability“><link itemprop=“availability“ href=“http:\/\/schema.org\/InStock“ \/><?php echo $this->__(‚Availability: In stock.‘) ?><\/p>
\n<?php else: ?>
\n<p class=“availability“><link itemprop=“availability“ href=“http:\/\/schema.org\/OutOfStock“ \/><?php echo $this->__(‚Availability: Out of stock.‘) ?><\/p>
\n<?php endif; ?>
\n?>
\n[\/php]\n
Wenn alles geklappt hat, kann man in dem Rich Snippets Testing Tool kontrollieren, ob die Infos richtig \u00fcbergeben 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:<\/p>\n
Verfasst von Ferdinand v. Seggern<\/p>\n","protected":false},"excerpt":{"rendered":"
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\u00fcr Informationen auf einer Webseite vorhanden sind und welche f\u00fcr den Besucher von Interesse sind. Zum Beispiel kann […]<\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"content-type":"","footnotes":""},"categories":[53],"tags":[113,114],"yoast_head":"\n