Fügen Sie Ihren Webseiten strukturierte Daten hinzu

Die Google-Suche arbeitet hart daran, den Inhalt einer Webseite zu verstehen. Sie können uns helfen, indem Sie explizite Hinweise zur Bedeutung einer Seite mit strukturierten Daten geben.

Strukturierte Daten bieten eine Möglichkeit, Informationen zu einer Seite zu standardisieren und den Seiteninhalt zu klassifizieren. Wir verwenden auch strukturierte Daten, um spezielle Suchergebnisfunktionen und -verbesserungen zu ermöglichen. Beispielsweise kann eine Rezeptseite mit gültigen strukturierten Daten in einem grafischen Suchergebnis angezeigt werden, das wir in einem Host-Karussell als reichhaltiges Ergebnis bezeichnen:

3c4b35df592b40b2.png

Was du bauen wirst

Dieses Codelab führt Sie durch das Hinzufügen verschiedener Arten strukturierter Daten zu einer einfachen HTML-Site, einschließlich des Platzierens Ihrer strukturierten Daten auf einer Site und des Validierens strukturierter Daten.

Wir werden uns für unser Beispiel auf eine Rezeptseite konzentrieren, da diese einfach zu testen ist und verschiedene Zusatzfunktionen wie Testberichte und Karussells enthält. Die Techniken, die Sie lernen, können dazu beitragen, den Verkehr auf Ihre Site zu lenken, nicht nur auf Rezept-Sites.

Am Ende des Codelabs befindet sich eine Beispielwebsite, auf der in der Google-Suche umfangreiche Ergebnisse erzielt werden können. Sie sollten sich sicher sein, andere strukturierte Datentypen zu implementieren.

Was du lernen wirst

  • So fügen Sie einer einfachen HTML-Site strukturierte Daten hinzu
  • So vermeiden Sie häufige Fallstricke
  • So testen und validieren Sie strukturierte Daten

Was du brauchen wirst

  • Eine aktuelle Version von Chrome oder einem anderen modernen Webbrowser
  • Der Beispielcode, der in diesem Codelab bereitgestellt wird
  • Grundlegendes Verständnis der HTML- und JSON-Syntax

Für dieses Codelab verwenden Sie eine Beispielwebseite . Die Projektdateien werden in Glitch gespeichert, einem Tool zum Erstellen von Webanwendungen und Codeprojekten. Klicken Sie auf Kopieren des Glitch-Projekts, um eine eigene, bearbeitbare Kopie des Projekts für dieses Codelab zu erstellen:

Kopieren Sie das Glitch-Projekt

Da es sich bei unserer Beispielseite um ein Rezeptblog handelt, beginnen wir mit rezeptstrukturierten Daten . Rezeptstrukturierte Daten können ein reichhaltiges Ergebnis liefern, das reichhaltige Informationen wie eine Beschreibung Ihres Rezepts, Koch- und Zubereitungszeiten sowie Nährwertinformationen enthalten kann. Ihr Inhalt kann auch automatisch ein Rezeptabzeichen für Google Bilder auf Mobilgeräten, eine Sprachführung auf der Google-Startseite und eine Inhaltsaktion auf dem Google-Assistenten aktivieren.

Definieren Sie den Typ der strukturierten Daten

Führen Sie die folgenden Schritte aus, um den Typ der strukturierten Daten zu definieren:

  1. Erstellen Sie in index.html ein <script> -Element mit dem Typ application/ld+json im <head> der Seite.
<head>
<script type="application/ld+json">
</script>
</head>
  1. Teilen Sie Google im <script> -Element mit, dass Sie strukturierte Daten von schema.org verwenden, indem Sie @context auf http://schema.org .
