Have you heard of Itemref? If you’re into semantic markup and you haven’t, you really need to become familiar with this – it’s a game changer.
I really struggled with grasping how itemref works when I first started messing around with it, so this is my attempt to create a concise tutorial for your “everyday SEO” who might need to use it.
What makes Itemref so great?
The name is actually fairly self-explanatory: Itemref allows you to reference other things when you’re building out a block of inline microdata. One of the biggest hurdles that I’ve run into over the years with inline markup is the need to have all the information you want to markup in one spot, i.e., if a product page has most of the product info in one <div>, but then there’s something you want to reference in the footer of the site, you’re pretty much out of luck (unless you move that piece of data).
Itemref is the Answer
It seriously is. Using itemref, you can have your main entity section but also reference other bits of information as needed in any other spot on the page. No need to reformat your source code, re-architect site layout, or just start flipping tables. You really can have it all!
How Itemref Works
For purposes of demonstration, let’s say we wanted to mark up UpBuild as an organization. We want to link information in the header, body, and footer to form one cohesive “entity”.
- Decide where you want the core of your entity to be located in your code. I use the first ocurrence (i.e. the bit of info in the header). Mark that section up with your itemscope and itemtype as you would normally.
- Then find the other sections you want to markup as a part of that main “entity”. Don’t worry about linking them now; just add itemprops (and any sub-itemtypes as needed).
- Now, add an ID to each section not including the first section where you declared the main itemscope and itemtype. The ID you add to these subsequent sections should be readable and unique, e.g, “footerInfo” for information in the footer that you want to reference.
- Now go and edit your main entity declaration and add a new attribute: itemref. Itemref should be equal to any and all IDs you want to link with the main entity. Separate multiple IDs using a space.
- That’s it! Validate using Google’s Structured Data Testing Tool and you should be good go go!
Itemref in Action
So that you can see what I’m talking about and pick it apart, here’s a sample of Itemref in action.
<div itemscope itemtype="http://schema.org/organization" itemref="story footerInfo">
<a href="http://www.upbuild.io" itemprop="url">
<img itemprop="image" src="https://www.upbuild.io/wp-content/uploads/2015/07/upbuild-logo-short-transparent1.png" />
</a>
<meta itemprop="name" content="UpBuild" />
</div>
<p id="story">
UpBuild was founded by <span itemprop="founder"><span itemscope itemtype="http://schema.org/Person" >Mike Arnesen</span></span> in 2015.
</p>
<footer>
<span id="footerInfo" itemprop="email">[email protected]</span>
</footer>See the Pen 5-Minute Itemref Semantic Markup Tutorial by Mike Arnesen (@mike_arnesen) on CodePen.
