Modify template to include microdata

This commit is contained in:
Andrew Miner
2020-02-01 11:14:42 -07:00
parent c3e94e7370
commit 2692e9465a
77 changed files with 1600 additions and 1627 deletions
+23 -23
View File
@@ -5,22 +5,22 @@
<meta charset="UTF-8" />
<meta name="viewport" content="user-scalable=no, width=device-width" />
<body class="recipe">
<body class="recipe" itemscope itemtype="http://schema.org/Recipe">
<section class="header">
<div class="image" style="background-image: url('./image.png')"></div>
<div class="image" style="background-image: url('./image.png')" itemprop="image"></div>
<div class="about">
<h1>Sloppy Joe Sandwiches</h1>
<h1 itemprop="name">Sloppy Joe Sandwiches</h1>
<div class="timing">
prep 15 minutes,&nbsp;cook 45 minutes </div>
prep <span itemprop="prepTime">15 minutes</span>,&nbsp;cook <span itemprop"cookTime">45 minutes</span> </div>
<div class="icons">
<div class="icon gluten-free"></div>
<div class="icon serving"></div>× 1
<div class="icon serving"></div>× <span itemprop="recipeYield">1</span>
</div>
<div class="description">Rich and tangy, this sloppy joe recipe is a major favorite in my house. It's also very flexible: serve on a bun, by itself, or in many other possible presentations.
<div class="description" itemprop="description">Rich and tangy, this sloppy joe recipe is a major favorite in my house. It's also very flexible: serve on a bun, by itself, or in many other possible presentations.
</div>
</div>
</section>
@@ -30,101 +30,101 @@ prep 15 minutes,&nbsp;cook 45 minutes </div>
<h3>1</h3>
<div class="ingredients">
<ul>
<li>
<li itemprop="recipeIngredient">
<div class="amount">
2 tbsp
</div>
<div class="item">olive oil</div>
<li>
<li itemprop="recipeIngredient">
<div class="amount">
2
</div>
<div class="item">onions, yellow (diced)</div>
</ul>
</div>
<div class="detail">In a dutch oven, sautée the onions until soft and translucent (about 5 minutes).
<div class="detail" itemprop="recipeInstructions">In a dutch oven, sautée the onions until soft and translucent (about 5 minutes).
</div>
</div>
<div class="step">
<h3>2</h3>
<div class="ingredients">
<ul>
<li>
<li itemprop="recipeIngredient">
<div class="amount">
3 lbs
</div>
<div class="item">ground beef</div>
</ul>
</div>
<div class="detail">Add the ground beef, and cook, stirring constantly and breaking up the pieces of beef, until it is evenly browned and crumbled into small pieces.
<div class="detail" itemprop="recipeInstructions">Add the ground beef, and cook, stirring constantly and breaking up the pieces of beef, until it is evenly browned and crumbled into small pieces.
</div>
</div>
<div class="step">
<h3>3</h3>
<div class="ingredients">
<ul>
<li>
<li itemprop="recipeIngredient">
<div class="amount">
3 cups
</div>
<div class="item">ketchup</div>
<li>
<li itemprop="recipeIngredient">
<div class="amount">
3 tbsp
</div>
<div class="item">sugar, brown</div>
<li>
<li itemprop="recipeIngredient">
<div class="amount">
3 tsp
</div>
<div class="item">Worcestershire sauce</div>
<li>
<li itemprop="recipeIngredient">
<div class="amount">
3 tsp
</div>
<div class="item">mustard, yellow</div>
<li>
<li itemprop="recipeIngredient">
<div class="amount">
3 tsp
</div>
<div class="item">vinegar, white</div>
<li>
<li itemprop="recipeIngredient">
<div class="amount">
3 tsp
</div>
<div class="item">chili powder</div>
<li>
<li itemprop="recipeIngredient">
<div class="amount">
¾ tsp
</div>
<div class="item">garlic powder</div>
<li>
<li itemprop="recipeIngredient">
<div class="amount">
¾ tsp
</div>
<div class="item">onion powder</div>
<li>
<li itemprop="recipeIngredient">
<div class="amount">
¾ tsp
</div>
<div class="item">salt</div>
</ul>
</div>
<div class="detail">Stir in the remaining ingredients, mix well, and bring to a boil. Reduce to a very low simmer and cover. Cook for about 45 minutes to allow the flavors to mix completely.
<div class="detail" itemprop="recipeInstructions">Stir in the remaining ingredients, mix well, and bring to a boil. Reduce to a very low simmer and cover. Cook for about 45 minutes to allow the flavors to mix completely.
</div>
</div>
<div class="step">
<h3>4</h3>
<div class="ingredients">
<ul>
<li>
<li itemprop="recipeIngredient">
<div class="amount">
8
</div>
<div class="item">hamburger buns</div>
</ul>
</div>
<div class="detail">If so desired, serve on soft hamburger buns. Otherwise, simply serve in bowls with a spoon.
<div class="detail" itemprop="recipeInstructions">If so desired, serve on soft hamburger buns. Otherwise, simply serve in bowls with a spoon.
</div>
</div>
</section>