I’m going to show you how to create easy, user-friendly, and fully customizable recipe cards for you to use on your Squarespace food blog using markdown text blocks. I will also show you how to add recipe schema markup so that your recipes rank competitively in Google!
NOTE: I have since moved to WordPress. I keep this up to help others who are on the Squarespace platform. While it is possible to have a very well-optimized food blog on Squarespace, it is a lot more work and takes a lot more time than on WordPress. It’s a personal decision as to which platform one prefers. As a busy mom, I needed to find a way to save time optimizing my posts, hence my move to WordPress. I adore Squarespace, but it just isn’t for me at this time. But for those of you sticking it through, I hope this helps! XO.
Jump To hide
Why do I need a recipe card for my food blog?
How to Create a Custom Recipe Card with Squarespace:
How to Customize the Border Around the Markdown Text Box:
How to Customize Your Recipe Card:
How to add schema markup to your recipe cards and get your recipes showing up in Google Search results:
Why do I need a recipe card for my food blog?
Above all, writing for the user should always be the first intention of any post (recipe or not). Incorporating a recipe card makes it easier for the user to find, read, and print the recipe.
Using a recipe card on each recipe blog post helps create a cohesive and branded look that users will come to connect with you.
You must include a certain amount of information in your recipe cards to be taken seriously by Google. You must also have proper schema markup in order to show up in Google search results and rank competitively against other food blogs.
I’ve spent a fair amount of time since I first began my food blog researching and trying various ways of displaying my recipes within posts. Having decided against WordPress and its infamous recipe ‘plug-ins’, I’ve had to find many workarounds in order to achieve the same effects. First on Weebly, now on Squarespace withover4.086 millionsubscriptions. Having recently grown tired of the inconsistency of good recipe card generator options for Squarespace, I decided to take matters into my own hands and experiment a little. Thanks to the fair amount of markdown and CSS tutorials one can find online, this is the result of my experiment! I hope it can help you, too.
How to Create a Custom Recipe Card with Squarespace:
Now, to see what I am referring to when I say ‘recipe card’, please look HERE and scroll down to the recipe to see if this is something that you would like.
First, you will create a template to make it easier to create new recipes using your ‘card’ each time. Start by creating a new blog post. Title it ‘Recipe Card’ or something that will make it easy to find. You will keep this saved as a draft to have on hand at all times.
Click the ‘+’ symbol and open a new Markdown text block.
Do you want a customizable border around your recipe card? Copy and paste the below into your text block: Do you want a border-free recipe card? Copy and paste the second code below:
If you chose to have a customizable border around your markdown text box, then head on over to Design > Custom CSS and then insert the following code:
How to Customize the Border Around the Markdown Text Box:
As you can see, there are three sections to this code. The top is for desktop, the second for iPads and tablets, and the third is for mobile display. Here are some available modifications:
Change the font family:
I found this site useful for finding web friendly font-family choices to choose from. You simply replace the ‘”Playfair Display”, Georgia, Serif;’ in each of the three sections with the font-family of your choice.
Change the font size:
You can change the font size of each section by changing the values. I like 17px.
Insert a background image into your recipe card:
Delete “/s/IMAGE-FILENAME-HERE.jpg” in each section.
Replace the two quotation marks (““).
Move your curson in-between the two quotation marks.
Click ‘Manage Custom Files’ below. Choose your image and the file name should appear in-between the quotations.
Click ‘Save’ and the background image should display.
Please note that you may need to play around with your image in a photo editor to get the contrast and size, etc. just right in order for the text to ‘pop’ and display clearly.
Change the border color and line size:
Replace the ‘border color’ value (#fabae6) in each section with the hex color value of your choice. This site might be helpful.
Replace the ‘border width’ values (15px 15px 15px 15px) in each section with the line width of your choice. I like 1px 1px 1px 1px.
How to Customize Your Recipe Card:
Here is where the fun happens! You can customize the entire markdown text block to suit your needs. What you copied and pasted is the template that works for me, but feel free to change the info you want to share, rearrange, etc.!
To use my template, replace ‘Recipe Name’ ‘Author’ ‘Date’ etc. with just what those imply. At any time, you can highlight any portion of this card and choose to make the text bold or italic, change the headings values, etc. using the toolbar at the top of the markdown text block. Just note that if you heavily modify my template and you want a border to display, you may need to highlight all text and then click the quotation (“) symbol in order for the border to show up properly. If you are not using a border, be sure to keep away from using the quotation symbol in your text block! The border is a ‘quote block’ based code.
Do you want to add a small image of your recipe to your recipe card?
Copy the code below and replace the alt text, URL and title with those that pertain to your recipe. For image hosting, I like to use Postimage.
Do you want to add star ratings that display in Google to your recipe card?
Find those instructions in my Google Star Ratings for Recipes post. I like to insert the Rating Widget Code HTML code right below the image in the markdown text block.
Do you want to insert horizontal dividers?
Simply type ‘***’ wherever you would like them to display in the text box.
Do you want to add a print option for your readers?
You have three options:
Head over to PrintFriendly.com, create a free print button code and then paste it wherever you would like your print button to display in the markdown text box.
Install Sumo.com social sharing icons which also give a ‘print’ icon option. You can see an example of this on my site by looking to the left of this screen.
Simply create a ‘Print’ link in the text box that links to a copy of just the recipe that you’ve stored on Google Drive or the like.
Do you want to add nutritional information to your recipe card?
I like to use Very Well Fit to calculate nutritional information:
You simply copy and paste the ingredients for a recipe.
Select the number of servings, click ‘analyze recipe’.
And then you can tweak the ingredients to include specific name brand products, etc. before calculating the nutritional information.
Scroll down and then you can either use this nutritional information as a reference to add calories and fat to both the recipe card text box and the JSON-LD generator. Or, you can even copy a code to embed a nutritional label for your post!
Do you want to add affiliate links to ingredients used in recipes?
Simply highlight the ingredient in your recipe card, click the link icon at the top of the markdown text box and enter your unique affiliate link.
Once you have your template looking just as you would like it, I would suggest keeping a copy of it saved as a blog post draft and saved on your desktop within reach for easy copying and pasting each time you go to post a new recipe. It’s nice to have it all set-up so that when you go to post a new recipe, you simply need to insert your times, ingredients and instructions, etc.!
How to add schema markup to your recipe cards and get your recipes showing up in Google Search results:
Head on over to Technical SEO and insert your recipe information into the Schema Recipe Markup Generator:
Select ‘Recipe’ from the drop-down menu.
Fill out all applicable fields (the more, the better in Google’s eyes).
Copy and paste the JSON-LD code generated into a new code block anywhere in your blog post.
This code will be invisible to you, but very visible to Google!
To read more about Google rich snippets and getting your recipe to display in Google and Pinterest’s rich pins, please read this post of mine.
And, that’s it! You should have nice looking, user-friendly recipe cards showing in your posts and data-rich results displaying in Google! I so hope you found this tutorial helpful! And if you did , I would greatly appreciate you sharing and pinning this post so it can help more people looking for a recipe solution! And, if you have any questions or any feedback, that would be most welcome as well in the comments below!
Thank you. xo.
More Food Blogging with Squarespace posts you may find helpful:
Food Blogging With Squarespace: How To Get Recipe Star Ratings In Google Search Results
Markdown Text Block Resources you may find helpful:
Squarespace’s ‘Using Markdown Text Blocks’
Squarespace’s ‘Markdown Cheat Sheet’
Markdown Cheat Sheet by Adam Pritchard
And W3Schools.com is a wonderful resource for learning how to customize anything and everything on your website by learning CSS & HTML coding + more!
Are you using this recipe card on your site? Drop me a line or tag me on social media and I will link to your site in this post as an example for others!
)
