How to markup a document with RDFa when data is across multiple elements - semantic-web

I have the following HTML structure:
<address>
<div>Address Line One</div>
<div>Address Line Two</div>
<div>Address Line Three</div>
<div>Post Code</div>
</address>
Since the data I have is does not consistently have regions or localities, I cannot reliably use the properties addressRegion and addressLocality as defined at schema.org. Instead, I think I should be using the streetAddress property for everything except the post code.
My question is whether this is valid RDFa markup?:
<address property="address" typeof="PostalAddress">
<div property="streetAddress">Address Line One</div>
<div property="streetAddress">Address Line Two</div>
<div property="streetAddress">Address Line Three</div>
<div property="postalCode">Post Code</div>
</address>
If not, is there another way to do this without changing the structure of the HTML?

Your markup is syntactically valid, but it’s probably not conveying what you mean.
You are adding three street addresses (!) to the PostalAddress node, but
consumers have no reason to assume that these are three parts of actually one street address, and
RDFa doesn’t rely on the relative order of these triples anyway (unless you are using lists), so when a consumer queries your data, these three streetAddress values could come up in any order.
So without changing something (I’m not sure what exactly you mean with "structure") in your HTML, you can’t fix this.
scor suggests to add a parent div, which is a good and easy solution.
There are many other ways how to add this triple (for example, adding a meta element giving the full street address and removing the properties from the div elements), but unless you have some special constraints about what you can/cannot change in your HTML, go with the div.
Side note about your markup:
Based on my recommendation for postal address markup, I’d use br elements for separating the street address lines, with optional span elements if a grouping, like in your case, is needed:
<address>
<p property="schema:address" typeof="schema:PostalAddress">
<span property="schema:streetAddress">
Address Line One<br>
Address Line Two<br>
Address Line Three<br>
</span>
<span property="schema:postalCode">
Post Code
</span>
</p>
</address>
That said, I’d question your use of Schema.org’s streetAddress property. Regions or localities should not be included, because, well, they are not part of the "street address". I’d only mark up the actual street address, even if that would mean in your case that the region and the locality don’t get included in the graph.

You can wrap your series of div elements with a higher level div:
<address property="address" typeof="PostalAddress">
<div property="streetAddress">
<div>Address Line One</div>
<div>Address Line Two</div>
<div>Address Line Three</div>
</div>
<div property="postalCode">Post Code</div>
</address>

Related

Defining a relationship between a country and a recipe with Schema

I am building a web page that lists typical dishes for each individual country. Each dish is put in its own article and all of that goes fine. But I wonder if there is a way to link the Recipes to the country. Does it make sense to also specify the country with http://schema.org/Country, and if so how can I link that to the dishes?
I thought about defining the main as a country, and then using http://schema.org/additionalProperty but that doesn't seem to make sense as it expects a PropertyValue, which the recipes aren't.
<main>
<h1>France</h1>
<p>
<span class="capital" title="Capital">Paris</span>
<span class="member-since" title="Member of the EU since 1958">1958</span>
</p>
<article id="recipe-1" itemscope itemtype="http://schema.org/Recipe">
<h1>Éclairs</h1>
<!-- A lot of recipe-related stuff -->
</article>
<article id="recipe-2" itemscope itemtype="http://schema.org/Recipe">
<h1>Macaron</h1>
<!-- A lot of recipe-related stuff -->
</article>
<article id="recipe-3" itemscope itemtype="http://schema.org/Recipe">
<h1>Tarte Tatin</h1>
<!-- A lot of recipe-related stuff -->
</article>
</main>
You can provide the cuisine of a Recipe with its recipeCuisine property:
The cuisine of the recipe (for example, French or Ethiopian).
It expects a Text value.
There is also the locationCreated property, which expects a Place value (which includes Country), but it might be a stretch to use it in this context. Also it wouldn’t be clear if it refers to the location where the recipe is originally coming from, or to the location where the written form was created.
Schema.org doesn’t seem to offer a property to connect a Country and Recipe directly. But you could still connect the items via WebPage.
So for example, if you say WebPage about Country and WebPage mainEntity ItemList, and have each Recipe as itemListElement, there is at least some connection (a page about a specific country has a list of recipes as main content = the recipes are probably related to that country).

Selenium access a form field with bad id

Looking for the best approach to enter / read a value from a form field that lacks human readable ids / references.
The basic outline looks like
<div id="form-2143">
<div id="numberfield-1234">
<label id="numberfield-1234-label">
<span class="x-form-label">Field Name 1</span>
</label>
<div id="numberfield-1234-body">
<div id="numberfield-1234-wrap">
<input id="numberfield-1234-input" class="form-field" componentid="numberfield-1234">
</div>
</div>
</div>
...
</div>
There are more class defs and attributes involved, but above is the "basics" I have to work with.
This form has a number of entries, and there are more forms like it, so I am looking for a way to search for the label name, and access the input field within the same container.
I lack control of the site and cannot edit the HTML structure of the site; meaning I cannot give sensible names to the ids, but want to avoid hard referencing the poor names. Any suggestions on how to get Robot Framework & selenium to reference these elements?
Highlighting Andersson's answer in the comments
Using the XPath
//label[span[text()="Field Name 1"]]/following-sibling::div//input
Works for the above example.
The key part that answers the question of how to reference nearby elements is
/following-sibling

What's wrong with my structure data?

