I am new to all forms of coding, so pls forgive me falling over my feet whilst trying to grasp this.
I am trying to setup fb instant articles & am still in the "Production Articles" mode. I have marked up on article that has already been published What is dog training
I want to include RDFa Lite syntax as well, but every time I run it through google structured data test it keeps flagging different faults up.
What "BEGINNERS ERROR" am i making her???
Thanks in advance
<!doctype html>
<html lang="en" prefix="op: http://media.facebook.com/op#">
<head>
<meta charset="utf-8">
<link rel="canonical" href="http://caninecoaching.co.uk/what-is-dog- training/">
<link rel="stylesheet" title="default" href="#">
<title>What is dog training?</title>
<meta property="http://caninecoaching.co.uk" content="Dog Training Article">
</head>
<body>
<div>
<article typeof="http://schema.org/Article">
<header>
<!-- The cover image shown inside your article -->
<figure>
<!--image-->
<span property="http://schema.org/image"><img src="http://caninecoaching.co.uk/wp-content/uploads/2016/05/What-is-Dog-Training1a.jpg" property="http://schema.org/url"/></span>
<!--image-->
<figcaption>Dog training is the process of teaching skills or behaviors to your dog.</figcaption>
</figure>
<!-- The title shown in your article -->
<h1 property="headline">What is dog training?</h1>
<!-- A kicker for your article -->
<h3 class="op-kicker" property="http://schema.org/description">
Dog training is the process of teaching skills or behaviors to your dog. This can include teaching your dog to respond to certain commands, or helping your dog learn coping skills to certain environments.
</h3>
<!-- The author of your article -->
<address>
By <span property="http://schema.org/author">Paul Daly</span> HDipCCB Head Behaviourist at <span property="http://schema.org/publisher">Canine Coaching</span>.
</address>
<!--Logo-->
<img src="http://caninecoaching.co.uk/wp-content/uploads/2016/07/cc-logo-160x-160.jpg" property="https://schema.org/logo" />
<!--Logo-->
<!-- The published and last modified time stamps -->
<time class="op-published" dateTime="2016-5-16T13:30" property="http://schema.org/datePublished">May 14th 2016, 1:30 PM</time>
<time class="op-modified" dateTime="2016-5-16T05:51" property="http://schema.org/dateModified">May 16th 2016, 05:51 AM</time>
</header>
<!-- Headline -->
<h2 property="https://schema.org/headline">What is dog training and how does it help our pets?</h2>
<!-- Headline -->
<div property="http://schema.org/mainEntityOfPage">
<p>Dog training is called classical conditioning designed by the human get a dog performing a desired behavior or skill.</p>
<p>A person who trains dogs is said to be a dog trainer. There are many methods of dog training and many objectives, from basics to more advanced including, Police, Security, Military, Rescue, Hunting, working with livestock, Dogs for the disabled and many more. As pack animals, wild dogs have natural instincts to cooperate with their fellow dogs. Many domestic dogs will either through instinct or breeding correctly interprets and responds to signals given by a human handler or owner.</p>
<p>There is much controversy about what is the most effective way to train a dog. Some dog trainers are said to be ‘positive trainers’ as they mostly use positive reinforcement to elicit, motivate, and achieve desired results. An opposing camp comes from ‘traditional’ trainers encouraging the use of punishment, often a physical stimulus used to regain the control of the dog.</p>
<p>Then there are dominance trainers, who believe all animals have an innate desire to dominate others, and that this dominating behavior needs to be overcome by owner leadership. In practice nearly all trainers use all quadrants of Classical conditioning in their training, and so use both reinforcement and punishment whether they know it or not.</p>
<p>So what do I mean by this well corrections are a form of positive punishment. Corrections can be physical (i.e. leash correction) or mental (i.e. withdrawing a reward). The dog’s personality, the behavior, and the importance of the correct behavior should all be taken into account in using corrections with your dog.</p>
<p>In a nutshell Positive Reinforcement training is in fact the use of negative corrections to eliminate a behavior and positive rewards to repeat a behavior. Pure positive training does not work because the positive reinforcement practice is a basic Classical conditioning technique that rewards dogs for responding accordingly to the trainer’s or owner commands.</p>
<p>Rewards often come through treats or verbal praise or other types of positive reinforces, such as a tug toy or ball, social interaction with other dogs, or the owner’s attention. The more rewarding a dog finds a reinforce the more work it will do to obtain the reinforce. Or does it or does it just causes additional expenses to the owner and risk the dog to potential to become overweight due to overeating. Studies show that positive reinforcement can also manipulate an animal to show both desirable and undesirable behavior depending on its experience.</p>
<p>But you add positive punishment (i.e corrections) which studies show that positive punishment has its place in dog training when combined with positive reinforcement you have a sustainable, reliable training method. Training a dog takes time and patience, however with clear and consistent communication your dog will begin to understand what you or your trainer wants from them fairly quickly.</p>
<p>This corresponds to Animal Cognition the mental capacity of non-human animals. The dog takes in the smells, the sights and sounds to remember something it has been taught. It uses your body language and your energy to gauge how serious you are about getting them to respond to you. All dogs work differently due to the breeds we have created, however they are all they same psychology.</p>
<p>We teach, we guide and we lead our dogs. Remember training is training whatever method you use or think you use.</p>
</div>
<p> </p>
<footer>
<!-- Copyright details for your article -->
<small>© <span property="http://schema.org/copyrightHolder">Canine Coaching</span></small>
</footer>
</article>
</div>
</body>
</html>
Do it like below until you get more experience.
<!DOCTYPE html>
<html lang="en" prefix="op: http://media.facebook.com/op#">
<head>
<meta charset="utf-8" />
<link rel="canonical" href="http://caninecoaching.co.uk/what-is-dog-training/" />
<link rel="stylesheet" title="default" href="#" />
<title>What is dog training?</title>
<meta property="http://caninecoaching.co.uk" content="Dog Training Article" />
</head>
<body>
<div>
<article typeof="http://schema.org/CreativeWork">
<header>
<!-- The cover image shown inside your article -->
<figure>
<span property="http://schema.org/image">
<img src="http://caninecoaching.co.uk/wp-content/uploads/2016/05/What-is-Dog-Training1a.jpg"
property="http://schema.org/url" />
</span>
<figcaption>Dog training is the process of teaching skills or behaviors to your dog.</figcaption>
</figure>
<h1>What is dog training?</h1>
<h3 class="op-kicker" property="http://schema.org/description">Dog training is the process of teaching skills or behaviors
to your dog. This can include teaching your dog to respond to certain commands, or helping your dog learn coping skills to
certain environments.</h3>
<address>By
<span property="http://schema.org/author">Paul Daly</span> HDipCCB Head Behaviourist at
<span property="http://schema.org/publisher">Canine Coaching</span>.
</address>
<!--Logo -->
<span property="http://schema.org/image">
<img src="http://caninecoaching.co.uk/wp-content/uploads/2016/07/cc-logo-160x-160.jpg"
property="http://schema.org/url" alt="canine coaching"/>
</span>
<time class="op-published" datetime="2016-05-16T13:30" property="http://schema.org/datePublished">May 14th 2016, 1:30 PM</time>
<time class="op-modified" datetime="2016-05-16T05:51" property="http://schema.org/dateModified">May 16th 2016, 05:51 AM</time></header>
<!-- Headline -->
<h2 property="http://schema.org/headline">What is dog training and how does it help our pets?</h2>
<div property="http://schema.org/mainEntityOfPage">
<p>Dog training is called classical conditioning designed by the human get a dog performing a desired behavior or
skill.</p>
<p>A person who trains dogs is said to be a dog trainer. There are many methods of dog training and many objectives, from
basics to more advanced including, Police, Security, Military, Rescue, Hunting, working with livestock, Dogs for the
disabled and many more. As pack animals, wild dogs have natural instincts to cooperate with their fellow dogs. Many
domestic dogs will either through instinct or breeding correctly interprets and responds to signals given by a human
handler or owner.</p>
<p>There is much controversy about what is the most effective way to train a dog. Some dog trainers are said to be
‘positive trainers’ as they mostly use positive reinforcement to elicit, motivate, and achieve desired results. An
opposing camp comes from ‘traditional’ trainers encouraging the use of punishment, often a physical stimulus used to
regain the control of the dog.</p>
<p>Then there are dominance trainers, who believe all animals have an innate desire to dominate others, and that this
dominating behavior needs to be overcome by owner leadership. In practice nearly all trainers use all quadrants of
Classical conditioning in their training, and so use both reinforcement and punishment whether they know it or not.</p>
<p>So what do I mean by this well corrections are a form of positive punishment. Corrections can be physical (i.e. leash
correction) or mental (i.e. withdrawing a reward). The dog’s personality, the behavior, and the importance of the
correct behavior should all be taken into account in using corrections with your dog.</p>
<p>In a nutshell
Positive Reinforcement training is
in fact the use of negative corrections to eliminate a behavior and positive rewards to repeat a behavior. Pure positive
training does not work because the
positive reinforcement practice is
a basic Classical conditioning technique that rewards dogs for responding accordingly to the trainer’s or owner
commands.</p>
<p>Rewards often come through treats or verbal praise or other types of positive reinforces, such as a tug toy or ball,
social interaction with other dogs, or the owner’s attention. The more rewarding a dog finds a reinforce the more work
it will do to obtain the reinforce. Or does it or does it just causes additional expenses to the owner and risk the dog
to potential to become overweight due to overeating. Studies show that positive reinforcement can also manipulate an
animal to show both desirable and undesirable behavior depending on its experience.</p>
<p>But you add positive punishment (i.e corrections) which studies show that positive punishment has its place in dog
training when combined with positive reinforcement you have a sustainable, reliable training method. Training a dog takes
time and patience, however with clear and consistent communication your dog will begin to understand what you or your
trainer wants from them fairly quickly.</p>
<p>This corresponds to Animal Cognition the mental capacity of non-human animals. The dog takes in the smells, the sights
and sounds to remember something it has been taught. It uses your body language and your energy to gauge how serious you
are about getting them to respond to you. All dogs work differently due to the breeds we have created, however they are
all they same psychology.</p>
<p>We teach, we guide and we lead our dogs. Remember training is training whatever method you use or think you use.</p>
</div>
<p> </p>
<footer>
<small>©
<span property="http://schema.org/copyrightHolder">Canine Coaching</span></small>
</footer>
</article>
</div>
</body>
</html>
Also, I recommend that you use the W3C HTML validator (https://validator.w3.org/#validate_by_input) as there were HTML errors in your original source.
In the future, you can learn to assign a prefix to the vocabularies-in-use and then use prefix:term as an alternative to specifying the full IRI (less typing and easier-to-read HTML).
Here is an example of declaring vocabularies:
<html
prefix="
this: http://example.com/page#
bibo: http://purl.org/ontology/bibo/
dbr: http://dbpedia.org/resources/
dc: http://purl.org/dc/terms/
foaf: http://xmlns.com/foaf/0.1/
lcsh: http://id.loc.gov/authorities/subjects/
og: http://ogp.me/ns#
ore: http://www.openarchives.org/ore/terms/
"
lang="en"
>
<body
prefix="
schema: http://schema.org/
cc: http://creativecommons.org/ns#
vivo: http://vivoweb.org/ontology/core#
swo: http://www.ebi.ac.uk/swo/
"
about="this:<your-term-here>"
typeof="cc:Work bibo:Document ore:Aggregation schema:TechArticle"
>
Related
I would like to include newer versions for a Dataset that has been superseded.
For example, Some dataset V1 has been replaced by Some dataset V2. The landing page for V1 no longer has data, but instead points to the landing page for V2.
How do I indicate a newer version of a Dataset in Schema.org markup?
Schema.org properties replacer and supersededBy are not recognized for an object of type Dataset.
Schema.org doesn’t provide a property to link a Dataset to an updated Dataset.
An unspecified relation might be conveyed by referencing them from the same DataCatalog. In some contexts it might also make sense to use isBasedOn to link the new one from the old one.
You can provide data about the datasets that could convey which one is the newest:
You can specify the version number of a dataset with the version property.
You can specify the creation/modification/publication dates of a dataset with the dateCreated, dateModified, and datePublished properties. (And if it makes sense in your context, maybe also expires.)
Example:
<article typeof="schema:Dataset" resource="/dataset/v1#this">
<link property="schema:url" href="/dataset/v1">
<link property="schema:includedInDataCatalog" typeof="schema:DataCatalog" href="/dataset#this">
<h2>
<span property="schema:name">Some dataset</span>
V<span property="schema:version">1</span>
</h2>
<time property="schema:datePublished">2017-05-30</time>
</article>
<article typeof="schema:Dataset" resource="/dataset/v2#this">
<link property="schema:url" href="/dataset/v2">
<link property="schema:includedInDataCatalog" typeof="schema:DataCatalog" href="/dataset#this">
<h2>
<span property="schema:name">Some dataset</span>
V<span property="schema:version">2</span>
</h2>
<time property="schema:datePublished">2018-01-22</time>
</article>
In case you don’t offer, nor need to say something about, nor need to reference older datasets, you could of course decide to have only one Dataset and update its dateModified property.
Like many sites, we deliver a lot of imagery on our web site.
Use case: set up labels/refinements in Google Custom Search that aggregate and filter two different classes of image objects. Using Schema.org Microdata markup is very easy and works great, but we want the user to select either
1) PHOTOS: a "photo" is taken by with an instrument -- some kind of camera/lens "machine" that comprises something from "real life"
OR
2) ART: all other images that are creative works by an illustrator/artist: vector art, scans of drawings, scans of paintings, water colors etc.
I can easily determine which is which as our web CMS gets metadata from the database, and drives the content through the pipe and fork dynamic insertion of metadata. Something like
<section class="page-content" role="main" itemprop="image" itemscope itemtype="http://schema.org/ImageObject">
<meta itemprop="image" content="Red Roses" /> #art
and toggle to this if it were a photo
"itemprop="photo" content="Daffodils" # photo
But this is really not doing the job. I would expect to have some property like "imageType" that I could then apply like this
itemprop="imageType" content="photo"
itemprop="imageType" content="art"
But I don't see anything that meets this requirement in Schema.org (my eyes are bleeding from reviewing the hierarchy and still can't find what I need). There is nothing to designate "art" as such.
Any ideas?
I don’t know which features Google Custom Search supports,
but you have the following options with Schema.org and Microdata.
Unless you have to implement it right now, I recommend option b).
a) Propose new Schema.org types/properties
See my answer to another question for links.
b) Wait for an appropriate Schema.org type/property
The next Schema.org release will contain the type VisualArtwork (draft):
A work of art that is primarily visual in character.
It has an artform property (draft) that takes text or an URL as value:
e.g. Painting, Drawing, Sculpture, Print, Photograph, Assemblage, Collage, etc.
Caution notice: these are drafts, subject to change!
Update: VisualArtwork and artform got released.
<div itemscope itemtype="http://schema.org/VisualArtwork">
<meta itemprop="artform" content="Painting">
</div>
<div itemscope itemtype="http://schema.org/VisualArtwork">
<meta itemprop="artform" content="Photo">
</div>
c) Use Schema.org’s extension mechanism
The "slash-based" extension mechanism is "outdated", but valid.
<div itemscope itemtype="http://schema.org/ImageObject/Photo"></div>
<div itemscope itemtype="http://schema.org/ImageObject/Art"></div>
I would only use this as a last resort.
d) Use an additional Schema.org type
This does not work for most cases, but it’s possible in your case: Both of your images are ImageObject, and only the photos are Photograph in addition.
The itemtype attribute can have several values as long as they are from the same vocabulary. But note that you could only use properties that are defined for all of the used types.
<div itemscope itemtype="http://schema.org/ImageObject">
<!-- art -->
</div>
<div itemscope itemtype="http://schema.org/ImageObject http://schema.org/Photograph">
<!-- photo -->
</div>
e) Use a type/property from a different vocabulary
If you know/find a vocabulary about your subject/model, you can use the corresponding types as value for Schema.org’s additionalType property:
<section itemscope itemtype="http://schema.org/ImageObject">
<link itemprop="additionalType" href="http://example.com/vocabulary/photo">
</section>
<section itemscope itemtype="http://schema.org/ImageObject">
<link itemprop="additionalType" href="http://example.com/vocabulary/art">
</section>
If you find a suitable property, you may use its URL as value for itemprop:
<section itemscope itemtype="http://schema.org/ImageObject">
<meta itemprop="http://example.com/vocabulary/imageType" content="photo">
</section>
<section itemscope itemtype="http://schema.org/ImageObject">
<meta itemprop="http://example.com/vocabulary/imageType" content="art">
</section>
f) Use your own proprietary property
If you don’t find a suitable vocabulary, you can use your own URL as property:
[…] a proprietary item property name (i.e. one used by the author for private purposes, not defined in a public specification)
(Example like the second one in b).)
#unor
My developer told me (talking to him after I posted this) we can use (to avoid adding another meta line to the document):
<section itemscope itemtype="http://schema.org/ImageObject"> # for art
<section itemscope itemtype="http://schema.org/Photo"> # for photography
From tests I see that Google will actually parse this: its structured data previewer show it is being extracted. (though it's structured data preview may throw an error). As such I could use it in a custom search refinement/label.
But, it seems wrong to me from the schema.org standard -- since both classes of
images:(photos),(paintings,drawings,vector)
are all "ImageObjects"
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).
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.
I have a large form that consists of all the input (text, checkbox, radio, etc...), I have them grouped together in a fieldset tag and a legend for each feildset. Each input has a label associated with it as well. My question is what is the best approach to display the information on one screen and take advantage of the horizontal real estate the user might or might not have?
I would love it to be all CSS with minimal (if any) table layout(s) as I think tables are for tablature data and not presentation. CSS3 and HTML5 are welcome as well.
Also I would like to have the ability to add branding as this might need to look like another site instead of the original site developed for.
What would be the best approach for this? I have the idea I would use li tags to do the horizontal look but I would like to break to the next line at the end of the screen (Think no scrolling horizontal but vertical is okay)
CSS Novice looking for design pattern advice
This is an example but I think I have around 50 fields
<!DOCTYPE HTML>
<html>
<head>
<title>Large Form</title>
</head>
<body>
<form action="">
<fieldset>
<legend>***</legend>
<label for="fname">First Name</label><br />
<input type="text" name="fname" id="fname" value="" /><br /><br />
<label for="lname">Last Name</label><br />
<input type="text" name="lname" id="lname" value="" /><br /><br />
<label for="gender">Gender</label><br />
<select name="gender" id="gender">
<option value="">-- select</option>
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</fieldset>
<br />
<input type="submit" value="Submit" />
</form>
</body>
</html>
The first thing that comes to mind is that you want to remove the <br/> tags from the form. If you need vertical space, use CSS padding and margins since they're easier to change and make spacing consistent.
With that out of the way, other than branding (which will influence the look and feel of the form the most) the things you want to consider the most are accessibility and ease of use. Your use of labels and unwillingness to use tables for layout are a good start for accessibility so I'm not going to mention it further.
For ease of use, you'll need to make sure that each field can be tabbed to (in an order that makes sense), has a clear, meaningful label, has no unnecessary validation rules (such as forbidding whitespace in a phone number - don't force the user to clean data that can be cleaned automatically) and those validation rules that are necessary have clear, easy to understand messages that appear, ideally, as the user is entering the data rather than waiting for the user to submit the form.
Each of your field sets should be visually grouped either by colour, with a border or some other method. Individual field set should not be broken up, but different field sets can be separate from each other as long as they are contextually different (like address versus interests, for example).
Since you're already grouping field sets, you can use them as your basic unit of page layout. Each set could be floated, for example, in order to maximimize horizontal usage regardless of the user's browser width. As long as the sets are visually distinct enough and are clearly labelled there shouldn't really be any issues with that.
If consistency is more your thing, then each field set should be separated from each other vertically. That would make sure the form is ordered and laid out the same way for every user. Again, the important thing is visual consistency and ease of use. Users are used to forms being laid out vertically so the wasted horizontal space of doing it that way shouldn't be a very big concern.
Just remember: you're making something that should be easy to use and not frustrating. The position of fields should reflect that: they should be natural, grouping like fields together and separating groups of like fields from dissimilar fields. As long as you're keeping that in mind you're probably in good shape.
And don't forget to do some quick usability tests to make sure your validations make sense and are clear.
Have a look at CSS3 grid positioning. It has a clear but powerful syntax, e.g. from the link:
body {
grid-columns: * * (0.5in * *)[2];
grid-rows: 20% *;
columns: 3;
column-gap: 0.5in;
}
Elements use gr units to choose their grid cell:
img {
position: absolute;
left: 2gr;
width: 3gr;
}
You would only have to give an id to your fieldsets then set their position and extents in your style file.
One of my favorite ways to group large forms is with the jQuery style accordion. It allows you to abstract the form into key groupings, keep the form all on one page, and eliminate the need for page scrolling; all with an intuitive user interface.
A good example of this is the Barnes & Noble checkout form process.
Check out CSS Flexbox for some liquid flexibility withing you design sets. I would also recommend picking a "style" and sticking with it. Agree with Welbog.
I guess that if you have a form with 50 fields, you surely have to split it to themed tabs. Say 3 to 5 tabs. They can be implemented by Javascript.
You may want to save input data on-the-fly, because the user may need a long time to finish the form, so there is bigger possibility that he will catch a loss of internet connection or some other factor, that will erase his half-finished form, which would probably dissapoint him and leave your site.
Also consider that user has to have a place for his eye to rest, so be sure to make enough blank room between inputs.