Schema.org's example for a music track shows a "play button" tagged as itemprop="audio" within the itemprop="track" element.
If I'm embedding an entire iframe from a service like soundcloud (but could be any service), is it appropriate to tag the iframe as the "audio"?
<article class="track" itemprop="track" itemscope
itemtype="http://schema.org/MusicRecording">
<span itemprop="name">My Song</span>
<meta itemprop="url" content="http://mysite.com/music">
<iframe itemprop="audio" src="https://w.soundcloud.com/p..."></iframe>
</article>
I think it is.
As for me your use case matches audio property description:
An embedded audio object.
One can say, that you embed audio via iframe.
Besides audio property is of type AudioObject which is broader than just link to a page.
Description of the type says
An audio file.
But in fact this is more about audio object embedded to the page someway. Consider code example at that page where markup is done around flash player.
<div itemscope itemtype="http://schema.org/AudioObject">
<span itemprop="name"><b>12oclock_girona.mp3</b></span>
<script type="text/javascript">
var fo = new FlashObject("http://google.com/flash/preview-player.swf",
"flashPlayer_719", "358", "16", "6", "#FFFFFF");fo.addVariable("url","http://media.freesound.org/data/0/previews/719__elmomo__12oclock_girona_preview.mp3");fo.addVariable("autostart", "0");fo.write("flashcontent_719");
</script>
<meta itemprop="encodingFormat" content="mp3" />
<meta itemprop="contentURL" content="http://media.freesound.org/data/0/previews/719__elmomo__12oclock_girona_preview.mp3" />
<span class="description">
<meta itemprop="duration" content="T0M15S" />
<span itemprop="description">Recorded on a terrace of Girona a sunday morning</span>
</span>
</div>
Besides this type was derived (at least partly) from rNews. As it is said
This class contains derivatives of IPTC rNews properties. rNews is a
data model of publishing metadata with serializations currently
available for RDFa as well as HTML5 Microdata. More information about
the IPTC and rNews can be found at rnews.org.
And in rNews the goal of AudioObject is to mark
audio ... object associated with an Article.
and it doesn't matter, how (iframe, link, etc) it is done.
Related
I am trying to figure out the best way to use schema / structured data on two types of pages. One is an image gallery and one is a video page.
Here is data that is present on each type of page:
Title of gallery
Description of gallery
Name, picture and profile link of the person who submitted the gallery
Review Text
Name, picture and profile link of the reviewer
Date gallery was posted
Average rating of the gallery
Individual images in the gallery
Individual comments left by viewers of the gallery
Video page have almost the same information minus:
Individual images in the gallery
Instead, it has the video, video thumbnail and video duration
I'm a novice at using structured data and I'm hoping if I can get to grips with a single type of schema, I'll be able to apply it to other areas of my site like forums, blogs, etc.
Thank you.
This is a complex question because it involves using multiple types of structured data definitions. Either microdata or rdf are recommended by google. Start with the basics and add in other elements once you have them working. Google's testing tool and the Structured data linter will check them for you.
This generator will help, just remove the photographed by part.
The https://schema.org/ImageGallery schema exists, which will contain one or more images (images use http://schema.org/ImageObjects). Example from photoswipe with the images each including a link to a larger image:
<div itemscope itemtype="http://schema.org/ImageGallery">
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a href="large-image.jpg" itemprop="contentUrl">
<img src="small-image.jpg" itemprop="thumbnail" alt="Image description" />
</a>
<!-- optionally use this method to store image dimensions for PhotoSwipe -->
<meta itemprop="width" content="300">
<meta itemprop="height" content="600">
<figcaption itemprop="caption description">
Long image description
<!-- optionally define copyright -->
<span itemprop="copyrightHolder">Photo: AP</span>
</figcaption>
</figure>
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a href="large-image.jpg" itemprop="contentUrl">
<img src="small-image.jpg" itemprop="thumbnail" alt="Image description" />
</a>
<figcaption itemprop="caption description">Long image description</figcaption>
</figure>
...
</div>
Each of the following things are properties of ImageObject, so put these in where they are in your code, e.g. for Title of gallery use the property headline as follows:
<span itemprop="headline">My trip to Paris</span>
Properties of ImageGallery you can use:
about A description of gallery
aggregateRating average rating, eg "3.5"
dateCreated Date gallery was posted
comment use either another Thing for each (which would let you give the person's name and other details separately - using http://schema.org/Comment) or fill out one comment line per comment. Individual comments left by viewers of the gallery
Complex ones using more Things (more structured data) -
author with Name, picture and profile link - either just add a link to their own page or social media profile, or use the http://schema.org/Person schema (name, url and image properties) as below
<span itemprop="author" itemscope itemtype="http://schema.org/Person">
<span itemprop="name">Joe bloggs</span>
<img src="joebloggs.png" itemprop="image" /> 
<a itemprop="url" href="http://yourwebsite.com/joeblogs.html">View Profile</a>
</span>
Review TextName, picture and profile link of the reviewer
This can be done like the author one above, but using the http://schema.org/Review schema
I want to implement breadcrumbs for my site but I do not want to create any visible tags for that on my page. I thought of using meta tags but as they do not have href property, they can’t contain the itemprop="url" property. Following is the code I am using:
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<meta href="http://www.example.com/dresses" itemprop="url">
<meta itemprop="title" content="Dresses">
</div>
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<meta href="http://www.example.com/dresses/real" itemprop="url">
<meta itemprop="title" content="Real Dresses">
</div>
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<meta href="http://www.example.com/clothes/dresses/real/green" itemprop="url">
<meta itemprop="title" content="Real Green Dresses">
</div>
Is there any workaround method to achieve this?
HTML5 defines that the meta element
[…] represents various kinds of metadata that cannot be expressed using the title, base, link, style, and script elements.
The link element "allows authors to link their document to other resources".
So you have to use link instead of meta if the value is a URI. (Microdata explicitly requires this, too.)
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<link itemprop="url" href="http://www.example.com/dresses">
<meta itemprop="title" content="Dresses">
</div>
As per Google Terms of Service, every markup up have to be visible to each user.
Don't include any hidden markup because Google will penalize you.
I want to mark web page with schema.org tags. I can find in the documentation that one can specify a kind o business with using tag: BusinessFunction and tag from GoodRelations.
The problem is I can not find example of it. Because the web page is about software developer I'm going to use tag: http://purl.org/goodrelations/v1#ProvideService.
Can anybody give me an example?
First of all: A related yet bit outdated resource on modeling services with GoodRelations (and thus schema.org) is here: http://www.ebusiness-unibw.org/wiki/GoodRelationsService
This explains the basic pattern. Note that Some GoodRelations elements have slightly different names in schema.org, as listed here: http://wiki.goodrelations-vocabulary.org/Cookbook/Schema.org#Naming_Differences
I plan to update this page and migrate it to the new GoodRelations Cookbook. But this is an open issue and will take me a while.
Now, for your concrete question: The use of
http://purl.org/goodrelations/v1#ProvideService
is fine if the good you offer is providing a certain service.
Here is a full example:
<div itemscope itemtype="http://schema.org/Offer" itemid="#offer">
<div itemprop="name">Web Development Services</div>
<div itemprop="description">We build your Web site....</div>
<link itemprop="businessFunction"
href="http://purl.org/goodrelations/v1#ProvideService" />
<!-- Unit price -->
<div itemscope itemprop="priceSpecification"
itemtype="http://schema.org/UnitPriceSpecification">Price:
<meta itemprop="priceCurrency" content="USD">$
<span itemprop="price">50.00</span> per
<meta itemprop="unitCode" content="HUR"> hour
<time itemprop="validThrough"
datetime="2013-11-30T23:59:59Z"></time>
</div>
<!-- other offer properties follow here -->
...
</div>
I need to markup the review metadata for a product, but the review will have multiple ratings like service, satisfaction, quality, lifetime etc in the original schema.org documentation for review (http://schema.org/Review) there is only property/field: reviewRating using this i can only use it for one field but i need to provide metadata for all the fields, is there a solution for that?
Thanks.
Actually one property isn't an issue here since it can be used multiple times. There were a lot of discussions around cardinality of schema.org properties. You can dive into details here (issue at open tracker) and here (W3C Wiki page).
I personally follow the rule stated by Guha:
Right now, it is always allowed to have multiple values.
Another part of your question is how to describe different ratings. You can use mechanism of "multiple inheritance" like in "serious" programming language. That is one entity may have several types. In your case one type will be http://schema.org/Rating and another (quality, service, etc) you can get from any external to schema.org vocabulary. E.g., productontology is a good candidate (you can use http://www.productontology.org/id/Quality_philosophy, http://www.productontology.org/id/Customer_service accordingly). With RDFA you can just go with it - language itself provides all the necessary mechanisms to say that. But for microdata (and I bet you're using this one) you need to do "dirty hack" and use additionalType property.
So simple example of what you need is smth like this:
<div itemscope itemtype="http://schema.org/Review">
<span itemprop="name">Not a happy camper</span> -
by <span itemprop="author">Ellie</span>,
<meta itemprop="datePublished" content="2011-04-01">April 1, 2011
<div itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating">
<meta itemprop="additionalType" content="http://www.productontology.org/id/Quality_philosophy">
<meta itemprop="worstRating" content = "1">
<span itemprop="ratingValue">1</span>/
<span itemprop="bestRating">5</span>stars
</div>
<div itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating">
<meta itemprop="additionalType" content="http://www.productontology.org/id/Customer_service">
<meta itemprop="worstRating" content = "1">
<span itemprop="ratingValue">5</span>/
<span itemprop="bestRating">5</span>stars
</div>
<span itemprop="description">The lamp burned out and now I have to replace
it. </span>
</div>
And Google validator sees all the data.
The Facebook URL Linter now throws errors when it sees tags outside of the head. The problem is that these tags are used for Microdata markup.
So in my HTML, in the body, I'll have tags equivalent to:
<meta itemprop="ratingValue" content="5"/>
It's required to be in the <body> since it needs to be encapsulated within my <DIV> where I'm specifying the necessary itemprop value. ie:
<div itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating">
...
<meta itemprop="ratingValue" content="5"/>
</div>
The Facebook URL linter never threw errors on this when I first implemented microdata markup but when I did a check on one of our pages today, the error shown was:
Body Meta: You have <meta> tags ouside of your <head>. This is either because your <head> was malformed and they fell lower in the parse tree, or you accidentally put your Open Graph tags in the wrong place. Either way you need to fix it before the tags are usable.
I did a double check on Google's documentation on Microdata and it has a code example that also has a META tag that must be outside the head since it's nested within a <DIV>:
<div itemprop="rating" itemscope itemtype="http://data-vocabulary.org/Rating">
Rating: <span itemprop="value">8.5</span>
<meta itemprop="best" content="10" />
</div>
Anyone else having this problem too?