It's been more than 4 months that our rich snippets suddenly disappeared, some error were reported in GWT, i corrected everything and errors are now decreasing (only 5 left). here is my code:
<section class="c-center" itemscope itemtype="http://schema.org/Product">
<div>
<h1><span itemprop="name">Product name</span> <span itemprop="brand" class="brand">Brand of product</span></h1>
<div id="reviews" itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
<div class="rating">
<meta itemprop="ratingValue" content="4.8" />
<meta itemprop="ratingCount" content="56" />
<div class="fill" style="width:96%"></div>
<div class="stars"></div>
</div>
<div class="rating-info">
Based on 56 reviews - Write a review
</div>
</div>
</div>
<div id="img">
<img src="/link-to-image.jpg" alt="Img alt" itemprop="image" />
</div>
<div id="info">
<meta itemprop="url" content="site.com/link-of-product/">
<div id="price-container" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<meta itemprop="priceCurrency" content="EUR">
<meta itemprop="gtin13" content="1234567899999">
<span class="price" itemprop="price">19,95 €</span> <del>28,50 €</del> -
<span class="stock"><link itemprop="availability" href="http://schema.org/InStock">Available</span>
</div>
</div>
</section>
here are my questions:
1- is there anything wrong?
2- I've seen in many posts that currency should not be in the itemprop="price" but in google examples, they do include it! what should I do?
3- should I use ratingCount or reviewCount ?
4- some products exist in different sizes with different prices, is it recommended to include the AggregateOffer with lowest and highest price?
Thanks a lot
How does it appear visually?
The structured data linter shows a typical snippet which looks good and has star rating, and there are no errors in google's tool. Two things which stand out are:
url has no protocol, set to http://yoursite.com/page1 for
price should be number only, which could well be affecting search results, currency is a separate field so should not be embedded in price as well
use <meta> to give your price with a full stop as the separator, not the comma and put large values as 1234567.89 not 1,234,567.89 or 1.234.567,89 but display it as you would normally
price info from http://schema.org/
Use the priceCurrency property (with ISO 4217 codes e.g. "USD") instead of including ambiguous symbols such as '$' in the value.
Use '.' (Unicode 'FULL STOP' (U+002E)) rather than ',' to indicate a decimal point. Avoid using these symbols as a readability separator.
Note that both RDFa and Microdata syntax allow the use of a "content=" attribute for publishing simple machine-readable values alongside more human-friendly formatting.
Use values from 0123456789 (Unicode 'DIGIT ZERO' (U+0030) to 'DIGIT NINE' (U+0039)) rather than superficially similiar Unicode symbols.
google actually gives this example in its policies page
<span itemprop="priceCurrency" content="USD">$</span><span itemprop="price">119.99</</span>
previous Offer price, you could include in <del> structured data for the expired Offer price, with priceValidUntil set to a date in the past, the current price can also have an expiry date.
consider setting itemCondition to http://schema.org/NewCondition
image urls - I've noticed that full url starting path rather than a relative path seem to be preferred - your /link-to-image.jpg is interpreted as http://example.com/link-to-image.jpg not http://site. com/link-to-image.jpg in the testing tool, I'm unsure if this is the same when testing direct from the URL but it seems best not to be amigous
lastly use a shopping search tool, including google shopping to search for a best seller, see if it can find it by price, brand, availability etc. if competitor sites appear first you can even check the structured data tester with their URL to see if you are missing anything

Floor number with schema.org microdata?

Any idea how to markup a floor number with schema.org microdata for a local business' postal address?
<div itemscope itemtype="http://schema.org/LocalBusiness">
<span itemprop="legalName">Company Limited</span>
<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<div itemprop="streetAddress">Billy Street 100</div>
<div>10th Floor</div>
<div><span itemprop="addressLocality">Paris</span>,
<span itemprop="addressRegion">TX</span>
<span itemprop="postalCode">75462</span></div>
<div itemprop="addressCountry">United States</div>
</div>
</div>
Also, is the above markup semantic?
If there's no floor number, should I use RDFa?
Unfortunately, schema.org doesn't have a property for secondary address line, which is where the floor number would go. postOfficeBoxNumber is as close as it gets, but it looks like it's reserved specifically for PO Box numbers, not the whole line that contains PO Box.
Perhaps you could put floor number in streetAddress, on a new line using a <br> tag.
Although I know a lot about street addresses (I work at SmartyStreets), I'm not a microdata expert: but from what I can tell, yes, the markup looks okay to me.
And you could use RDFa instead if you'd like: Google supports it for its rich snippets. Or you could have some fun and extend schema.org for your needs.

Is it allright to wrap H1/H2/H3 tag around a multicolumn design div for headlines?

is the following syntax good to go to emhpasize a multicolumn headline totalling around 20 ~ 30 words? I dont want to use CSS3 multicolumns since it is not supported in IE9 etc.
<H3>
<div id="headingLeft" >blaa blaa blaa</div>
<div id="headingRight">blue blue blue</div>
</H3>
In response to a request from the OP:
[That's] what I was looking for! Place it as an answer so that I can accept is as an answer! The up-vote in your answer would be for the quality of the link you added. Explains everything in very clear language!
Have you considered using html5's header element, and the html5 doctype of course?
The headings shouldn't have div's inside of them. Maybe something more like this... The data in the two headings must not be too closely related, otherwise you shouldn't be splitting them apart at all. I'm assuming it's like a callout or something.
<div class="headings">
<h3 id="headingLeft" >blaa blaa blaa</h3>
<h4 id="headingRight">blue blue blue</h4>
</div>
Why not use a <div> with a class associated to it (or a css selector) instead of using H3 this way. I'm not sure this is the more SEO-friendly way of doing what you want to do.
<div class="headline">
<div id="headingLeft">blaa blaa blaa</div>
<div id="headingRight">blue blaa blue</div>
</div>
It doesn't seem that you're using H3 in a semantic way.