Struturierte Daten - Microdata und Schema.org: Unterschied zwischen den Versionen

Aus Wikizone
Wechseln zu: Navigation, Suche
(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…“)
 
Zeile 2: Zeile 2:
 
  http://schema.org/docs/gs.html Getting Started Artikel
 
  http://schema.org/docs/gs.html Getting Started Artikel
 
  https://search.google.com/structured-data/testing-tool Testtool für strukturierte Daten
 
  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
  
 +
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
 +
<syntaxhighlight lang="javascript">
 +
<head>
 +
<script type="application/ld+json">
 +
</script>
 +
</head>
 +
</syntaxhighlight>
 +
 +
 +
=== 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)
 +
 +
== Strukturierte Daten mit Schema.org definieren ==
 +
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.
 +
 +
 +
JSON-LD is used for data in a simple JavaScript-oriented object notation and is Google's preferred format for structured data. JSON-LD should be inside a <script> element in either the <head> or <body> of the page.
 +
 +
Tip: JSON-LD is case sensitive. Make sure to use the same casing as the examples.
 +
 +
To define the type of structured data, follow the steps below:
 +
 +
In index.html, create a <script> element with the type set to application/ld+json in the <head> of the page.
 +
<head>
 +
<script type="application/ld+json">
 +
</script>
 +
</head>
 +
Inside the <script> element, tell Google you're using schema.org structured data by setting @context to http://schema.org.
 +
<head>
 +
<script type="application/ld+json">
 +
{
 +
  "@context": "http://schema.org/",
 +
</script>
 +
</head>
 +
To tell Google what kind of thing you're describing, set @type to Recipe.
 +
<html>
 +
<head>
 +
<script type="application/ld+json">
 +
{
 +
  "@context": "http://schema.org/",
 +
  "@type": "Recipe"
 +
}
 +
</script>
 +
</head>
 +
</html>
 +
Add required and recommended properties
 +
Each structured data type supports a list of required and recommended properties that give Google more information about the thing being described. These requirements and recommendations power various Google products and features. There is nothing wrong with your page if it's missing some properties; it just means that it's less likely to work with certain Search features.
 +
 +
Tips
 +
 +
The order of the properties doesn't matter.
 +
Make sure each item (for example, property and value sets, arrays) is separated by a comma.
 +
Check for dangling commas at the end of the list of properties. This is a common mistake.
  
 
== Beispiele ==
 
== Beispiele ==
 
=== Google Beispiel ===
 
=== Google Beispiel ===
 
  https://glitch.com/edit/#!/leaf-spoon?path=final-index.html:1:0
 
  https://glitch.com/edit/#!/leaf-spoon?path=final-index.html:1:0
−
index.html (vorher)
+
https://developers.google.com/search/docs/data-types/recipe#recipe_properties
 +
 
 +
'''index.html (vorher)'''
 
<syntaxhighlight lang="html5">
 
<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.">
 +
    </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 &copy; 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>
 
</syntaxhighlight>
 
</syntaxhighlight>
−
final-index.html (mit microdata)
+
 
 +
'''final-index.html (mit microdata)'''
 
<syntaxhighlight lang="html5">
 
<syntaxhighlight lang="html5">
 
<!DOCTYPE html>
 
<!DOCTYPE html>

Version vom 23. Dezember 2019, 11:20 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
https://productforums.google.com/forum/#!topicsearchin/webmasters/category$3Astructured-data // Google Support Forum

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>


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)

Strukturierte Daten mit Schema.org definieren

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.


JSON-LD is used for data in a simple JavaScript-oriented object notation and is Google's preferred format for structured data. JSON-LD should be inside a <script> element in either the <head> or <body> of the page.

Tip: JSON-LD is case sensitive. Make sure to use the same casing as the examples.

To define the type of structured data, follow the steps below:

In index.html, create a <script> element with the type set to application/ld+json in the <head> of the page. <head> <script type="application/ld+json"> </script> </head> Inside the <script> element, tell Google you're using schema.org structured data by setting @context to http://schema.org. <head> <script type="application/ld+json"> { 

 "@context": "http://schema.org/",

</script> </head> To tell Google what kind of thing you're describing, set @type to Recipe. <html> <head> <script type="application/ld+json"> { 

 "@context": "http://schema.org/",
 "@type": "Recipe"

} </script> </head> </html> Add required and recommended properties Each structured data type supports a list of required and recommended properties that give Google more information about the thing being described. These requirements and recommendations power various Google products and features. There is nothing wrong with your page if it's missing some properties; it just means that it's less likely to work with certain Search features.

Tips

The order of the properties doesn't matter. Make sure each item (for example, property and value sets, arrays) is separated by a comma. Check for dangling commas at the end of the list of properties. This is a common mistake.

Beispiele

Google Beispiel

https://glitch.com/edit/#!/leaf-spoon?path=final-index.html:1:0
https://developers.google.com/search/docs/data-types/recipe#recipe_properties

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 &copy; 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 &copy; 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>
Abgerufen von „https://wiki.stephanschlegel.de/index.php?title=Struturierte_Daten_-_Microdata_und_Schema.org&oldid=24209“