Proper format for Google Schema? - schema.org

I've been experimenting with Google Schema and I've looked at a few code generators and they vary in design. The link I'm using for info for these examples: http://schema.org/Book
1) When is it proper to use itemscope itemtype="someSchemeURL.org" or an actual href?
Example:
<div itemprop="author" itemscope itemtype="http://schema.org/Person">
or
<div itemprop="bookFormat" href="http://schema.org/bookFormatType">
The second example isn't even valid HTML since the href attribute isn't accepted on a div.
2) For the example above, is the first column always an itemprop and the second column always the itemscope itemtype?
3) If there is no itemscope itemtype specified, does the itemprop default to the parent itemscope itemtype?
Example:
<div itemscope itemtype="http://schema.org/Book">
<div class="book" itemprop="name"></div>
<div itemprop="author" itemscope itemtype="http://shema.org/Person">
<div class="author" itemprop="name"></div>
</div>
</div>
The .author class will result in the name attributed to "author"
The .book class will result in the name attributed to "book"
So this would mean that although multiple itemprop's have the same name, the itemprop always applies to the parent element, correct?
4) Where is it specified when to use meta, link, span, or div? Or is this left up to preference?
Example:
<div>
<meta itemprop="datePublished" content="2013-07-01">
Some text
</div>
<div>
Some text
<link itemprop="bookFormat" href="http://schema.org/bookFormatType">Ebook
</div>
The second example is invalid, I know, but it's an example from one of the code generators. That specific generator produces invalid code so I know not to use it, but where are they getting their idea to use a link tag (albeit incorrectly)?

These docs can answer almost all of your questions. Maybe you've already seen them but just in case.
Microdata Spec
Getting Started Tutorial at Schema.org
So answers for your questions in order they appear:
1.The first one is correct. The official microdata spec tells us
Microdata is most useful, though, when it is used in contexts where
other authors and readers are able to cooperate to make new uses of
the markup.
For this purpose, it is necessary to give each item a type, such as
"http://example.com/person", or "http://example.org/cat", or
"http://band.example.net/". Types are identified as URLs.
The type for an item is given as the value of an itemtype attribute on
the same element as the itemscope attribute.
Example
<section itemscope itemtype="http://example.org/animals#cat">
<h1 itemprop="name">Hedral</h1>
<p itemprop="desc">Hedral is a male american domestic
shorthair, with a fluffy black fur with white paws and belly.</p>
<img itemprop="img" src="hedral.jpeg" alt="" title="Hedral, age 18 months">
</section>
2.No. Itemprop is used to indicate property of some entity. Itemscope - entity scope. And itemtype - type of the entity. These are different tags with different meaning which can be used separately (at least in theory). What doc says:
At a high level, microdata consists of a group of name-value pairs.
The groups are called items, and each name-value pair is a property.
Items and properties are represented by regular elements.
To create an item, the itemscope attribute is used.
To add a property to an item, the itemprop attribute is used on one of
the item's descendants.
And examples
<div itemscope>
<p>My name is <span itemprop="name">Elizabeth</span>.</p>
</div>
<div itemscope>
<p>My name is <span itemprop="name">Daniel</span>.</p>
</div>
3.Even when itemscope itemtype are specified along with itemprop it is still property of the parent type. In this case this property is entity itself. And you're correct with your example: names will go to different entities. Here is what doc says about processing properties.
The property value of a name-value pair added by an element with an
itemprop attribute is as given for the first matching case in the
following list:
If the element also has an itemscope attribute The value is the item
created by the element.
If the element is a meta element The value is the value of the
element's content attribute, if any, or the empty string if there is
no such attribute.
If the element is an audio, embed, iframe, img, source, track, or
video element The value is the absolute URL that results from
resolving the value of the element's src attribute relative to the
element at the time the attribute is set, or the empty string if there
is no such attribute or if resolving it results in an error.
If the element is an a, area, or link element The value is the
absolute URL that results from resolving the value of the element's
href attribute relative to the element at the time the attribute is
set, or the empty string if there is no such attribute or if resolving
it results in an error.
If the element is an object element The value is the absolute URL that
results from resolving the value of the element's data attribute
relative to the element at the time the attribute is set, or the empty
string if there is no such attribute or if resolving it results in an
error.
If the element is a data element The value is the value of the
element's value attribute, if it has one, or the empty string
otherwise.
If the element is a time element The value is the element's datetime
value.
Otherwise The value is the element's textContent.
The URL property elements are the a, area, audio, embed, iframe, img,
link, object, source, track, and video elements.
4.Left up to preference. There is general advice from search engines - markup consumers
However, as a general rule, you should mark up only the content that
is visible to people who visit the web page and not content in hidden
div's or other hidden page elements.
Schema.org doc gives good overview when usage of hidden elements may make sense.
Many pages can be described using only the itemscope, itemtype, and
itemprop attributes (described in section 1) along with the types and
properties defined on schema.org (described in section 2). However,
sometimes an item property is difficult for a machine to understand
without additional disambiguation. This section describes how you can
provide machine-understandable versions of information when marking up
your pages.
Dates, times, and durations: use the time tag with
datetime
Enumerations and canonical references: use the link tag with
href
Missing/implicit information: use the meta tag with content.
Check this link for details.