<head>
<script type="application/ld+json">
{
  "@context": "http://schema.org/",
</script>
</head>
  1. Um Google mitzuteilen, welche Art von Dingen Sie beschreiben, setzen Sie @type auf Recipe .
<html>
<head>
<script type="application/ld+json">
{
  "@context": "http://schema.org/",
  "@type": "Recipe"
}
</script>
</head>
</html>

Jeder strukturierte Datentyp unterstützt eine Liste der erforderlichen und empfohlenen Eigenschaften, die Google weitere Informationen zu dem beschriebenen Objekt geben. Diese Anforderungen und Empfehlungen unterstützen verschiedene Google-Produkte und -Funktionen. An Ihrer Seite ist nichts auszusetzen, wenn einige Eigenschaften fehlen. Es bedeutet nur, dass es weniger wahrscheinlich ist, mit bestimmten Suchfunktionen zu arbeiten.

  1. Sehen Sie sich die Liste der erforderlichen Eigenschaften in der Rezeptdokumentation an und suchen Sie die Eigenschaft name festzustellen, ob für diese Eigenschaft zusätzliche Richtlinien vorhanden sind.
  2. Geben Sie in index.html den Namen des Gerichts (Party Coffee Cake) als Wert für den name nach "@type": "Recipe".
<html>
<head>
...
<script type="application/ld+json">
{
  "@context": "http://schema.org/",
  "@type": "Recipe",
  "name": "Party Coffee Cake"
}
</script>
</head>
</html>
  1. Fügen Sie weitere in der Dokumentation aufgeführte erforderliche Eigenschaften hinzu .
  2. Fügen Sie die empfohlenen Eigenschaften hinzu , um eine bessere Einbindung in die Suche zu erreichen. So sollten Ihre strukturierten Daten aussehen:
<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",
    "interactionStatistic": {
      "@type": "InteractionCounter",
      "interactionType": { "@type": "http://schema.org/WatchAction" },
      "userInteractionCount": 2347
     },
    "expires": "2019-02-05T08:00:00+08:00"
   }
  ]
}
</script>
</head>
</html>

Überprüfen Sie die strukturierten Daten

Um Ihre Daten zu validieren, müssen Sie die URL für Ihre Glitch-App verwenden. Um die URL für Ihre App in Glitch zu finden, klicken Sie auf Freigeben , wählen Sie Live-App und kopieren Sie die URL.

Geben Sie im Rich Results Test die URL für Ihre Glitch-App ein und klicken Sie auf Test URL . Im Idealfall sollten 0 Fehler und 1 Warnung angezeigt werden. (Im nächsten Schritt fügen Sie aggregateRating hinzu.) Wenn ein Fehler oder mehr als eine Warnung angezeigt wird, lesen Sie die Meldung und beheben Sie das Problem.

Da Sie bereits strukturierte Recipe hinzugefügt haben, besteht der nächste Schritt darin, eine Überprüfung einzubetten und Bewertungen in die strukturierten Recipe aggregieren (und nicht in andere Ansätze wie eine einfache Überprüfung oder eine Überprüfung mit Bewertung).

Fügen Sie eine individuelle Bewertung hinzu

Führen Sie die folgenden Schritte aus, um die erste Einzelbewertung von Julia Benson hinzuzufügen:

  1. Fügen Sie in index.html eine weitere Entität mit dem "@type" von "Review" .
<html>
<head>
...
<script type="application/ld+json">
{
"@context": "http://schema.org/",
"@type": "Recipe",
// other recipe structured data
"review": {
  "@type": "Review"
 }
}
</script>
</head>
</html>
  1. Um die erste erforderliche Überprüfungseigenschaft hinzuzufügen, setzen Sie den @type des author auf Person .
<html>
<head>
...
<script type="application/ld+json">
{
  "@context": "http://schema.org/",
  "@type": "Recipe",
  "review": {
    "@type": "Review",
    "author": {
      "@type": "Person",
    }
  }
}
</script>
</head>
</html>
  1. Geben Sie Julia Benson als Wert für den author .
<html>
<head>
...
<script type="application/ld+json">
{
  "@context": "http://schema.org/",
  "@type": "Recipe",
  "review": {
    "@type": "Review",
    "author": {
      "@type": "Person",
      "name": "Julia Benson"
    }
  }
}
</script>
</head>
</html>
  1. Fügen Sie die verbleibenden erforderlichen Eigenschaften hinzu , die in der Dokumentation aufgeführt sind.
  2. Fügen Sie die empfohlenen Eigenschaften hinzu , um eine bessere Einbindung in die Suche zu erreichen. Sie können den Namen der Rezeptseite (The Cake Makery) als Wert für den publisher . So sollte eine abgeschlossene Überprüfung aussehen:
