Schema

Schema.org is a set of shared vocabulary used to define content of our HTML elements for better understanding by search engines to provide a rich experience to our users.

This additional vocabulary in our HTML is also referred to as microdata.

Itemscope & Itemtype

Itemscope defines the scope of an item being defined using microdata. If we have information about a person on our webpage which lists their name, job title, email, and address this group of information will be contained in one item scope.

Itemtype defines which item we are adding microdata for, this is the link to the item page from Schema.org, in this example the item type we are using is person

Without the Schema or microdata

<ul>
  <li>Tom</li>  
  <li>Cheese Security</li>
  <li>tom@jefferyscheese.com</li>
  <li>001 Catguard street, Mouse Town, Cheeseistan. 320 990</li>
</ul>

With Schema or microdata

<ul itemscope itemtype="https://schema.org/Person">
  <li>Tom</li>  
  <li>Cheese Security</li>
  <li>tom@jefferyscheese.com</li>
  <li>001 Catguard street, Mouse Town, Cheeseistan. 320 990</li>
</ul>

Itemprop

Itemprop are the properties of an item we are defining using the microdata. In this example we can add any properties listed under the person item on schema.org

<ul itemscope itemtype="https://schema.org/Person">
  <li itemprop="name">Tom</li>  
  <li itemprop="jobTitle">Cheese Security</li>
  <li itemprop="email">tom@jefferyscheese.com</li>
  <li itemprop="address">001 Catguard street, Mouse Town, Cheeseistan. 320 990</li>
</ul>

Embedded Items

Embedded items are referred to as the items that are embedded as a property of another item and can have scope of their own. In the previous example address is an embedded item inside person item. We can use the itemscope for this embedded item with its own itemtype link and its own itemprop

<ul itemscope itemtype="https://schema.org/Person">
  <li itemprop="name">Tom</li>  
  <li itemprop="jobTitle">Cheese Security</li>
  <li itemprop="email">tom@jefferyscheese.com</li>
  <li itemprop="address" itemscope itemtype="https://schema.org/PostalAddress">
    <span itemprop="streetAddress">001 Catguard street, </span>
    <span itemprop="addressLocality">Mouse Town, </span>
    <span itemprop="addressCountry">Cheeseistan </span>.
    <span itemprop="postalCode">320 990</span>
  </li>
</ul>

Testing

We can test our structured data by using validator.schema.org