I am building a team page for my client's website.
The team page contains a list of their employees along with following details:
How can I use metadata from schema.org for adding all of the above fields?
This is what I have come up so far.
<ul>
<li>
<article itemscope itemtype="http://schema.org/Person">
<h1 itemprop="name">Team Member's Name</h1>
<p>CEO</p>
<img src="" alt="" itemprop="image">
<a href="" class="facebookLink">Facebook Profile</a>
<a href="" class="linkedInLink">LinkedIn Profile</a>
</article>
</li>
</ul>
Also, In terms of adding further meta data, I want to even add a additional property to a wrapper <div>
with itemscope of the company that I am developing this website for.
So, that I add not only the meta data of each emplyoee, but I also add the company name (which is same for each employee).
You can use
name
for the full name (and if you want, givenName
, familyName
, and honorificPrefix
/honorificSuffix
in addition), image
for the image, sameAs
for the social media profiles, andjobTitle
for the designation.To link the persons and the organization, look for appropriate properties that have Person
as expected value (from Organization
) or Organization
as expected value (from Person
).
A simple way could be:
<div itemscope itemtype="http://schema.org/Organization">
<ul>
<li itemprop="founder" itemscope itemtype="http://schema.org/Person"></li>
<li itemprop="employee" itemscope itemtype="http://schema.org/Person"></li>
<li itemprop="employee" itemscope itemtype="http://schema.org/Person"></li>
</ul>
</div>
If your markup doesn’t allow this, Microdata’s itemref
attribute might be useful (example).