<html>
<head>
...
<script type="application/ld+json">
{
  "@context": "http://schema.org/",
  "@type": "Recipe",
  // ...
  // other recipe structured data
  // ...
  "review": {
    "@type": "Review",
    "reviewRating": {
      "@type": "Rating",
      "ratingValue": "4",
      "bestRating": "5"
    },
    "author": {
      "@type": "Person",
      "name": "Mary Stone"
    },
    "datePublished": "2018-05-01",
    "reviewBody": "This cake is delicious!",
    "publisher": "The cake makery"
  }
}
</script>
</head>
</html>
  1. Geben Sie im Tool zum Testen strukturierter Daten die URL für Ihre Glitch-App ein und klicken Sie auf Test ausführen . Im Idealfall sollten für aggregateRating 0 Fehler und 1 Warnung aggregateRating . Wenn Sie einen Fehler oder mehr als eine Warnung sehen, lesen Sie die Meldung und beheben Sie das Problem.

Fügen Sie die Gesamtbewertung für alle Bewertungen hinzu

Die Gesamtbewertung für alle Bewertungen ist die durchschnittliche Bewertung basierend auf mehreren Bewertungen oder Bewertungen für dieses Rezept. Führen Sie die folgenden Schritte aus, um die Gesamtbewertung hinzuzufügen:

  1. Fügen Sie in index.html aggregateRating auf derselben Einrückungsstufe wie "@type": "Recipe" .
<html>
<head>
...
<script type="application/ld+json">
{
  "@context": "http://schema.org/",
  "@type": "Recipe",
  // other recipe structured data
  // review structured data
  "aggregateRating": {
  }
}
</script>
</head>
</html>
  1. Setzen Sie @type auf AggregateRating .
<html>
<head>
...
<script type="application/ld+json">
{
  "@context": "http://schema.org/",
  "@type": "Recipe",
  // other recipe structured data
  // review structured data
  "aggregateRating": {
    "@type": "AggregateRating",
  }
}
</script>
</head>
</html>
  1. Fügen Sie die erforderlichen Eigenschaften hinzu, die im Abschnitt Aggregierte Bewertungseigenschaften der Entwicklerdokumentation aufgeführt sind.
  1. Die erste erforderliche Eigenschaft ist ratingCount . Setzen Sie den Wert für ratingCount auf 18 .
  2. Fügen Sie den ratingValue . Der ratingValue ist die durchschnittliche Bewertung für dieses Rezept, die wir als 4 festlegen werden. So sollte eine vollständige Gesamtbewertung für Rezepte aussehen:
<html>
<head>
...
<script type="application/ld+json">
{
  "@context": "http://schema.org/",
  "@type": "Recipe",
  // other recipe structured data
  // review structured data
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingCount": "18",
    "ratingValue": "4"
  }
}
</script>
</head>
</html>
  1. Geben Sie im Rich Results Test die URL für Ihre Glitch-App ein und klicken Sie auf Test URL . Im Idealfall sollten 0 Fehler und 0 Warnungen angezeigt werden. Wenn Sie einen Fehler oder eine Warnung sehen, lesen Sie die Meldung und beheben Sie das Problem.
  1. Zur Vorschau , wie die Seite in den Suchergebnissen sehen konnte, klicken Sie auf Vorschau Ergebnisse in den Rich - Testergebnisse. f4dd7a85875518d4.png

9ffc97e46aad6cb7.png

Letzte JSON-LD-Probe

So könnte Ihr fertiges JSON-LD-Rezept auf einer HTML-Seite aussehen:

<!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",
            "interactionStatistic": {
              "@type": "InteractionCounter",
              "interactionType": { "@type": "http://schema.org/WatchAction" },
              "userInteractionCount": 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>
                        </ol>
                    <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="cake.jpg" 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>

Was wir behandelt haben

  • So fügen Sie einer einfachen HTML-Site strukturierte Daten hinzu
  • So vermeiden Sie häufige Fallstricke
  • So testen und validieren Sie strukturierte Daten

Mehr erfahren

Informieren Sie sich über strukturierte Daten, indem Sie die folgenden Ressourcen lesen:

  • Entdecken Sie verschiedene Funktionen und Arten von Markup in der Suche - Galerie
  • Verwenden Sie eine Sitemap-Datei , um Suchmaschinen-Crawlern das Auffinden Ihrer URLs zu erleichtern
  • Holen Sie sich Hilfe zu Ihren strukturierten Daten im Webmaster-Forum
  • Überwachen Sie Ihre Site mit der Suchkonsole