Bearbeiten von „Struturierte Daten - Microdata und Schema.org“

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