Related

Proper way to use the 'publisher' property ("The attribute publisher.itemtype has an invalid value.")

When I attempt to validate my structured data using Google's Structured Data Testing tool, I get an error:
The attribute publisher.itemtype has an invalid value.
I am getting that on this line:
<meta itemprop="publisher" content="My Real Name Here" />
How do I provide a valid value for this property?
The expected value of the publisher property is another item (Organization or Person).
While Schema.org always allows to provide a string value (like you do), Google might require a certain value type for one of their search features (e.g., an Organization value for their Articles rich result for AMP HTML pages). If you don’t care about (or can’t qualify for) this feature, you can ignore the error in the SDTT.
The problems with using a string value: it’s not clear if the publisher is a person or an organization, and it’s not possible to provide additional data about the publisher.
If you want to provide an item, it could look like:
<div itemprop="publisher" itemscope itemtype="http://schema.org/Person">
<p itemprop="name">NewGuy</p>
</div>
<div itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
<p itemprop="name">NewGuy Inc.</p>
</div>

Including item type "Place" in "Thing"

According to the documentation (http://schema.org/Thing), the item type Thing cannot include a Place.
The users will be asked to add content that does not have a specific type, therefore everything falls back to Thing. So, suppose the following example. This is want I would like to have, but seems to be invalid. Is there a workaround to fix it?
<div itemscope itemtype="http://schema.org/Thing">
<span itemprop="name">Eiffel Tower</span>
<span itemprop="description">Sample description</span>
<div itemscope itemtype="http://schema.org/Place">
<div itemscope itemtype="http://schema.org/PostalAddress">
<span itemprop="streetAddress">Sample address</span>
</div>
</div>
</div>
Your example snippet is valid.
Simply nesting elements with itemscope/itemtype has no effect on the parsed Microdata. You have to use the itemprop attribute if you want to associate/relate the items.
So in your example, you have three items (Thing, Place, PostalAddress) which are not related in any way.
If your question is, "Has Thing a property which allows a value of Place?", the answer is no, there is no such property.
The best solution would be to have the user choose what "type" of thing they are submitting and map those to schema.org types.
E.g. if you had a drop-down list on the form they use to submit listing "CD", "Event", "Place", etc. and use the value from that form field to set the value of the main itemtype.

schema.org and an online dictionary

I'm having trouble about what to use from schema.org. I'm making a web site kinda similar to urbandictionary.com. Users are the contributors of the dictionary. Also the dictionary may include phrases like "2012 London Olympics", "MIT Dorms" etc. Whatever. So I want to add schema to the website. What should be schema-named the words/phrases and the users' descriptions?
http://schema.org/docs/full.html
Edit: layout of a sample page:
Gmail
Google's email service -user63
best email service in terms of spam prevention -user21
Gmail has a support of IMAP, POP3, SMTPi OAUTH, FRD, two-way secure login -userMew
Edit2: loyout of another sample page:
Batman 5
Upcoming movie of Batman, where Justien Bieber is going to play Joker -user43, May 2015
The opening was a disaster; Bieber slipped to the stairs and then was carried to a hospital -user22, December 2015
This movie was a disaster, a very poor quality movie -userKitten, March 2016
General
There is a getting started page in the documentation on schema.org. As you are building a dictionary, you might have an entry about a movie there (the example they are using). The markup could look like this:
<div itemscope itemtype ="http://schema.org/Movie">
<h1 itemprop="name">Avatar</h1>
<span>Director: <span itemprop="director">James Cameron</span></span>
<span itemprop="genre">Science fiction</span>
Trailer
</div>
This requires that you know that your data entry is a movie of course. If you do not know that, you could use the itemtype Article (or even Thing) and the global properties name and description.
There is also additional information about the format of e.g. dates and how to integrate invisible data using the meta tag and setting a content attribute: <meta itemprop="bestRating" content="5" />.
You can always give multiple types to an item by specifying the property additionalType. You can even extend the schema. But you should use them carefully as they are not recognized by search engines, but might get used in the future:
If the schema gains adoption and proves useful to search applications, search engines may start using this data.
In general, all this markup is optional, so feel free to mark up as much as possible, but only those parts that make sense. From the schema.org FAQ:
It is fine to mark up only some properties of an item - markup is not an all-or-nothing choice.
Markup validation
To test your markup, Google provides a Rich Snippets Testing Tool. You can paste your HTML there and see what Google extracts from it. For the above example, this is the result:
Item
Type: http://schema.org/movie
name = Avatar
director = James Cameron
genre = Science fiction
trailer
text = Trailer
href = http://www.example.com/movies/avatar-theatrical-trailer.html
On your page
As the information on your page is user-generated, you could let the users choose from the higher level schema.org types (Movie, Place (MIT Dorms), SportsEvent (2012 London Olympics) etc.) and fallback to Thing. Then get the data in form elements matching the properties of those types. Save the data and evaluate it when you build your dictionary pages. It is then crawled by Google (and others) and used for indexing.
For the Gmail example you gave, the markup could simply look like this (copy and paste it into the testing tool to see that Google understands the nesting):
<div itemscope itemtype ="http://www.schema.org/SoftwareApplication">
<h1 itemprop="name">Gmail</h1>
<div itemprop="comment" itemscope itemtype="http://www.schema.org/Comment">
<span itemprop="comment">Google's email service</span>
<span itemprop="author">user63</span>
</div>
<div itemprop="comment" itemscope itemtype="http://www.schema.org/Comment">
<span itemprop="comment">best email service in terms of spam prevention</span>
<span itemprop="author">user21</span>
</div>
<div itemprop="comment" itemscope itemtype="http://www.schema.org/Comment">
<span itemprop="comment">Gmail has a support of IMAP, POP3, SMTPi OAUTH, FRD, two-way secure login</span>
<span itemprop="author">userMew</span>
</div>
</div>
Additional information
For more information see the Google schema.org FAQs. Also see the Dublin Core Metadata Initiatice (DCMI) (Wikipedia) as an alternative way to semantically markup your data. They also have a wiki page for mapping between schema.org and DC.
Dictionaries can now be represented in schema.org in several ways. At the moment the google search results are not based on structured data/schema.org but that may change in future.
Most of the suggestions below are more specific types of http://schema.org/CreativeWork - which is important because it contains properties like comment, contributor, and text which are useful for user-editable content and contributions. CreativeWork also contains learningResourceType which can be set to dictionary - but this isn't a suggested value by schema.org so search engines may not know where to look.
SEO and Semanic HTML for dictionaries
Using the tags with and is the standard way of doing dictionary terms/definitions and used by the top dictionary websites, you can these tags with the schema inside them,
<div itemscope itemtype="http://schema.org/Collection"><h1 itemprop="name">Dictionary</h1>
<dl id="gmail" itemscope itemtype="http://schema.org/CreativeWork">
<dt itemprop="name">Gmail</dt>
<meta itemprop="sameAs" content="http://gmail.com">
<meta itemprop="url" content="http://mydictionary.com/page1.html#gmail">
<dd itemprop="description"><span itemprop="comment">Google's email service</span> -<span itemprop="contributor">user63</span></dd>
</dl>
</div>
Having a separate page (or breadcrumb) for each terms seems key to ranking highly. The page name (including any bookmark) is used in the ranking, so if you search for 'ardvark' the URL http://mydictionary.com/A will rank below http://mydictionary.com/Aardvark even if both pages are otherwise identical.
Explanation of 3 Suitable schema types, including the 'official' dictionary
Method 1)
Use http://schema.org/Thing or http://schema.org/Intangible with only name (your term) and description (your definition) set. This will be hundreds (or more) of separate ones, so you could group them under a collection with http://schema.org/Collective (this how VideoGallery and ImageGallery structured data is done). The nice thing about this is it's simple and very each to show each on a separate page, which should increase hits.
Method 2)
The only way that the schema will recognize the value of Dictionary as a Dictionary is to use http://schema.org/publicationType - which can be any one of the values listed here - one of which is Dictionary. Another is Terminology.
The catch is that at the moment publicationType can only be used inside http://schema.org/MedicalScholarlyArticle - but raise a request and this may be expanded, for example to other ScholarlyArticles, or to CreativeWork (which is a parent of MedicalScholarlyArticle). MedicalScholarlyArticle is a type of CreativeWork - as explained above. If using MedicalScholarlyArticle you can nest items inside, one for each term, possibly using http://schema.org/Thing or http://schema.org/Intangible (set name and description, sameAs can be used to point to a wikipedia or urban dictionary entry that identifies the term, or to social media).
You can open an issue here to request that publicationType be added to all CreativeWork.
Method 3)
A dictionary is a book (whether offline or online), so use http://schema.org/Book and add each term within it by nesting inside. Book is a type of http://schema.org/CreativeWork and as in Method 1 you can set the terms with Thing, Intangible, or even make each term into it's own CreativeWork (just check because google may want an image for each as it does with each ScholarlyArticle).

