In aller Regel ist es eine schlechte Idee, Syntax z.B. mit der CSS-Anweisung display: none; zu verstecken. Google mag keine versteckten Dinge. Trotzdem gibt es manchmal einfach keine andere Möglichkeit. Gerade wenn es sich um schema.org Syntax handelt den man in WordPress einbinden will. Hier steht, wie man ihn trotzdem “verstecken kann:

Schema.org Produkt-Syntax

Ein etwas ausführlicheres Beispiel.

<span itemscope="itemscope" itemtype="http://schema.org/Product">
	<meta itemprop="name" content="[name]" />
	<link itemprop="image" href="[image]" />
	<span itemprop="brand" itemscope="itemscope" itemtype="http://schema.org/Brand">
		<meta itemprop="name" content="[brand]" />
	</span>
	<meta itemprop="productID" content="[identifier]" />
	<meta itemprop="description" content="[description]" />
	<span itemprop="offers" itemscope="itemscope" itemtype="http://schema.org/Offer">
		<meta itemprop="price" content="[price]" />
		<meta itemprop="priceCurrency" content="USD" />
		<link itemprop="availability" href="http://schema.org/InStock" />
	</span>
	<span itemprop="aggregateRating" itemscope="itemscope" itemtype="http://schema.org/AggregateRating">
		<meta itemprop="ratingValue" content="[rating]" />
		<meta itemprop="bestRating" content="10" />
		<meta itemprop="worstRating" content="1" />
		<meta itemprop="ratingCount" content="1" />
    </span>
</span>

Dabei ist darauf zu achten, dass die Elemente in eckigen Klammern (z.B. [name]) durch den entsprechenden Inhalt ersetzt wird.

Versteckt, aber doch nicht?

Wie man sieht, verwende ich (fast) ausschließlich meta-Tags, die HTML-valide sind aber trotzdem unsichtbar im Frontend auftauchen. So lässt sich ein Syntax speziell z.B. als Shortcode mit einem entsprechendem Plugin wie dem Rich Snippet WordPress Plugin verwenden ohne dass man selbst am Quelltext des eigenes Themes rumbasteln muss.

Beispiel

<span itemscope="itemscope" itemtype="http://schema.org/Product">
	<meta itemprop="name" content="Donuts" />
	<link itemprop="image" href="https://wp-buddy.com/de/wp-content/uploads/sites/2/2014/01/donuts.jpg" />
	<span itemprop="brand" itemscope="itemscope" itemtype="http://schema.org/Brand">
		<meta itemprop="name" content="Bäcker Mahlzeit" />
	</span>
	<meta itemprop="productID" content="DNT-1" />
	<meta itemprop="description" content="Leckere Donuts" />
	<span itemprop="offers" itemscope="itemscope" itemtype="http://schema.org/Offer">
		<meta itemprop="price" content="2" />
		<meta itemprop="priceCurrency" content="EUR" />
		<link itemprop="availability" href="http://schema.org/InStock" />
	</span>
	<span itemprop="aggregateRating" itemscope="itemscope" itemtype="http://schema.org/AggregateRating">
		<meta itemprop="ratingValue" content="9" />
		<meta itemprop="bestRating" content="10" />
		<meta itemprop="worstRating" content="1" />
		<meta itemprop="ratingCount" content="1" />
    </span>
</span>

Und das wird uns das Rich Snippet Tool ausspucken:

Eine weitere Alternative: JSON-LD

Als weitere Möglichkeit gibt es hier noch das JSON-LD-Format welches Google ebenso erkennen kann. Auf den Hilfeseiten steht, dass es sogar die bevorzugte Methode sei. Vielleicht, weil es sich leichter auslesen lässt. Hier das obige Beispiel im JSON-LD-Format:

<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Product",
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "9",
"bestRating": "10",
"worstRating": "1",
"ratingCount": "11"
},
"name": "Donuts",
"image": "https://wp-buddy.com/de/wp-content/uploads/sites/2/2014/01/donuts.jpg",
"offers": {
"@type": "Offer",
"availability": "http://schema.org/InStock",
"price": "2.00",
"priceCurrency": "EUR"
},
"brand": [
{
"@type": "Brand",
"name": "Bäcker Mahlzeit"
}
]
}
</script>