See how recipe schema markup works by examining the HTML behind Pinch of Yum's zucchini muffins. The itemprop attributes tell Google and Pinterest what ingredients and images are, so they can show recipe cards with ratings and ingredient lists in search results and pins.
Chapters
All right, let's talk a little bit about recipe schema markup. Now, for those of you that are more visual learners, you like to hear somebody talk about it. This video is for you. That's why I wanted to put it together real quick. If you have a YouTube account, you can subscribe to Food Blogger Pro. Right now we are at two subscribers. Hopefully that will maybe even double by the end of the month. I just want to point that out real quick. Every once in a while we will release new videos and we'd love it if you subscribe. So let's talk about recipe schema and schema markup. So we're looking at a post right now for honey and olive oil zucchini muffins from Pinch of Yum. And there are some things here about this post that are a little bit different about all of the links beneath it, except for these ones down here because these are using schema markup as well. And you can see the things that are different. Number one, most importantly, there is an image included that's really important. But then also we have the ratings. So you can imagine if you were to search this on Google and you saw this come up, you'd be much more inclined to click on this versus these other ones down here because of all this additional information. It's kind of little flashy things that say, hey, click on me. Click over here. I'm a helpful link. So what happens when we do click on that? Well, it'll take us to the post and we want to look now at the actual schema itself. And that is located down here in the recipe area. Now this looks very normal to you and I, but if you were a robot, which I doubt you are, but if you were a robot, you would see this a little bit differently, specifically if you were a robot from Google. So, so what I'm going to do, I'm using Chrome, I'm going to right click and I'm going to say view page source. And what that's going to do is it's going to open up a new window and this is how a robot would see your site. And what happens is Google comes to your site and they crawl through it. It's called crawling. And they look at all of this information and as you can see, it's all text based and it'll get a little bit confused when you get to the recipe area. I'm going to do a search here. What I did for that was command F. And I'm just going to type in ingredients and it'll get a little bit confused unless you have schema markup. And the reason is because there'll be all of this information and Google won't really know what that is unless you give it these little clues. So let's look at this example right here. I'm going to highlight it so you can see it and then we'll zoom in. It says list. That's li means list. So we're creating a little list here. But then there's two items here. The class is ingredient. But then this one is the one that's really important. Item, prop ingredients. And that's a type of schema. And if we click back here, we can see two. What was it? Two teaspoons of vanilla. And to us, that looks really normal. It looks like just another item in a list. But what's happening is there's some code in there, some schema code that's telling Google, hey, just a heads up, the property information for this item is, is an ingredient. Now other sites can use that as well. For instance, Pinterest. So if we go to pinterest.com pinch of yum and we look at the pinch of yum posts and then click on honey and olive oil. If we scroll down here, we can see that under here, baking and spices. One of the things that's listed is 2 teaspoons and vanilla. And the reason that Pinterest knows to use that is because the schema that's included here, we're telling Pinterest, hey, just a heads up, this item is an ingredient. So how about the information in the Google search result? Well, let's take a look, for instance, at the recipe photo. If I click back over to our source code and search, I'm going to say command F image and that's going to bring me to the item property. That is the image. Now, there are some other images here, but the one that we want to look at is the item property image. So I'm going to highlight that and I can actually just click on it and it will bring me to that image. So what's happening here is all of this stuff is being communicated to Google behind the scenes, where on this side, all we see is just a normal post with all the information. But when we look at the source code, there's all this markup, the schema markup that is communicating this information to Google. So when you search or when somebody searches, this additional information is pulled up. But also sites like Pinterest can use it and they can populate it for like their rich pins area. There are lots of other sites that use this, but this is just a popular example of how that's used. So hopefully that gives you a better idea of what schema markup looks like on the back end, like in the source code when you're looking at it, and also how it plays into the results for things like Pinterest and for Google search results.
