Breaking Up the Structured Data “itemtype”

Written by: William Kammer on

So, what exactly is structured data?

structured dataThat’s a bigger topic for another day, but you should know that structured data is an awesome way to tell Google tons of information about your website. In fact, today Google is rolling out the much anticipated mobile algorithm update, and along with that they are introducing support for structuring site names and URLs in mobile results.

If you’re unfamiliar with structured data, and the huge benefits it can provide to your SEO efforts, there are plenty of articles and websites that can help you get started. We’ll list a few good resources below to give you a head start.

In this post we’re looking specifically at something you may encounter when adding schema.org microdata to your website –  the need to reference items outside the itemscope. In other words, when your business phone number is in the header and your address is in the footer, how can you include them both as part of the defined LocalBusiness?

It’s actually pretty simple. All you need to do is include an itemref on the element where you define your itemscope, and IDs on items outside that scope. As an example, let’s say you have a LocalBusiness defined like this…


<div itemscope itemtype="http://schema.org/LocalBusiness">  
   <span itemprop="name">My Business Name</span>  
    <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">  
     <span itemprop="streetAddress">1234 My Business Road</span>  
     <span itemprop="addressLocality">Las Vegas</span>,  
     <span itemprop="addressRegion">NV</span>  
     <span itemprop="postalCode">89123</span>  
    </div>  
 </div>

Everything about the address is contained nice and neat and wrapped in a div where you can apply the itemscope. But, what if because of the way the site was designed, your phone number lives somewhere else in the code…

<div itemscope itemtype="http://schema.org/LocalBusiness">  
   <span itemprop="name">My Business Name</span>  
    <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">  
     <span itemprop="streetAddress">1234 My Business Road</span>  
     <span itemprop="addressLocality">Las Vegas</span>,  
     <span itemprop="addressRegion">NV</span>  
     <span itemprop="postalCode">89123</span>  
    </div>  
 </div>

 ... lots of other stuff here ...  

 <div>  
   <span>702-555-5555</span>  
 </div> 

You could theoretically expand your itemscope to a container which would include the telephone number as well. If the items aren’t too far apart, that might make sense but there’s an easier way and it’s quite simple, so let’s do that instead.

First find the item you’d like to include within the itemscope and make sure it has an ID applied to it. In this example, it’s our telephone number. Next apply the structured data to that element just as if it were contained within the itemscope. In this case it’s simply adding itemprop=”telephone”.


<div itemscope itemtype="http://schema.org/LocalBusiness">  
   <span itemprop="name">My Business Name</span>  
    <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">  
     <span itemprop="streetAddress">1234 My Business Road</span>  
     <span itemprop="addressLocality">Las Vegas</span>,  
     <span itemprop="addressRegion">NV</span>  
     <span itemprop="postalCode">89123</span>  
    </div>  
 </div>

 ... lots of other stuff here ...  

 <div id="phone-number">  
   <span itemprop="telephone">702-555-5555</span>  
 </div> 

Now make sure that your main element with the itemscope applied is referencing the outside element as in the example below. You’ll notice we’ve added the itemref=”phone-number” seen in bold.

<div itemscope itemtype="http://schema.org/LocalBusiness" itemref="phone-number">  
   <span itemprop="name">My Business Name</span>  
    <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">  
     <span itemprop="streetAddress">1234 My Business Road</span>  
     <span itemprop="addressLocality">Las Vegas</span>,  
     <span itemprop="addressRegion">NV</span>  
     <span itemprop="postalCode">89123</span>  
    </div>  
 </div>

 ... lots of other stuff here ...  

 <div id="phone-number">  
   <span itemprop="telephone">702-555-5555</span>  
 </div> 

And that’s it. There’s really not much to it.

Note that if you need to reference multiple outside elements it’s as easy as adding additional IDs to the itemref.
Example: itemref=”phone-number another-item one-more-item”

Now, be sure to run your code through the schema testing tool to make sure everything is setup right and you’re good to go.

References

https://schema.org/
http://www.w3.org/TR/microdata/#the-basic-syntax

Leave a Reply

Your email address will not be published. Required fields are marked *