Can I Specify A Property At The Item Wrapper Level Instead Of The Item Tag?

- 1 answer

I am working on adding items to a Drupal site. As some may already know it can be a pain to modify rendered HTML for individual fields.

In this case I am working on product detail pages. Specifically adding the itemprop="name" property to the product title field. This is just a simple node content type I am working on. So I modified the node template for this item content type. This results in the following HTML structure:

<div itemprop="name" class="product-view__item__title">
  <h3 class="field-label"></h3>
  <h1 class="field-title-field item__title-field">
    Very Important Product

Everything within the div element comes from calling render() on the title field in the template. So far I am not having a ton of luck with hooks to modify the nested h1 tag. But I have not tried too hard since I will have to do this to other fields and wanted to find out if I can get away with specifying the item property that far up the HTML tree.

So any thoughts? Will I need the property added at the h1 level or can I get away with it at the div level in this example?

We are doing this to provide search engines with better information.



Yes, you may do this.

The value for the name property will¹ be the element’s textContent (i.e., the text content of the element and of all its descendants, concatenated).

That of course means that you have to make sure that no other content gets rendered inside of that div (like a label in the element with the class field-label).

¹ As defined by WHATWG’s Microdata (Living Standard) and by W3C’s Microdata (W3C Working Group Note).