Struturierte Daten - Microdata und Schema.org
Aus Wikizone
https://developers.google.com/search/docs/guides/intro-structured-data Google Guide mit Beispielprojekt auf Glitch http://schema.org/docs/gs.html Getting Started Artikel https://search.google.com/structured-data/testing-tool Testtool für strukturierte Daten https://productforums.google.com/forum/#!topicsearchin/webmasters/category$3Astructured-data // Google Support Forum https://developers.google.com/search/reference/overview Google Referenz für Daten(typen)
Strukturierte Daten stellen eine standartisierte Methode dar, mit der man die Inhalte einer Seite bereitstellt. Die Standards sorgen dafür, dass die Inhalte und deren Bedeutung Maschinenlesbar werden. Das von Google bevorzugte Datenformat ist JSON-LD. Im Prinzip eine Notation die sich an JavaScript orientiert und auch für Menschen gut lesbar ist.
Wir erstellen also JSON-LD, das sich in <script> Tags irgendwo im <head> oder <body> befinden darf.
JSON-LD Container
<head>
<script type="application/ld+json">
</script>
</head>
Art der Daten definieren
Zwischen die JavaScript Tags kommt die Datendefinition. Als erstes erklären wir mit @context, dass es sich um Daten nach schema.org handelt. Dazu kommt die Information um welchen typ es sich handelt - nämlich ein Rezept. Das funktioniert mit @type Zwischen den Script-Tags steht dann folgendes.
{
"@context": "http://schema.org/",
"@type": "Recipe"
}
Eigenschaften hinzufügen
Ein Titel ist oft die erste Eigenschaft die man noch benötigt. Je nach Typ der Daten kann man unterschiedliche Eigenschaften hinzufügen. Es gibt benötigte (required) Eigenschaften die man in jedem Fall hinterlegen sollte und empfohlene (recommended). Welche es gibt findet man bei schema.org, welche Google wichtig es sind findet man in der Dokumentation von Google.
https://developers.google.com/search/docs/data-types/recipe#recipe_properties
Aufbau der Eigenschaften
Die Eigenschaften werden mit Komma voneinander getrennt. Im Einfachsten Fall kann eine Eigenschaft so aussehen:
"name": "Party Coffee Cake", "image": "https://www.leannebrown.com/wp-content/uploads/2016/12/up-close-pear-cake.jpg",
Komplexere Daten
Manche Eigenschaften werden nocheinmal genauer differenziert. Für den Autor des Rezepts möchten wir zuerst erklären, dass es sich um eine Person handelt, zusätzlich wie er heißt. Hier verwendet man für die Definition ein weiteres JSON Objekt. JSON Objekte erkennt man an den umschließenden geschweiften Klammern {}
"author": {
"@type": "Person",
"name": "Mary Stone"
},
In der Author Eigenschaft haben wir so nochmal ein Objekt, das verschiedene weitere Untereigenschaften definiert.
Manchmal benötigt man auch eine einfache Liste mit gleichartigen Elementen, im Rezept z.B. eine Liste mit Zutaten. So etwas bildet man mit einem Array ab. Ein Array erkennt man an den umschließenden eckigen Klammern []:
"recipeIngredient": [
"2 cups of flour",
"3/4 cup white sugar",
"2 teaspoons baking powder",
"1/2 teaspoon salt",
"1/2 cup butter",
"2 eggs",
"3/4 cup milk"
],
Validieren von strukturierten Daten
Mit dem Google Test tool kann und sollte man die Daten mal testen
Structured Data Testing Tool
Vorteile von strukturierten Daten
- Bessere Suchergebnisse
- Bessere Auswertbarkeit
- Google (oder auch andere Dienste) können definierte Daten gezielt hervorheben. Bei einem Rezept zeigt Google in der Bildersuche z.B. einen Rezept Badge an. Bei der Sprachunterstützung in Google Home kann so auch gezielt nach Dingen gesucht werden (Zeige mir Rezepte mit Thunfisch)
Rezept - vollständiges Javascript Beispiel
<html>
<head>
...
<script type="application/ld+json">
{
"@context": "http://schema.org/",
"@type": "Recipe",
"name": "Party Coffee Cake",
"image": "https://www.leannebrown.com/wp-content/uploads/2016/12/up-close-pear-cake.jpg",
"author": {
"@type": "Person",
"name": "Mary Stone"
},
"datePublished": "2018-03-10",
"description": "This coffee cake is awesome and perfect for parties.",
"prepTime": "PT20M",
"cookTime": "PT30M",
"totalTime": "PT50M",
"recipeYield": "10 servings",
"recipeCategory": "Dessert",
"recipeCuisine": "American",
"keywords": "cake for a party, coffee",
"nutrition": {
"@type": "NutritionInformation",
"calories": "270 calories"
},
"recipeIngredient": [
"2 cups of flour",
"3/4 cup white sugar",
"2 teaspoons baking powder",
"1/2 teaspoon salt",
"1/2 cup butter",
"2 eggs",
"3/4 cup milk"
],
"recipeInstructions": [
{
"@type": "HowToStep",
"text": "Preheat the oven to 350 degrees F. Grease and flour a 9x9 inch pan."
},
{
"@type": "HowToStep",
"text": "In a medium bowl, combine flour, sugar, and cinnamon."
},
{
"@type": "HowToStep",
"text": "Mix in butter until the entire mixture is crumbly."
},
{
"@type": "HowToStep",
"text": "In a large bowl, combine flour, sugar, baking powder, and salt."
},
{
"@type": "HowToStep",
"text": "Mix in the butter."
},
{
"@type": "HowToStep",
"text": "Spread into the prepared pan."
},
{
"@type": "HowToStep",
"text": "Sprinkle the streusel mixture on top of the cake."
},
{
"@type": "HowToStep",
"text": "Bake for 30 to 35 minutes, or until firm."
},
{
"@type": "HowToStep",
"text": "Allow to cool."
}
],
"video": [
{
"@type": "VideoObject",
"name": "How to make a Party Coffee Cake",
"description": "This is how you make a Party Coffee Cake.",
"thumbnailUrl": [
"https://example.com/photos/1x1/photo.jpg",
"https://example.com/photos/4x3/photo.jpg",
"https://example.com/photos/16x9/photo.jpg"
],
"contentUrl": "http://www.example.com/video123.flv",
"embedUrl": "http://www.example.com/videoplayer.swf?video=123",
"uploadDate": "2018-02-05T08:00:00+08:00",
"duration": "PT1M33S",
"interactionCount": "2347",
"expires": "2019-02-05T08:00:00+08:00"
}
]
}
</script>
</head>
</html>
Google Rezept Beispiel komplett
Das Beispiel von Google geht von Rezepten aus (siehe unten). Daher hier am Beispiel Rezept wie man generell vorgeht um strukturierte Daten zu definieren. D.h. wie muss es nachher im Quelltext aussehen.
index.html (vorher)
<!doctype HTML>
<html class="no-js">
<head>
<meta charset="utf-8">
<title>Home of the best cakes - Recipe XYZ</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,700">
<link rel="manifest" href="manifest.json">
<link rel="stylesheet" href="third_party/css/bootstrap.css">
<link rel="stylesheet" href="third_party/css/mysite.css">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="description" content="This shop is awesome.">
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">The cake makery</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
<a href="recipes.html">Recipes</a>
</li>
<li>
<a href="about.html">About</a>
</li>
<li>
<a href="contact.html">Contact</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Page Content -->
<div class="container">
<!-- Page Heading/Breadcrumbs -->
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Recipe XYZ
<small>Subheading</small>
</h1>
<ol class="breadcrumb">
<li><a href="index.html">Home</a>
</li>
<li><a href="recipes.html">Recipes</a>
</li>
<li class="active">Coffee Cake</li>
</ol>
</div>
</div>
<!-- /.row -->
<!-- Features Section -->
<div class="row">
<div class="col-lg-12">
<h2 class="page-header">Party Coffee Cake</h2>
</div>
<div class="col-md-6">
<p><strong>Recipe author</strong>: Mary Stone</p>
<p><strong>Date published</strong>: March 10, 2018</p>
<p>This coffee cake is awesome and perfect for parties.</p>
<h2>Ingredients</h2>
<ul>
<li>2 cups of flour</li>
<li>3/4 cup white sugar</li>
<li>2 teaspoons baking powder</li>
<li>1/2 teaspoon salt</li>
<li>1/2 cup butter</li>
<li>2 eggs</li>
<li>3/4 cup milk</li>
<li>1 teaspoon vanilla extract</li>
<li>1 1/2 teaspoon group cinnamon</li>
<h2>Directions</h2>
<p>Yield: 10 servings</p>
<p>Prep time: 20 minutes</p>
<p>Cook time: 30 minutes</p>
<p>Total time: 50 minutes</p>
<li>Preheat the oven to 350 degrees F. Grease and flour a 9x9 inch pan.</li>
<li>Make the streusal topping. In a medum bowl, combine flour, sugar, and cinnamon. Mix in butter
until the entire mixture is crumbly.</li>
<li>In a large bowl, combine flour, sugar, baking powder, and salt. Mix in the butter. Mix in the
milk, egg, and vanilla. Spread into the prepared pan. </li>
<li>Sprinkle the streudal mixture on top of the cake.</li>
<li>Bake for 30 to 35 minutes, or until firm. Allow to cool.</li>
</ul>
<h2>Nutrition facts</h2>
<p>Per slice: 270 calories; 12 g fat; 37 carbohydrates; 2 g protein; 45 mg cholesterol;
195 mg sodium.</p>
</div>
<div class="col-md-6">
<img class="img-responsive" src="https://cdn.glitch.com/9a1d370c-723c-4036-befb-c5914fe3327d%2Fcake.jpg?1554931349015" alt="Party coffee cake">
</div>
</div>
<!-- /.row -->
<hr>
<!-- Reviews Section -->
<div class="row">
<div class="col-lg-12">
<h2 class="page-header">18 user reviews</h2>
</div>
<!-- list of reviews -->
<div class="col-md-6">
<p><span class="review-date">2018-05-01</span>
<span class="review-stars">****</span>
<span class="review-name">Mary</span>
<span class="review-text">This coffee cake is delicious!</span></p>
<p><span class="review-date">2018-05-04</span>
<span class="review-stars">*****</span>
<span class="review-name">Susan</span>
<span class="review-text">The cake instructions are superbly crafted and accurately designed.</span></p>
<p><span class="review-date">2018-02-01</span>
<span class="review-stars">***</span>
<span class="review-name">Mark</span>
<span class="review-text">The cake also includes paprika, which makes me nervous.</span></p>
<p><span class="review-date">2018-02-01</span>
<span class="review-stars">***</span>
<span class="review-name">Vanessa</span>
<span class="review-text">I think the candle on top looks very cool, but only if you have the time to bother with it.</span></p>
<p><span class="review-date">2018-02-01</span>
<span class="review-stars">***</span>
<span class="review-name">Simone</span>
<span class="review-text">I like that they added sprinkles to the top.</span></p>
<p><span class="review-date">2018-02-21</span>
<span class="review-stars">****</span>
<span class="review-name">Maurice</span>
<span class="review-text">The coffee cake was easy to make, and tasted great.</span></p>
<p><a href="#">(Expand all reviews)</a></p>
</div>
<!-- /list of reviews -->
<!-- submit review column -->
<div class="col-md-6">
<form name="sentMessage" id="newReview" novalidate>
<div>Leave your review here!</div>
<div class="control-group form-group">
<div class="controls">
<label>Your Name:</label>
<input type="text" class="form-control" id="name"
required data-validation-required-message="Please enter your name.">
<p class="help-block"></p>
</div>
</div>
<div class="control-group form-group">
<div class="controls">
<label>Rating:</label>
<select name="review" id="review" class="form-control"
required data-validation-required-message="Please select a rating.">
<option value="5">5 Stars (*****)</option>
<option value="4">4 Stars (****)</option>
<option value="3">3 Stars (***)</option>
<option value="2">2 Stars (**)</option>
<option value="1">1 Star (*)</option>
</select>
<p class="help-block"></p>
</div>
</div>
<div class="control-group form-group">
<div class="controls">
<label>Review text:</label>
<textarea rows="5" cols="100" class="form-control" id="message"
required data-validation-required-message="Please enter your message"
maxlength="999" style="resize:none"></textarea>
</div>
</div>
<div id="success"></div>
<!-- For success/fail messages -->
<button type="submit" class="btn btn-primary">Submit review</button>
</form>
</div>
</div>
<!-- /.row -->
<hr>
<!-- Call to Action Section -->
<div class="well">
<div class="row">
<div class="col-md-8">
<p>Try out our summer cake recipe!</p>
</div>
<div class="col-md-4">
<a class="btn btn-lg btn-primary btn-block" href="#">Bake that cake</a>
</div>
</div>
</div>
<hr>
<!-- Footer -->
<footer>
<div class="row">
<div class="col-lg-12">
<p>Copyright © Home of the best cakes, 2018 |
<a href="http://html5-templates.com/" target="_blank" rel="nofollow">HTML5 Templates</a></p>
</div>
</div>
</footer>
</div>
<!-- /.container -->
</body>
</html>
final-index.html (mit microdata)
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8" />
<title>Home of the best cakes - Recipe XYZ</title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Open+Sans:400,700"
/>
<link rel="manifest" href="manifest.json" />
<link rel="stylesheet" href="third_party/css/bootstrap.css" />
<link rel="stylesheet" href="third_party/css/mysite.css" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<meta name="description" content="This shop is awesome." />
<script type="application/ld+json">
{
"@context": "http://schema.org/",
"@type": "Recipe",
"name": "Party Coffee Cake",
"image": [
"https://www.leannebrown.com/wp-content/uploads/2016/12/up-close-pear-cake.jpg"
],
"author": {
"@type": "Person",
"name": "Mary Stone"
},
"datePublished": "2018-03-10",
"description": "This coffee cake is awesome and perfect for parties.",
"prepTime": "PT20M",
"cookTime": "PT30M",
"totalTime": "PT50M",
"recipeYield": "10 servings",
"recipeCategory": "Dessert",
"recipeCuisine": "American",
"keywords": "cake for a party, coffee",
"nutrition": {
"@type": "NutritionInformation",
"calories": "270 calories"
},
"recipeIngredient": [
"2 cups of flour",
"3/4 cup white sugar",
"2 teaspoons baking powder",
"1/2 teaspoon salt",
"1/2 cup butter",
"2 eggs",
"3/4 cup milk"
],
"recipeInstructions": [
{
"@type": "HowToStep",
"text": "Preheat the oven to 350 degrees F. Grease and flour a 9x9 inch pan."
},
{
"@type": "HowToStep",
"text": "In a medium bowl, combine flour, sugar, and cinnamon."
},
{
"@type": "HowToStep",
"text": "Mix in butter until the entire mixture is crumbly."
},
{
"@type": "HowToStep",
"text": "In a large bowl, combine flour, sugar, baking powder, and salt."
},
{
"@type": "HowToStep",
"text": "Mix in the butter."
},
{
"@type": "HowToStep",
"text": "Spread into the prepared pan."
},
{
"@type": "HowToStep",
"text": "Sprinkle the streusel mixture on top of the cake."
},
{
"@type": "HowToStep",
"text": "Bake for 30 to 35 minutes, or until firm."
},
{
"@type": "HowToStep",
"text": "Allow to cool."
}
],
"video": [
{
"@type": "VideoObject",
"name": "How to make a Party Coffee Cake",
"description": "This is how you make a Party Coffee Cake.",
"thumbnailUrl": [
"https://example.com/photos/1x1/photo.jpg",
"https://example.com/photos/4x3/photo.jpg",
"https://example.com/photos/16x9/photo.jpg"
],
"contentUrl": "http://www.example.com/video123.flv",
"embedUrl": "http://www.example.com/videoplayer.swf?video=123",
"uploadDate": "2018-02-05T08:00:00+08:00",
"duration": "PT1M33S",
"interactionCount": "2347",
"expires": "2019-02-05T08:00:00+08:00"
}
],
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "5",
"ratingCount": "18"
},
"review": {
"@type": "Review",
"reviewRating": {
"@type": "Rating",
"ratingValue": "4",
"bestRating": "5"
},
"author": {
"@type": "Person",
"name": "Mary"
},
"datePublished": "2018-05-01",
"reviewBody": "This cake is delicious!",
"publisher": "The cake makery"
}
}
</script>
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button
type="button"
class="navbar-toggle"
data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1"
>
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">The cake makery</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
<a href="recipes.html">Recipes</a>
</li>
<li>
<a href="about.html">About</a>
</li>
<li>
<a href="contact.html">Contact</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Page Content -->
<div class="container">
<!-- Page Heading/Breadcrumbs -->
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">
Recipe XYZ
<small>Subheading</small>
</h1>
<ol class="breadcrumb">
<li><a href="index.html">Home</a></li>
<li><a href="recipes.html">Recipes</a></li>
<li class="active">Coffee Cake</li>
</ol>
</div>
</div>
<!-- /.row -->
<!-- Features Section -->
<div class="row">
<div class="col-lg-12">
<h2 class="page-header">Party Coffee Cake</h2>
</div>
<div class="col-md-6">
<p><strong>Recipe author</strong>: Mary Stone</p>
<p><strong>Date published</strong>: March 10, 2018</p>
<p>This coffee cake is awesome and perfect for parties.</p>
<h2>Ingredients</h2>
<ul>
<li>2 cups of flour</li>
<li>3/4 cup white sugar</li>
<li>2 teaspoons baking powder</li>
<li>1/2 teaspoon salt</li>
<li>1/2 cup butter</li>
<li>2 eggs</li>
<li>3/4 cup milk</li>
<li>1 teaspoon vanilla extract</li>
<li>1 1/2 teaspoon group cinnamon</li>
<h2>Directions</h2>
<p>Yield: 10 servings</p>
<p>Prep time: 20 minutes</p>
<p>Cook time: 30 minutes</p>
<p>Total time: 50 minutes</p>
<li>
Preheat the oven to 350 degrees F. Grease and flour a 9x9 inch
pan.
</li>
<li>
Make the streusal topping. In a medum bowl, combine flour, sugar,
and cinnamon. Mix in butter until the entire mixture is crumbly.
</li>
<li>
In a large bowl, combine flour, sugar, baking powder, and salt.
Mix in the butter. Mix in the milk, egg, and vanilla. Spread into
the prepared pan.
</li>
<li>Sprinkle the streudal mixture on top of the cake.</li>
<li>Bake for 30 to 35 minutes, or until firm. Allow to cool.</li>
</ul>
<h2>Nutrition facts</h2>
<p>
Per slice: 270 calories; 12 g fat; 37 carbohydrates; 2 g protein; 45
mg cholesterol; 195 mg sodium.
</p>
</div>
<div class="col-md-6">
<img
class="img-responsive"
src="https://cdn.glitch.com/9a1d370c-723c-4036-befb-c5914fe3327d%2Fcake.jpg?1554931349015"
alt="Party coffee cake"
/>
</div>
</div>
<!-- /.row -->
<hr />
<!-- Reviews Section -->
<div class="row">
<div class="col-lg-12">
<h2 class="page-header">18 user reviews</h2>
</div>
<!-- list of reviews -->
<div class="col-md-6">
<p>
<span class="review-date">2018-05-01</span>
<span class="review-stars">****</span>
<span class="review-name">Mary</span>
<span class="review-text">This coffee cake is delicious!</span>
</p>
<p>
<span class="review-date">2018-05-04</span>
<span class="review-stars">*****</span>
<span class="review-name">Susan</span>
<span class="review-text"
>The cake instructions are superbly crafted and accurately
designed.</span
>
</p>
<p>
<span class="review-date">2018-02-01</span>
<span class="review-stars">***</span>
<span class="review-name">Mark</span>
<span class="review-text"
>The cake also includes paprika, which makes me nervous.</span
>
</p>
<p>
<span class="review-date">2018-02-01</span>
<span class="review-stars">***</span>
<span class="review-name">Vanessa</span>
<span class="review-text"
>I think the candle on top looks very cool, but only if you have
the time to bother with it.</span
>
</p>
<p>
<span class="review-date">2018-02-01</span>
<span class="review-stars">***</span>
<span class="review-name">Simone</span>
<span class="review-text"
>I like that they added sprinkles to the top.</span
>
</p>
<p>
<span class="review-date">2018-02-21</span>
<span class="review-stars">****</span>
<span class="review-name">Maurice</span>
<span class="review-text"
>The coffee cake was easy to make, and tasted great.</span
>
</p>
<p><a href="#">(Expand all reviews)</a></p>
</div>
<!-- /list of reviews -->
<!-- submit review column -->
<div class="col-md-6">
<form name="sentMessage" id="newReview" novalidate>
<div>Leave your review here!</div>
<div class="control-group form-group">
<div class="controls">
<label>Your Name:</label>
<input
type="text"
class="form-control"
id="name"
required
data-validation-required-message="Please enter your name."
/>
<p class="help-block"></p>
</div>
</div>
<div class="control-group form-group">
<div class="controls">
<label>Rating:</label>
<select
name="review"
id="review"
class="form-control"
required
data-validation-required-message="Please select a rating."
>
<option value="5">5 Stars (*****)</option>
<option value="4">4 Stars (****)</option>
<option value="3">3 Stars (***)</option>
<option value="2">2 Stars (**)</option>
<option value="1">1 Star (*)</option>
</select>
<p class="help-block"></p>
</div>
</div>
<div class="control-group form-group">
<div class="controls">
<label>Review text:</label>
<textarea
rows="5"
cols="100"
class="form-control"
id="message"
required
data-validation-required-message="Please enter your message"
maxlength="999"
style="resize:none"
></textarea>
</div>
</div>
<div id="success"></div>
<!-- For success/fail messages -->
<button type="submit" class="btn btn-primary">Submit review</button>
</form>
</div>
</div>
<!-- /.row -->
<hr />
<!-- Call to Action Section -->
<div class="well">
<div class="row">
<div class="col-md-8">
<p>Try out our summer cake recipe!</p>
</div>
<div class="col-md-4">
<a class="btn btn-lg btn-primary btn-block" href="#"
>Bake that cake</a
>
</div>
</div>
</div>
<hr />
<!-- Footer -->
<footer>
<div class="row">
<div class="col-lg-12">
<p>
Copyright © Home of the best cakes, 2018 |
<a
href="http://html5-templates.com/"
target="_blank"
rel="nofollow"
>HTML5 Templates</a
>
</p>
</div>
</div>
</footer>
</div>
<!-- /.container -->
</body>
</html>