Correctly format boolean tag attributes with tinymce editor plugin

i am building a plugin for tinymce editor which adds some microdata to selected text, and i want to make sure the final markup will be valid. as specified by the draft microdata spec, a new item is indicated by adding the attribute itemscope to an element, for example:
<section itemscope itemtype="http://example.com/vocab/someobject" itemid="someid" >
<meta itemprop="topic" content="something very interesting" />
....
other microdata stuff
</section>
i have extended the configuration parameters of tinymce to recognize these microdata attributes:
tinyMCE.init({
...
schema: "html5",
extended_valid_elements:"#[itemscope|itemtype|itemid|itemprop|content],div,span,time[datetime]"
...
});
and things are generally working. however, when i use the plugin, tiny mce is still "correcting" my markup by adding an empty value to the itemscope attribute, like so: itemscope="". but the itemscope attribute is a boolean element, which AFAIU means that it should have no value.
so the question is, a) is it still valid markup if the itemscope attribute has a value? and b) if not, (how) can i configure tinymce to leave itemscope as a proper boolean attribute, and not append the ="" bit?
thanks!
The value of a boolean attribute must either be the empty string, or the name of the attribute itself. So, <div itemscope>, <div itemscope="">, and <div itemscope="itemscope"> are all equivalent.

How should I handle schema.org markup for a product with multiple sizes/prices

