How To Create Pinable Recipes in Squarespace

 

Rich-pins are one of Pinterest's best features, and as a food blogger, being able to utilize recipe rich pins will give you a big advantage, and make you look that much more legit. The only downside to creating these recipes in Squarespace is that you have to code them yourself. BUT adding code into most website platforms is super simple, in Squarespace it's as easy as inserting a code block, and pasting in the recipe markup. It will display your recipe for your blog post, and make it compatible with Google and Pinterest!

I promise this code doesn't require an advanced degree, or any tech knowledge for that matter. It's as simple as copying and pasting your information into the template below (and the more you often you do it, the easier it will become)!

HOWEVER

If you want to learn more about Schema and how to add custom code to your website, I highly encourage you to do so. Having knowledge of basic CSS and HTML will skyrocket your skillset above most bloggers. It gives you more control over your website and content, and lets you personalize every detail. If you're interested in learning more about CSS or HTML, let me know in the comments below, and I'll get writing!

But in the meantime, here's how to create pinable recipes:

Step 1: Copy the code below, and save it somewhere on your computer. This will be the template for your recipes.


<!--This part won't change, no matter what!-->

<div itemscope itemtype="http://schema.org/Recipe">

 

<!--This is where you'll enter the basics about your recipe like name, description, and yield.-->

<h2 itemprop="name" class="item ERName">Recipe Name</h2>
<p itemprop="description">Description of Recipe</p>

<p class="ERHead">Makes: <span itemprop="recipeYield">12 Cups</span></p>

<img src="put image link here" itemprop="image" style="display:none" alt="Name of image (title of post is fine)">

 

<!--This is where you'll enter the time for prepping and cooking your recipe. Make sure to enter the number in both places to replace the sign-->

<p class="ERHead"> Prep time: <time itemprop="prepTime" datetime="PT#M"># mins</time></p>

<p class="ERHead">Cook time: <time itemprop="cookTime" datetime=PT#M># mins</time></p>

 

<!--Here's where you list the ingredients-->

<div class="ERIngredients"> <div class="ERIngredientsHeader ERHeading"><p></p>
<b>Ingredients:</b></div><ul class="ingredients">
<li class="ingredient" itemprop="ingredients">amount and ingredient name</li>
<li class="ingredient" itemprop="ingredients">amount and ingredient name</li>
<li class="ingredient" itemprop="ingredients">amount and ingredient name</li>
 <li class="ingredient" itemprop="ingredients">amount and ingredient name</li>
<li class="ingredient" itemprop="ingredients">amount and ingredient name</li>
</ul></div>

 

<!--Here's where you list the instructions-->


<div class="ERInstructions"> <div class="ERInstructionsHeader ERHeading"><p></p><b>Instructions:</b></div>
<ol class="instructions">
<li class="instruction" itemprop="recipeInstructions">Instruction 1</li>
<li class="instruction" itemprop="recipeInstructions">Instruction 1</li>
<li class="instruction" itemprop="recipeInstructions">Instruction 1</li>
</ol></div>
</div>


Step 2: Replace the text in bold font with the information from your recipe. Be careful not to erase any quotation marks or symbols, only the text in bold.

If you need to add more ingredients than the 4 in the template, more or instructions than the 3 in the template, simply add the lines of code below right below the other items in the list!

To add extra ingredients, add another one of these in the list.

<li class="ingredient" itemprop="ingredients">amount and ingredient name</li>

To add extra instructions, add another one of these in the list.

<li class="instruction" itemprop="recipeInstructions">Instruction 3</li>
 

Step 3: Add a code block to your Squarespace blog post, wherever you want your recipe to display, and paste in the customized code.

Step 4: Validate your Rich Pin on the Pinterest validator site.

That's all there is to it! Keep scrolling for an example of the finished product!

rich-pins-squarespace-blog.jpg

Here's what the final recipe looks like on a blog and on Pinterest. Also, this is a REAL really great recipe for iced coffee that we hope you'll enjoy!

The Best Make Ahead Iced Coffee

This smooth, rich cold brewed coffee is affordable and easy to make ahead of time for your home or office!

Prep time:

Cook time:

Makes: 12 Cups

The Best Affordable Iced Coffee

Ingredients:
  • 1/2 lb ground coffee
  • 1 gallon cold water
  • splash half-and-half
  • sugar
  • flavored syrup (optional)

Instructions:
  1. In a large bowl or pitcher combine coffee grounds and cold water. Cover and let sit for at least 8 hours (overnight is perfect).
  2. Using a mesh strainer and a coffee filter, strain out coffee into another pitcher to store.
  3. To serve, pour the cold coffee over ice and mix in a splash of half-and-half and a teaspoon of sugar or your favorite flavored syrup.
rich-pin-recipe-squarespace-blog.jpg

That wasn't too painful was it? Hopefully all the caffeine helped get you through it - I know it works for me!

For more information about using the h-Recipe format to create Rich Pins, look at the Pinterest Developer site. It offers samples of both Schema and H-Recipe code, that you can simply copy and replace with your recipe information for quick Rich Pin creation.

Happy pinning!

- Jo
the-best-iced-coffee
How To Create Pinable Recipes in Squarespace - Branding Babes Co