How To Correctly Format hRecipe Ingredients And Instructions

Correctly formatting the Ingredients and Instructions for the hRecipe plugin will provide better SEO benefits and more attractive layouts for your recipes. However, one of the most common stumbling blocks is misformatting the Ingredient and Instructions lists.

We’re going to fix that in this article.

When you’re finished reading, you will understand

  1. What’s required for correct formatting.
  2. Why it’s important to get your formatting correct.
  3. How to correctly format Ingredients and Instructions using the hRecipe WordPress editor component.

First, let’s recap the first 4 months of hRecipe.

hRecipe birth and growing pains

The hRecipe plugin for WordPress has been “in the wild” for a few months now. It’s been downloaded from WordPress.org over 1000 times at the time of this writing. From the trackback implemented a couple of months ago, hRecipe has been at least tested on more than 70 web sites, and appears in regular use in around a dozen web sites.

That’s pretty good!

But there’s a lot of room for improvement.

Here’s the story: hRecipe is specifically designed to encourage ordinary bloggers to gain SEO and layout benefits for their recipes, without having to be a programmer or designer. That requires a fair bit of work from the programmers and designers!

What’s more, without a large database of users, it’s impossible to determine the best design. People use software tools such as hRecipe in ways impossible for a programmer or designer to anticipate. But the ways people are using a tool can be used to improve the tool on a step by step basis, and for helping write documentation so users can use the tool more effectively.

With this in mind, let’s take a look at what’s required for a correct hrecipe microformat.

The hrecipe microformat specification

Take a quick look at the hrecipe microformat specification. You don’t need to examine the whole page in detail (unless you want to), just skim to get an idea of how much thought has gone into the hrecipe microformat. Buried down in the page is the actual specification, and here’s a screenshot of that:

Ingredient specifiction for hrecipe

Ingredient specifiction for hrecipe

What this means is that a recipe has one or more ingredients (obvious). Here’s what’s not obvious: treating each of these ingredients as an item in a list provides powerful “machine intelligence” capabilities. For example, you could write a program to classify recipes in terms of “simple” or “complicated” by counting the number of ingredients in the recipe.

I bet you could think of other ways to use lists of ingredients. (Comments are welcome!)

Making Ingredient list in hRecipe plugin

By now, we should all agree that arranging ingredients in a list is beneficial. It won’t hurt and may help SEO, and it makes layouts more attractive.

And it’s easy.

Here’s how:

  1. Write each ingredient on it’s own line
  2. Start each line with an “*” (asterisk)

For the Garlic Ancho Soup recipe, here’s what these two steps look like (click on picture to enlarge, or better: right click and save the image for your own use):

Begin each ingredient with * (asterisk)

Begin each ingredient with * (asterisk)

Remember, each ingredient on it’s own line, starting with an asterisk *.

Very easy business.

Attractive recipe display

At this point you should be questioning exactly how listing ingredients separately helps make recipe displays more attractive.

And that’s an excellent question!

The answer goes back to CSS: you are free to display your lists any which way you like!

Ok, I agree, that’s a lame answer, so watch for the next article, and we’ll take a tour through CSS list display for your recipe layouts.

Implement Semantic Recipe Web Pages Using hRecipe Microformat

We just discussed the semantic web, and how it has so much potential to explode SEO. Now that all sounded well and good, but with a moment’s reflection, I’m sure you’ll agree that the devil is in the details.

That is, the theory is very nice, but how do you make semantic web happen in practice?

That’s an excellent question, and here’s one answer…

The semantic web can be partly built using a simple technology called “microformats.”

You don’t need to know very much about microformats to use hRecipe correctly. If you know a little bit about HTML and CSS, microformats are just CSS classes that “mean something.” If you don’t know any CSS or HTML, just skip over the explanation and follow the instructions very carefully.

Microformat definition in a paragraph

The notion of a microformat is that meaning can be embedded in the CSS class of an HTML element. For example, a block of HTML such as a div or fieldset can be styled as an “hCard” or an “hRecipe” (The leading “h” is a convention within the microformatting community, irrelevant for our discussion). The hRecipe CSS class then defines how all the HTML is laid out visually… but can also be used by a web page scraper to regard that entire HTML block as a recipe. Given that everyone wants to make recipes pretty, it costs nothing to name the styling classes semantically.

Knowing a little bit about the hRecipe microformat in particular will be very helpful, whether or not you understand HTML and CSS.

hRecipe microformat specification

The hRecipe microformat specification allows for lists of ingredients and steps for directions. A correctly formatted recipe could allow someone to count the number of ingredients automatically, and the amount of ingredients as well. Suppose you put a recipe on your web page that serves 4 people. If you used hRecipe formatting, someone else could determine, automatically, the amount of ingredients to serve 8, 12, or more people. While such software hasn’t yet been written, it’s nearly impossible to write without using a microformat such as hRecipe.