While implementing schema.org markup for one of my cusomters online-shops I noticed a little difficulty. I think it's a missing option in the markup. Neighter offer nor aggregateOffer can handle this case correctly - although I think it is quite common.
One page for one product (let's say it's a body-lotion)
The body-lotion comes in 3 sizes, 100, 200 and 250ml
It basically has an internal productId (BL100, BL200 and BL250) for each size as well as a EAN (http://en.wikipedia.org/wiki/International_Article_Number_(EAN)) for each size.
How to buy: Go on the product page, chose your size, the price changes via javascript, click add to chart
Q: How can I markup ONE product with MULTIPLE sizes and MULTIPLE prices correctly?
Problems:
http://schema.org/Product suggests only ONE productID which is wrong for me. If I add three offers (http://schema.org/Offer), search engines might think, the pricing is totally weird because the same product has three different offers.
http://schema.org/AggregateOffer doesn't seem right to me eighter.
Thanks for your help.
I think the correct way to mark up this particular scenario is by nesting several Offers inside of a single Product. To add additional information to each Offer, use an IndividualProduct. I'm not 100% sure, but this seems to work well in the Google Structured Data Testing Tool.
It looks like schema.org is still being updated with new ways to markup your products. The schema.org project pulled in a lot of structure from the Good Relations e-commerce product vocabulary. See E-commerce SEO Using Schema.org Just Got A Lot More Granular for more information about the new vocabulary items.
Say we want to list information about Sumatra coffee beans for sale on a website. We want to sell two different sizes (12 oz. and 16 oz.) with different prices for each. However, both product sizes should have the same images ('tis just a coffee bean) and name. The structure will look something like:
Product (name, description, and image)
aggregateRating
Offer (price and priceCurrency)
IndividualProduct (sku and weight)
Offer (price and priceCurrency)
IndividualProduct (sku and weight)
Copy and paste the following into Google's Structured Data Testing Tool to see how Google will interpret the HTML.
jsFiddle display
<article class="product" itemscope itemtype="http://schema.org/Product">
<div class="images">
<a href="images/product.jpg">
<img alt="Sumatra Coffee Beans" itemprop="image" src="images/product.jpg">
</a>
</div>
<div class="content">
<header>
<h1 itemprop="name">Sumatra Coffee Beans</h1>
</header>
<div class="code">
<span class="label">Item Number:</span>
<span itemprop="productID">sumatra-coffee</span>
</div>
<div itemprop="description">
<p>Error 418</p>
</div>
<div class="reviews" itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
<div class="details">
Rated <span itemprop="ratingValue">4.5</span>/5
</div>
<div class="count">
(<span itemprop="reviewCount">9</span> reviews)
</div>
</div>
<div class="offer" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<div itemprop="itemOffered" itemscope itemtype="http://schema.org/IndividualProduct">
<span class="sku" itemprop="sku">scb-ov1</span>
– (<span itemprop="weight">12 oz.</span>)
</div>
<div class="price">$<span itemprop="price">14.99<span></div>
<meta content="USD" itemprop="priceCurrency">
</div>
<div class="offer" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<div itemprop="itemOffered" itemscope itemtype="http://schema.org/IndividualProduct">
<span class="sku" itemprop="sku">scb-ov2</span>
– (<span itemprop="weight">16 oz.</span>)
</div>
<div class="price">$<span itemprop="price">20.99</span></div>
<meta content="USD" itemprop="priceCurrency">
</div>
</div>
</article>
I think I would have one Product that contains multiple Offers, one per size. The limitation, of course, is that it doesn't offer a formal means for specifying multiple product IDs, but perhaps you could informally put those in the Offer's Description or URL property. That's not an exact fit, but maybe it's close enough.
Another option is to join the Public Vocabs email list (lists.w3.org/Archives/Public/public-vocabs), which asserts that it is "the place to propose extensions, new types, or feedback from deployment experience with the existing vocabulary" (lists.w3.org/Archives/Public/public-vocabs/2011Oct/0162.html), and propose a solution to your problem.
I think ProductGroup is the key. See https://schema.org/ProductGroup
I have a similar quest and I find it hard to match google suggestions for xml product feeds with schema.org specs. Thing is, that feed should include each sku as single feed item (each shoe size separately), yet wa sell them as one product with different sizes. Our developer uses AggregateOffer to link all the sizes together, but specs does not allow each offer item to differ or even include an sku field. Product seems to suit the case better. Both sku and +size* are valid, properties of Product. Different sizes should be linked by productGroup.
In your case I would look into ProductModel for grouping multiple Product options, as it allows PropertyValue fields. See https://schema.org/ProductModel
I would recommend a slightly different way of thinking about this particular web page. Instead of thinking about this specific webpage as a 'Product' page, think about it as a 'WebPage' type. This 'WebPage' then actually contains three different 'Products', each with their own 'Offer' and their own 'productID'. When you're saying that each size has it's own EAN, that's a big indicator to me that each size's price/size/id should be contained inside if it's own 'Product' div.
This is what Google says to do: Use itemOffered The item being sold. Typically, this includes a nested Product, but it can also contain other item types or free text.
All the different variations should be represented as separate Products with separate Offers. Use Product's isSimilarTo and isRelatedTo properties to link them together.
reference: http://schema.org/Product
Consider using "AggregateOffer" for the product, than within each offer specify each size as a different "itemOffered"
https://schema.org/itemOffered
While several common expected types are listed explicitly in this definition, others can be used. Using a second type, such as Product or a subtype of Product, can clarify the nature of the offer.