Struturierte Daten - Microdata und Schema.org: Unterschied zwischen den Versionen
Aus Wikizone
(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…“) |
(kein Unterschied)
|
Version vom 23. Dezember 2019, 11:04 Uhr
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)
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>
