Hottest9ja

Welcome to hottest9ja.ml; a home for all the latest news, downloads, how-to, tutorials, gist and so much more

WELCOME TO HOTTEST9JA.ML




HOTTEST9JA
... is your home for the latest news, updates, gists and tutorials.

All current updates ranging from politics, sports,music,etc, are at your beck and call.


News, Posts, Recent updates, Songs, Vibes, Grooves and Jamz, Tutorials and many more!






Thursday, January 31, 2019

How To Add Review To A Structured Data Page

How To Add Review To A Structured Data Page

exaple of stuctured data with rating - source: georanker


Structured data helps to provide standardized information about a page and classify the page content. It also helps google enable certain search result features and enhancements. An page with structured data for instance, can appear in graphical search results on google and provide more engagement.

The simplest way to add a review to a structured data page, is to include the metadata for review within the code that runs your structured data. So the entire code for your website or blog will look something like the one displayed below.

The review property starts from where we have aggregate rating blah blah and ends before the </script> within the head tag.

You must also include this part  from <!-- Reviews Section --> 
within the body tag to acually display reviews on the page.


Note: This information was uptained from the google knowledge base on structured data.

<!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": [
            {
            "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>
                        </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>

No comments:

Post a Comment

All comments are strictly guided by rules of coherence and respect for all and sundry. Failure to abide by these rules, will result to removal of concerned or related comments.