Intermission: Let’s eat!

While we’re on the topic of recipes, “I’m Just Here for the Food” is one of my favorite cookbooks. This is partly because I’m over-educated and relish Alton Brown’s technical explanations… but it’s also an appreciation for his ability to render complicated processes such heat transfer into language anyone can understand.

For example, I learned why smoking meat works really well, and some great tips for doing my own smoking which I used at the “Thrill of the Grill” Super Tuesday Party last year. I’d found a huge brisket on sale for a ridiculously low price (under $1/lb), and it had been sitting in my freezer for months. Thanks to Alton Brown, we had a smash hit on our hands! But there’s more, lots more, so if grilling or smoking isn’t your thing, there’s plenty about roasting and baking and more.

Back to our regularly scheduled programming…

Easy on users is hard on programmers

I admit it. I’m a unix geek. I love the command line.

But most people don’t, and truthfully, I like visually-oriented systems like WordPress a whole lot too.

As it turns out, making things visual and very easy for users is much more difficult for programmers. What we’re going to have to do here is split the difference:

I’ll do my best – with the little time I have – to make it easy for you, you will have to learn a tiny amount of technology.

We’ll both win.


You really don’t need to learn much, but understanding these two important rules for the hRecipe microformat is, well, important:

  1. Each ingredient is tagged.
  2. Each step in the instructions is tagged.

That doesn’t make any sense yet, does it?

It’s time to peel back the onion, one more layer, and show exactly what happens on your web page page when you use hRecipe.

NOTE: At the end of this series of articles there will be a “formatting cheat sheet” for easy reference, which will be linked from all the pages in this series.


I’m Just Here for the Food. What are you here for?

Why You Should Use hRecipe Plugin For WordPress Correctly

Using hRecipe plugin for WordPress correctly will help your future SEO results.

The hRecipe plugin for WordPress will also considerably simplify your recipe formatting, whether you use it correctly or not.

However, if you do use hRecipe correctly, expect to see big future benefits for your website SEO results on your recipe pages.

Here’s why…

Exploiting semantic technology for your recipes

If you’re like most people, on the web or off, you don’t really much care about the nuts and bolts of technology.

Seriously, how much do you really care about Search Engine Optimization? Heck, I’m a technogeek, and I don’t care about how SEO works. Not at all! I just want to know exactly what to do, and how to do it, so my website gets ranked highly for my topic areas.

As you have figured out, it isn’t that simple.

We both need to know a little about SEO, a little more than we want to know.

Semantic web is same sort of thing. Well, almost. Turns out I like poking around in this technology. Which is good for you: I handle the details, you just learn enough to use semantic techniques correctly. In fact, I’ve made it even easier for you to benefit from semantic techniques: learn a few simple formatting rules for hRecipe, I’ll handle all the nuts and bolts so you don’t have to.

Again: You follow a few simple rules for recipe formatting, I’ll handle the semantic web details.

Semantic web promises better search results

As of August 2009, I suspect most web technologists would assert that the semantic web has been a failure. In some respects, they are quite correct. In other respects, I believe semantic web techniques have become critically important, and thanks to WordPress, practically ubiquitous.

See, all that stuff you read about SEO title tags, meta descriptions, how to use header tags, etc… all that’s part and parcel of “POSH,” Plain Old Semantic HTML. As it turns out, the minuet playing out between Google and WordPress is getting POSH widely implemented. WordPress encodes POSH techniques, Google rewards well-written (POSH) web pages with an edge in search results. Wash, rinse, repeat.

It may turn out that POSH is a necessary foundation for building more specialized semantics into the web.

It’s too early to say… but it’s a good bet, and I’m taking it!

Semantic web is in it’s infancy

So far as I can tell, nobody in the SEO industry knows anything about “Web 3.0,” the semantic web. And SEO is an industry, make no mistake about that. Once the SEO experts do learn about semantic web techniques, there will be gold rush attempting to corner semantic web “properties.” That is, to be the first to define and implement viable semantic web technologies that are acceptable to search engines. The spammers, scammers and other assorted black hats will be right there in the thick of it, too.

When you already have all your recipes formatted using hRecipe, you’re ahead of the power curve!

By now, I’m sure you want to know exactly how to use hRecipe to leverage semantic web techniques. I’m planning on showing you just how to do that very soon, so stay tuned.

And, I would be delighted to discuss semantic web in general or in particular with anyone. If you want to “stake your own semantic web claim,” let’s talk. If you have any questions, let me know. If you think I’m full of BS, let me know. If I’ve made a mistake somewhere, I’d like to know that as well.