Table of Contents
Some properties are items itself, so we can choose to add them as plain properties or to create a new itemtype block.
What's the difference? When you add a new block, you have access to all of its (and its parent) properties, so you can add much more information rather than adding a simple attribute.
Let's continue with the previous example, your final text should be this:
<div itemscope="" itemtype="http://schema.org/Movie"> <h1 itemprop="name">Avatar</h1> <span>Director: James Cameron (born August 16, 1954)</span> <span itemprop="genre">Science fiction</span> <a itemprop="trailer" href="http://www.example.com/movies/avatar-theatrical-trailer.html"> Trailer </a> </div>
The director section has a lot of unstyled information: name, surname and date of birth, so let's
turn them into a machine-readeable format. But first of all we need to do a little change: convert
the <span>
element into a <div>
.
Example 4.1. Prepare your "Director" block
<div itemscope="" itemtype="http://schema.org/Movie"> <h1 itemprop="name">Avatar</h1> <div>Director: James Cameron (born August 16, 1954)</div> <span itemprop="genre">Science fiction</span> <a itemprop="trailer" href="http://www.example.com/movies/avatar-theatrical-trailer.html"> Trailer </a> </div>
Now select <div>Director: James Cameron (born August 16, 1954)</div>
and select
the director attribute. You can choose to add it as property or to create a new itemtype block:
select the latter one and apply it to the current element.
Great! Now you're ready to style everything inside the director property!
Example 4.2. Creating an embedded itemtype
<div itemscope="" itemtype="http://schema.org/Movie"> <h1 itemprop="name">Avatar</h1> <div itemprop="director" itemscope="" itemtype="http://schema.org/Person"> Director: James Cameron (born August 16, 1954) </div> <span itemprop="genre">Science fiction</span> <a itemprop="trailer" href="http://www.example.com/movies/avatar-theatrical-trailer.html"> Trailer </a> </div>
Select James Cameron
and add the name property (you can find it
under the Type node). Remember to wrap the text with a new span
element.
After that select August 16, 1954
. As you can see, it's James Cameron birthdate, let's style it.
Select the birthDate property: things are quite different, this time. Infact we have to convert
this text into a standard time format, so let's input 1954-08-16
in the List of possible Values,
leaving the hour/minutes field blank.
![]() | Note |
---|---|
You have to input the time using this format: YYYY-MM-DD |
![]() | Tip |
---|---|
There is a small datepicker next to the field, you can use it instead of typing the date manually. |