Using structured data to blog recipes

In my other blog I've been writing up recipes for years now, albeit with varying frequency, with a combination of recipes I've found and tweaked and recipes that I've created from scratch (the latter are fewer and further between, more refinement time is required to get them right!). When I started looking at the Google Search Console for my site, one of the things that jumped out at me was a section called "Search Appearance" which contains two interesting sub-sections, "Structured Data" and "Rich Cards". These basically feed off additional metadata and are part of what allows Google to customise how it parses and displays different types of content. 

If you've ever wondered how Google (and Bing!) know how to display things like a recipes rating, cook time, prep time, author, description, etc,.. in search results, now you know! The markup you'd use to describe a recipe can be found at schema.org, and once you've annotated a reecipe with the appropriate bits, search engines can then parse this, for example when Google looks at my recipe for Sticky Pineapple Chicken (try it, it's good!) it sees:

This means that when you see the recipe in search results, instead of being a plain link / title / arbitrary chunk of the text from the page / description meta tag, you instead get to see something like:

Crafting the mark-up for this is, at the moment, a frustratingly manual process but I have a couple of ideas around tweaking Orchard to be able to produce it more easily. Even as a manual process, whilst frustrating, it's not that bad as the annotations that you have to use are all reasonably clear and sensible. Because I don't have a ready way to add this to some of the components (e.g. the recipe name is the blog post name) without screwing with both my blogs, I have gone down the road of having some content that's CSS'd to "display: none;" so that I can use that to feed the right information to Google; hopefully this won't upset them!