I am building a team page for my client's website.
The team page contains a list of their employees along with following details:
image
Twitter Link
Facebook Link
Full Name
Designation (CEO/Founder, etc).
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">
Facebook Profile
LinkedIn Profile
</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, and
jobTitle 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).
According to schema.org this is how you add properties. You can learn more here. http://schema.org/docs/gs.html#schemaorg_types
<div itemscope itemtype="http://schema.org/Person">
Alice Jones
</div>
<div itemscope itemtype="http://schema.org/Person">
Bob Smith
</div>
Then you can use the available property types from this table. http://schema.org/Person
However, since you're doing team members (employees), you may want to structure the markup around properties from Organization. http://schema.org/Organization
Related
Is it okay to set the same itemprop and itemscope on the document or is it bad practice?
The reason I ask is my view layout doesn't display the type in a linear fashion, eg. a company avatar is be on the sidebar and the company name which is the title is on the article > header block.
Code example:
<div itemscope itemtype="http://schema.org/Order">
<div itemprop="seller" itemscope itemtype="http://schema.org/Organization">
<b itemprop="name">ACME Supplies</b>
</div>
<div class="reviews">
<p>Great company! - Jane</p>
</div>
<div itemprop="seller" itemscope itemtype="http://schema.org/Organization">
<span itemprop="url">http://acme-supplies.com</span>
</div>
</div>
I declared the itemprop="seller" and itemscope itemtype="http://schema.org/Organization" twice because of how I need to style the page.
Displaying the company name
Displaying the company url
This is not ideal. It conveys that the order has two sellers. Consumers could guess/assume that it’s the same seller, but they can’t know for sure.
itemid
Microdata’s itemid attribute allows you to give an item a URI (this URI identifies the entity described by this item; it doesn’t necessarily have to lead to a page, but it’s a good practice to provide a page with information about the item). By giving both of your Organization items the same URI, you convey that these items are about the same entity.
When doing this, there doesn’t seem to be any need to provide the seller property a second time.
<div itemscope itemtype="http://schema.org/Order">
<div itemprop="seller" itemscope itemtype="http://schema.org/Organization" itemid="/seller/acme-supplies#this">
<b itemprop="name">ACME Supplies</b>
</div>
<div class="reviews">
<p>Great company! - Jane</p>
</div>
<div itemscope itemtype="http://schema.org/Organization" itemid="/seller/acme-supplies#this">
<a itemprop="url" href="http://acme-supplies.com/">acme-supplies.com</a>
</div>
</div>
(Note: You could also use an external URI for itemd, e.g., http://acme-supplies.com/, assuming that this URI identifies the seller, and not something else in addition. Strictly speaking, this URI could also represent the seller’s website, etc. Ideally the seller would itself provide a URI that identifies it, but not many do.)
itemref
Another solution, if it’s possible for you to move the second Organization element out of the Order element, is Microdata’s itemref attribute.
<div itemscope itemtype="http://schema.org/Order">
<div itemprop="seller" itemscope itemtype="http://schema.org/Organization" itemref="seller-acme-supplies-url">
<b itemprop="name">ACME Supplies</b>
</div>
<div class="reviews">
<p>Great company! - Jane</p>
</div>
</div>
<div>
<a itemprop="url" href="http://acme-supplies.com/" id="seller-acme-supplies-url">acme-supplies.com</a>
</div>
The Organization element adds (via its itemref attribute) the property defined in the element with the ID seller-acme-supplies-url.
You have to make sure that the element with the id is not a child of another itemscope (otherwise it would also become the url of that item).
I'm working on a site designed to help a user find a hotel. We've got lots of widgets for filtering the hotels we show (e.g. price filters) or else ordering the hotels we show (e.g. by distance).
I can see how to markup our hotels as being a list. And also how to communicate the sort order of the list.
And we're already marking up the hotel's themselves:
<div itemscope itemtype="http://schema.org/Hotel">
<div itemprop="image" style="background-image: url('{{{ imageUrl }}}');"></div>
<h2 class="title" itemprop="name">{{ name }}</h2>
<div itemscope itemtype="http://schema.org/Offer">
<div itemprop="price">{{{ price }}}</div>
</div>
</div>
Is there a way of identifying our filters as being tools for adjusting the list?
To get an idea of how the website works see - http://mapov.com/hotels/the+strip/.
Is there a way of identifying our filters as being tools for adjusting the list?
With an Action type.
See SearchAction or perhaps FindAction (DiscoverAction).
An Action can be used to represent what happened (e.g., "User 3 searched for hotels in Amsterdam"), but also for representing potential actions: use the potentialAction property to specify the possible actions an item can have.
<section itemscope itemtype="http://schema.org/ItemList">
<div itemprop="potentialAction" itemscope itemtype="http://schema.org/SearchAction">
…
</div>
</section>
Side notes about your markup
Your image property won’t work, it can’t have an image specified in the style attribute as value. You have to provide the image property on a "link" element (e.g., img, a, link, …).
Your Offer is not associated with the Hotel. You could use the makesOffer property.
<div itemscope itemtype="http://schema.org/Hotel">
<img itemprop="image" src="http://yourhostel.es/content/124"/>
<meta itemprop="address" content="you street"/>
<h2 class="title" itemprop="name">name </h2>
<div itemprop="priceRange">price</div><div itemprop="telephone">9999999</div>
price
I'm working on website that displays hotels on a map. A user lands on a page associated with a place and we display a map of all the hotels in that place (e.g. Key West).
I'm trying to improve the schema.org markup that we use. Currently the bulk of the page is marked up as a place. We then include the map in that markup. Then within all that we have individual hotels. So our markup looks something like -
<div id="mainwrap" itemscope itemtype="http://schema.org/Place">
<div id="map_canvas" style="height:100%;" itemprop="hasMap" itemscope itemtype="https://schema.org/Map"></div>
<div itemscope itemtype="http://schema.org/Hotel">...</div>
<div itemscope itemtype="http://schema.org/Hotel">...</div>
<div itemscope itemtype="http://schema.org/Hotel">...</div>
</div>
</div>
I think it would make more sense to mark everything up as a list of hotels using itemList. Then we can communicate how many hotels are in the list, how they're sorted, and even mark up some of the filter controls.
Is it possible to have overlapping schema? So for example, can I do something like this..
<div id="mainwrap" itemscope itemtype="http://schema.org/ItemList">
<div itemProp="PotentialAction" class="filterWidget">...</div>
<div itemProp="PotentialAction" class="sortWidget">...</div>
<div itemscope itemtype="http://schema.org/Place">
<div id="map_canvas" style="height:100%;" itemprop="hasMap" itemscope itemtype="https://schema.org/Map"></div>
<div itemProp="itemListElement" itemtype="http://schema.org/ListItem" itemscope itemtype="http://schema.org/Hotel">...</div>
<div itemProp="itemListElement" itemtype="http://schema.org/ListItem" itemscope itemtype="http://schema.org/Hotel">...</div>
<div itemProp="itemListElement" itemtype="http://schema.org/ListItem" itemscope itemtype="http://schema.org/Hotel">...</div>
</div>
</div>
</div>
Also is there a good way to test some of this? The problem is it's a single page application and the testing tools need raw html (whilst the google bot will run js and render the dom).
I would say the Map is not really useful as "parent" type for the Hotel items, which isn’t possible anyway with Schema.org, because Map does not define a property that could refer to Place items contained in the map.
The most basic structure would be a Place item (the main topic of the page) and several Hotel items associated with the containsPlace property. The Map is specified in addition.
<body itemscope itemtype="http://schema.org/WebPage">
<section itemprop="mainEntity" itemscope itemtype="http://schema.org/Place">
<div itemprop="hasMap" itemscope itemtype="http://schema.org/Map">
…
</div>
<ul>
<li itemprop="containsPlace" itemscope itemtype="http://schema.org/Hotel">…</li>
<li itemprop="containsPlace" itemscope itemtype="http://schema.org/Hotel">…</li>
<li itemprop="containsPlace" itemscope itemtype="http://schema.org/Hotel">…</li>
</ul>
</section>
</body>
If you want to use ItemList for the Hotel items, it gets more complex.
It’s then no longer possible to use containsPlace, because ItemList can’t have this property (well, actually it can, but it’s not expected). You could use the inverse property containedInPlace and reference the Place item, but in my example it wouldn’t be possible to use Microdata’s itemref attribute for this purpose (because the mainEntity property would be also added to Hotel, which is not an expected property).
The more powerful (but maybe less supported) alternative is to use Microdata’s itemid attribute. It’s used to specify URIs for items (these URIs don’t necessarily have to point to a page, they only serve as identifier; but it’s strongly recommended to serve the page that contains the Microdata about it). Each of your items could get a URI, and then you can use this URI as value for properties that would usually expect another item as value.
Taking my example from above, but now with itemid (for Place), ItemList, and containedInPlace:
<body itemscope itemtype="http://schema.org/WebPage">
<section itemprop="mainEntity" itemscope itemtype="http://schema.org/Place" itemid="#thing">
<div itemprop="hasMap" itemscope itemtype="http://schema.org/Map">
…
</div>
<!-- note that this list doesn’t have to be a child of the <section> element -->
<ul itemscope itemtype="http://schema.org/ItemList">
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/Hotel">
<link itemprop="containedInPlace" href="#thing" />
</li>
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/Hotel">
<link itemprop="containedInPlace" href="#thing" />
</li>
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/Hotel">
<link itemprop="containedInPlace" href="#thing" />
</li>
</ul>
</section>
</body>
About itemid and the URI value
Let’s say the page about this Place has the URL http://example.com/places/amsterdam. As the itemid value is #thing, the full URI would be http://example.com/places/amsterdam#thing.
Whenever you refer to this Place on another page, you can use http://example.com/places/amsterdam#thing (and if you refer to it on the same page, you could use the full URI, too, or again #thing). This has the benefit that you don’t have to repeat data (you can refer to its "canonical" location where everything is specified), but it has the drawback that consumers have to visit another page (but hey, it’s their job).
To differentiate between /places/amsterdam, for the page, and /places/amsterdam#thing, for the place, can be important in the Semantic Web / Linked Data world – more details in my answer to the question Best practices for adding semantics to a website.
You are most of the way there by using an ID as an identifier.
For example, if you assign a unique ID to a hotel, you can use that ID in different structures, such as Place or ItemList.
You can test the structures on Google Structure Data Testing Tool (GSDTT): https://search.google.com/structured-data/testing-tool.
However, you'll need to fix your HTML in the top example as you have a dangling <div>.
Copy the completed structure above and paste it on GSDTT. The HTML page is not required; only the microdata structures.
I’m using Schema.org properties to provide product data of my webshop to search engines. It includes stuff like the image, product name and price. All works great, and as a result, the price shows up nicely in Google’s search results.
However, the availability (In stock) for some reason doesn’t make it into the results, even after waiting a few weeks.
My products are on number 1 in the SERPs, just without the availability. I validated my page with Google's Structured Data Testing Tool and it looks great.
Does anyone know why Google doesn’t bother to show the availability?
A snippet of my source:
<div itemscope itemtype="http://schema.org/Product">
<img itemprop="image" src="/media/product.jpg" alt="Product image">
<h2 itemprop="name">Product name</h2>
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<meta itemprop="priceCurrency" content="EUR">
<span itemprop="price">€ 12,95</span>
<ul>
<li itemprop="availability" href="http://schema.org/InStock">Op voorraad</li>
</ul>
</div>
</div>
I don’t know if this is the reason why Google Search does not pick it up, but your markup is not valid.
The li element can’t have a href attribute.
So instead of this
<li itemprop="availability" href="http://schema.org/InStock">Op voorraad</li>
you should use, for example, this
<li><link itemprop="availability" href="http://schema.org/InStock"/>Op voorraad</li>
Side note: About your price
The value of the price property should not contain the currency symbol, so you might want to use this instead:
<span itemprop="price">12,95</span> €
As Schema.org recommends to use the . as decimal separator, you could use the data element or the meta element to still how , to your visitors:
<data itemprop="price" value="12.95">12,95</data> €
<span><meta itemprop="price" content="12.95" />12,95</span> €
The http://schema.org/InStock should idealy be defined at the itemscope level and your itemprop can continue to be mentioned in the li tag as before, without the link in it.
Google may not choose to show availability in organic search results depending on how relevant it perceives that information to be for users compared to price, item name etc (remember, there's only a limited amount of space in the results).
Do any of your other competitors' listings show availability?
I have the following HTML:
<body itemscope itemtype="http://schema.org/WebPage">
<header itemscope itemtype="http://schema.org/WPHeader">
<nav itemscope itemtype="http://schema.org/SiteNavigationElement">
</nav>
...
<div itemscope itemtype="http://schema.org/Organization" itemref="objectDetails">
<span itemprop="name">Org name</span><br>
<span itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
...
</span>
</div>
</header>
<ul itemprop="breadcrumb" itemscope itemtype="http://schema.org/BreadcrumbList">
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">..</li>
...
</ul>
<div id="objectDetails">
<div itemprop="description">...</div>
<div itemprop="foundingDate">...</div>
...
</div>
</body>
This web page displays information about one particular organization. Some information about organization should be displayed in a page header, other - in the center of a page. With the help of itemref attribute I can split information about organization and put it on two separate divs.
If I test the above HTML with google structured data testing tool - it extracts info about organization correctly - properties from both divs are shown, but it shows validation error on a WebPage object:
The property foundingDate is not recognized by Google for an object of type WebPage.
What is the correct way to tell Google that properties that are inside objectDetails div doesn't belong to the outer itemscope (WebPage)? If I add itemscope itemtype="http://schema.org/Organization" to objectDetails div - then Google sees two separate organizations on my WebPage.
This is not possible.
Possible "solutions":
Don’t use an item on a "container" like html or body. Use it on an element that doesn’t span the whole content, and use itemref if needed.
Use multiple items and specify the same URI in itemid for them. However, it’s not clear if/when/how Schema.org supports itemid, and support from consumers is probably bad.
(Using RDFa instead of Microdata would allow this naturally.)
Add an untyped item (by adding an itemscope without itemtype) to the element containing all properties you don’t want to add to the original parent item. Examples: 1, 2, 3.