Struturierte Daten - Microdata und Schema.org - Versionsgeschichte

37.49.72.8 am 23. Dezember 2019 um 13:23 Uhr

2019-12-23T13:23:23Z

37.49.72.8 am 23. Dezember 2019 um 11:06 Uhr

2019-12-23T11:06:57Z

37.49.72.8: /* Aufbau der Eigenschaften */

2019-12-23T10:55:57Z

Aufbau der Eigenschaften

37.49.72.8 am 23. Dezember 2019 um 10:55 Uhr

2019-12-23T10:55:09Z

Änderungen zeigen

37.49.72.8 am 23. Dezember 2019 um 10:20 Uhr

2019-12-23T10:20:38Z

Änderungen zeigen

37.49.72.8: Die Seite wurde neu angelegt: „ https://developers.google.com/search/docs/guides/intro-structured-data Google Guide mit Beispielprojekt auf Glitch http://schema.org/docs/gs.html Getting Sta…“

2019-12-23T10:04:21Z

Die Seite wurde neu angelegt: „ https://developers.google.com/search/docs/guides/intro-structured-data Google Guide mit Beispielprojekt auf Glitch http://schema.org/docs/gs.html Getting Sta…“

Neue Seite

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

== Beispiele ==
=== Google Beispiel ===
https://glitch.com/edit/#!/leaf-spoon?path=final-index.html:1:0
index.html (vorher)
<syntaxhighlight lang="html5">
</syntaxhighlight>
final-index.html (mit microdata)
<syntaxhighlight lang="html5">
<!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>

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">

<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>

<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>

</div>

</nav>


<div class="container">

<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>



<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>


<hr />


<div class="row">
<div class="col-lg-12">
<h2 class="page-header">18 user reviews</h2>
</div>

<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>



<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>

<button type="submit" class="btn btn-primary">Submit review</button>
</form>
</div>
</div>



<hr />


<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>
<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>

</body>
</html>
</syntaxhighlight>

@@ Zeile 7: / Zeile 7: @@
 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.
@@ Zeile 17: / Zeile 19: @@
 </syntaxhighlight>
-=== Art der Daten definieren ===
+=== Kontext und Typ 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.
@@ Zeile 70: / Zeile 72: @@
 * 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 ===
 <syntaxhighlight lang="javascript">

@@ Zeile 34: / Zeile 34: @@
 ===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",
-'''Komplexe Daten'''
+'''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 {}
@@ Zeile 47: / Zeile 46: @@
      "name": "Mary Stone"
    },
 </pre>
 In der Author Eigenschaft haben wir so nochmal ein Objekt, das verschiedene weitere '''Untereigenschaften''' definiert.

@@ Zeile 1: / Zeile 1: @@
   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
@@ Zeile 845: / Zeile 846: @@
 </html>
 </syntaxhighlight>