Search code examples
htmlsearch-engineimageschema.org

How an HTML img tag is interpreted in a text-type property of a Schema.org schema?


Schema.org provides a schema for each useful content in the Web. For instance, here you can find the schema of a "Recipe". As you may see, there are several properties that are expected to be text (see for instance recipeCategory). However, there are properties that can include html img tags, e.g. the recipeInstructions should include textual and visual instructions. Do you think that is correct to include an image inside a property that is expected to be text? In practice, do you think that is correct the following code:

<div itemprop="recipeInstructions">
  <p>Preheat the oven to 350 degrees. Mix in the ingredients in a bowl.</p> 
  <img src="path" title="Mixed ingredients">
  <p>Add the flour last. Pour the mixture into a loaf pan and bake for one hour.</p>
</div>

or the next one:

<div itemprop="recipeInstructions">
  <p>Preheat the oven to 350 degrees. Mix in the ingredients in a bowl.</p> 
  <p>Add the flour last. Pour the mixture into a loaf pan and bake for one hour.</p>
</div>

Moreover, which is the impact on search engines?


Solution

  • As far as the <img> is concerned, the first markup is fine.

    From the microdata spec the value of itemprop on a span element is the span's textContent.

    textContent is defined in DOM4 as

    The concatenation of data of all the Text node descendants of the context object, in tree order.

    So, since the <img> is not a text node, and has no text node descendents, it is simply ignored for the purposes of establishing the value for the itemprop.

    There's no reason to believe that search engines that pay any attention to microdata would not follow the specs here.


    As an aside, though, it's not valid to put <p> elements inside <span> elements. You may wish to fix that by using a <div> instead. The value of the itemprop would not be affected by making that change.