Video rich snippet: when to use <span> and when <meta>? - rich-snippets

I see all kinds of examples of video rich snippet code. What I don't understand is that sometimes people use tags and sometimes tags to markup the same thing.
Is there some kind of rule or meaning? Is the outcome different depending on what I use?
Thanks!

Take below for example. Say I want to include metadata for items that are not rendered to the viewer. Such as tue-thur of the opening hours they go into meta tags. Notice that they are still wrapped in the parent span as the tags for mon and fri which are rendered to the viewer. This makes all five days into one item.
These and the geo cords tags near the bottom are easy examples to try out in Google's Rich Snippet Tool to see the differences in the way the tags are interpreted depending on the way they are nested.
<span itemprop="hasPOS">
<span itemprop="contactPoint" itemscope="" itemtype="http://schema.org/ContactPoint">
<i class="icon-phone blue"></i>303-948-2988
</span><br>
<span itemprop="address" itemscope="" itemtype="http://schema.org/PostalAddress">
<span itemprop="streetAddress">7921 S. Platte Canyon Rd</span><br>
<span itemprop="addressLocality" itemscope="" itemtype="http://schema.org/City">
<span itemprop="name">Littleton,</span>
</span>
<span itemprop="addressRegion" itemscope="" itemtype="http://schema.org/State">
<span itemprop="name">Colorado</span>
</span><br>
<span itemprop="postalCode">80128</span>
</span><br>
<span itemprop="openingHours" itemscope="" itemtype="http://schema.org/OpeningHoursSpecification">
<span itemprop="dayOfWeek">
<span itemscope="" itemtype="http://schema.org/DayOfWeek/Monday">Monday</span>
</span>-
<span itemprop="dayOfWeek">
<span itemscope="" itemtype="http://schema.org/DayOfWeek/Friday">Friday</span>
</span>7am - 6pm
<meta itemprop="dayOfWeek" itemtype="http://schema.org/DayOfWeek/Tuesday" content="Tuesday" />
<meta itemprop="dayOfWeek" itemtype="http://schema.org/DayOfWeek/Wednesday" content="Wednesday" />
<meta itemprop="dayOfWeek" itemtype="http://schema.org/DayOfWeek/Thursday" content="Thursday" />
<meta itemprop="opens" itemtype="http://schema.org/Time" content="19:00:00Z-06:00" />
<meta itemprop="closes" itemtype="http://schema.org/Time" content="08:00:00Z-06:00" />
</span>
<span itemprop="geo" itemscope="" itemtype="http://schema.org/GeoCoordinates">
<meta itemprop="latitude" content="39.572216" />
<meta itemprop="longitude" content="-105.056745" />
</span>
</span>

Related

How can I use Glyphicons with JSF?

How can i use glyphicons with JSF(Netbeans: Maven/web application+JSF Framework)? I want to use a glyphicon with a <h:link>.
Here is how I did it in regular HTML:
<li><span class="glyphicon glyphicon-home"></span> Home</li>
Here is how that looked like:
Here is how I tried to do it in JSF:
<li><h:link id="bone" value="Home" outcome="book" /><span class="glyphicon glyphicon-plane"></span></li>
Here is how it looked like:
As you can see, the glyphicon which is black and a little hard to see in that darkblue background color, is located down there. How do I make it to look like the HTML version but in JSF?
Ps, the "home button" is part of a navigation bar.
Thanks.
When you use this code:
<h:link id="bone" value="Home" outcome="book" />
<span class="glyphicon glyphicon-plane"></span>
Your generated HTML code will be:
<span class="glyphicon glyphicon-home"></span> Home
Try like this:
<li>
<h:link id="bone" outcome="book">
<span class="glyphicon glyphicon-plane"></span>Home
</h:link>
</li>
In short: the order you place the JSF code matters.

Rich Snippets Nesting Issue

I've never used Rich Snippets before, so this is a little bit of a learning curve for me. I believe my issue is a nesting problem but I can't find any documentation anywhere that explicitly states how to nest these properties correctly.
I'm wanting to index a single-product review with multiple reviews into Rich Snippets with classic ASP pulling in different data feilds, here is my code:
<div>
<div itemscope itemtype="http://data-vocabulary.org/Review">
<span itemprop="itemreviewed">Forma Stanzol</span><br />
By <span itemprop="reviewer"><%=formaStanzolReviewArray(0,i)%></span><br />
<time itemprop="dtreviewed" datetime="<%=FormatDateTime(formaStanzolReviewArray(1,i),2)%>"><%=FormatDateTime(formaStanzolReviewArray(1,i),2)%></time> <br />
<span itemprop="description"><%=formaStanzolComment%></span>
</div>
</div>
This returns the Error: No rich snippet will be generated for this data, because it appears to include multiple reviews of an item, but no aggregate review information.
So, I added a dummy Aggregate code with static values, here's what it looks like all together:
<div>
<div itemscope itemtype="http://data-vocabulary.org/Review">
<span itemprop="itemreviewed">Forma Stanzol</span><br />
By <span itemprop="reviewer"><%=formaStanzolReviewArray(0,i)%></span><br />
<time itemprop="dtreviewed" datetime="<%=FormatDateTime(formaStanzolReviewArray(1,i),2)%>"><%=FormatDateTime(formaStanzolReviewArray(1,i),2)%></time> <br />
<span itemprop="description"><%=formaStanzolComment%></span>
</div>
<div itemscope itemtype="http://data-vocabulary.org/Review-aggregate">
<span itemprop="itemreviewed">Forma Stanzol</span>
<span itemprop="rating" itemscope itemtype="http://data-vocabulary.org/Rating">
<span itemprop="average">9</span>
out of <span itemprop="best">10</span>
</span>
based on<span itemprop="count">5</span> user reviews.
</div>
</div>
This causes my "Reviews" to not error but then all of my "Aggregate Reviews" push out this Error: No rich snippet will be generated for this data, because it appears to include multiple aggregate reviews of many items, instead of a single aggregate review of one item.
Seems like it's working against itself no matter what I do, so that's why I believe this to be a nesting issue.
How can I fix this?
EDIT: Ideally, I don't event want the Aggregate view of this item. The reviewer, item name, review date, and review description is all I need.
EDIT EDIT: This code is also running in a For loop where its getting information from the database with each pass.
Ok so the issue here was that a website, with a single product, but multiple reviews needs only one "Review-Aggregate" and one "Rating" itemtype. However, multiple "Review" itemtypes must be used.
So, my For Loop creates a "Review" for each row in the database, using the related data feilds and then after the conditional statement, the "Review-Aggregate" and Rating" codes are placed.
Code:
For i = 0 to uBound(formaStanzolReviewArray,2)
reviewCount = reviewCount + 1
formaStanzolComment = trim(formaStanzolReviewArray(2,i))
'Do not show reviews with empty comments
If Not (formaStanzolComment = "") OR isNull(formaStanzolComment) Then
%>
<div>
<div itemscope itemtype="http://data-vocabulary.org/Review">
<span style="position: absolute; left: 9999px;" itemprop="itemreviewed">Forma Stanzol</span>
Rating: <span itemprop="rating"><%=formaStanzolReviewArray(3,i)%></span> -
By <span itemprop="reviewer"><%=formaStanzolReviewArray(0,i)%></span> -
<time itemprop="dtreviewed" datetime="<%=FormatDateTime(formaStanzolReviewArray(1,i),2)%>"><%=FormatDateTime(formaStanzolReviewArray(1,i),2)%></time> <br />
<span itemprop="description"><%=formaStanzolComment%></span>
</div>
</div>
<%
sumRating = sumRating + formaStanzolReviewArray(3,i)
End If
Next
ratingAvg = sumRating / reviewCount
%>
<div style="position: absolute; left: 9999px;">
<div itemscope itemtype="http://data-vocabulary.org/Review-aggregate">
<span itemprop="rating" itemscope itemtype="http://data-vocabulary.org/Rating">
<span itemprop="worst">1</span>
<span itemprop="average"><%=ratingAvg%></span>
out of <span itemprop="best">5</span>
</span>
based on <span itemprop="votes"><%=reviewCount%></span> ratings.
<span itemprop="count"><%=reviewCount%></span> user reviews.
</div>
</div>
<%
Think of it as multiple User reviews in the For Loop, but we collect all of those reviews once in the aggregate, and then give that aggregate a rating scale.
Hope this helps anyone having nesting issues.
Please Note: I am using classic ASP for this particular code.

Create custom portelt - mixture of news and events

I'm trying to create a custom portelt which displays news or event items based on a keyword. I don't want to use the collects portlet facility. I've created a Python Script which fetches the necessary results like this:
from Products.CMFCore.utils import getToolByName
portal_catalog = getToolByName(context, 'portal_catalog')
return portal_catalog.searchResults(
Subject = 'Startseite',
end={'query': DateTime(),
'range': 'min'},
sort_on='start',
sort_limit=3,
review_state='external')[:5]
So this should fetch all objects with the review_state 'external' and the keyword (or subject) 'Startseite'. Now I've created a page template which is used to render a classic portelt:
<html xmlns:tal="http://xml.zope.org/namespaces/tal"
xmlns:metal="http://xml.zope.org/namespaces/metal"
i18n:domain="plone">
<body>
<div metal:define-macro="portlet"
tal:define="view context/##events_view;
results context/startpage_informations;
events_link view/all_events_link;
prev_events_link view/prev_events_link"
tal:condition="results">
<dl class="portlet" id="portlet-events">
<dt class="portletHeader">
<span class="portletTopLeft"></span>
<a href=""
tal:attributes="href events_link"
class="tile">
Wichtige Neuigkeiten:
</a>
<span class="portletTopRight"></span>
</dt>
<tal:events tal:repeat="obj results">
<dd class="portletItem"
tal:define="oddrow repeat/obj/odd"
tal:attributes="class python:test(oddrow, 'portletItem even', 'portletItem odd')">
<a href="#"
class="tile"
tal:attributes="href obj/getURL;
title obj/Description">
<img src="#" alt="" tal:replace="structure here/news_icon.gif" />
<span tal:replace="obj/pretty_title_or_id">
Some Event
</span>
<span class="portletItemDetails"
tal:define="starts python:toLocalizedTime(obj.start, long_format=1);
ends python:toLocalizedTime(obj.end, long_format=1);
startTime python:toLocalizedTime(obj.start,time_only=1);
endTime python:toLocalizedTime(obj.end,time_only=1);
startDay python:toLocalizedTime(obj.start, long_format=0);
endDay python:toLocalizedTime(obj.end, long_format=0);">
<span>
<tal:condition condition="obj/location">
<tal:location content="obj/location">Location</tal:location>,<br />
</tal:condition>
<tal:sameday tal:condition="python:startDay==endDay">
<span tal:condition="startDay" tal:replace="startDay">:[If this is an event, show its start time and date]</span><br />
Uhrzeit: <span tal:condition="startTime" tal:replace="startTime">[If this is an event, show its start time and date]</span> -
<span tal:condition="endTime" tal:replace="endTime">[If this is an event, show its start time and date]</span>
</tal:sameday>
<tal:multiday tal:condition="python:startDay!=endDay">
Vom <span tal:condition="starts" tal:replace="starts">[If this is a multi-day event, show its start date]</span><br />bis
<tal:hasendday tal:condition="ends">
<span tal:replace="ends">[If this is a multi-day event, show its end date]</span>
</tal:hasendday>
</tal:multiday>
</span>
</span>
</a>
</dd>
</tal:events>
</dl>
</div>
</body>
</html>

Need xpath to locate 2 buttons with almost same properties for using in Selenium automation script

Both these buttons have almost similar ID (the number on the ID may change and so is not reliable)
Both have same classes
They both reside under the same parent
Except for the span nothing is different
All the UI elements of the application I am trying to locate and build events on Using Selenium are similar to the below piece...
Can anyone please suggest how I can locate these buttons preferable with xpath?
<div id="button-1749" class="x-btn x-box-item x-toolbar-item x-btn-default-toolbar- small x-noicon x-btn-noicon x-btn-default-toolbar-small-noicon x-item-disabled x-disabled x-btn-disabled x-btn-default-toolbar-small-disabled" style="margin: 0pt; left: 1563px; top: 0px;">
<em id="button-1749-btnWrap" class="">
<button id="button-1749-btnEl" class="x-btn-center" autocomplete="off" role="button" hidefocus="true" type="button" aria-disabled="true" disabled="">
<span id="button-1749-btnInnerEl" class="x-btn-inner" style="">Delete Selected</span>
<span id="button-1749-btnIconEl" class="x-btn-icon x-hide-display"> </span>
</button>
</em>
</div>
<div id="button-1750" class="x-btn x-box-item x-toolbar-item x-btn-default-toolbar-small x-noicon x-btn-noicon x-btn-default-toolbar-small-noicon" style="margin: 0pt; left: 1654px; top: 0px;">
<em id="button-1750-btnWrap" class="">
<button id="button-1750-btnEl" class="x-btn-center" autocomplete="off" role="button" tabindex="1" hidefocus="true" type="button">
<span id="button-1750-btnInnerEl" class="x-btn-inner" style="">New Title</span>
<span id="button-1750-btnIconEl" class="x-btn-icon x-hide-display"> </span>
</button>
</em>
</div>
If you want to look for the elements under a specific div, you can use descendent axis.
Example:
//div[#id='your div']/descendant::button[contains(#class, 'x-btn-center')]/span[text()='Delete Selected']"
This will give you Deleted Selected button that is within the div with id 'your div'.
You could also use GetElements (opposed to GetElement) and this will return a List of elements that match your search criteria. Then, providing the order the buttons appear on the page never changes, you may use this List to access the button you want every time by using the associated index.
Eg.
ReadOnlyCollection<IWebElement> buttons = driver.FindElements(By.XPath("YOUR XPATH HERE"));
//If it's the 3rd button that matches your criteria
buttons[2].Click(); //or whatever you want with this button :)
I think this should work in your case:
locator = driver.find_element_by_xpath("//div/em/button/span[contains(text(),'Delete Selected')]")
You can do similar way in case of another element.
though xpath is a desired locator per your question, there are documented speed differences between xpath and css selector, here's one example: http://saucelabs.com/blog/index.php/2011/05/why-css-locators-are-the-way-to-go-vs-xpath/. to locate those elements via css selector, use the following, python example
els = driver.find_elements_by_css_selector("button[id^=button]
for eachel in els:
eachel.click()
You have to create your own xpath if the xpath of 2 elements are same
driver.findElement(By.xpath("//span[contains(text),'New Title')]")).click;

Stars and aggregated rating are not shown when using schema.org markup and and Review in xhtml page

I'm trying to implement schema.org's microData format in my xhtml template.
Since I'm using xhtml templates, I needed to add
<div itemprop="reviews" itemscope="itemscope" itemtype="http://schema.org/Review">
instead of:
<div itemprop="reviews" itemscope itemtype="http://schema.org/Review">
otherwise my template wouldn't be parsed. I found the solution here
My markup looks like this:
<div itemscope="itemscope" itemtype="http://schema.org/Place">
<div itemprop="aggregateRating" itemscope="itemscope"
itemtype="http://schema.org/AggregateRating">
<span itemprop="ratingValue">#{company.meanRating}</span> stars -
based on <span itemprop="reviewCount">#{company.confirmedReviewCount}</span> reviews
</div>
<ui:repeat var="review" value="#{company.reverseConfirmedReviews}">
<div itemprop="reviews" itemscope="itemscope" itemtype="http://schema.org/Review">
<span itemprop="name">Not a happy camper</span> -
by <span itemprop="author">#{review.reviewer.firstName}</span>,
<div itemprop="reviewRating" itemscope="itemscope" itemtype="http://schema.org/Rating">
<span itemprop="ratingValue">1</span>/
<span itemprop="bestRating">5</span>stars
</div>
<span itemprop="description">#{review.text} </span>
</div>
</ui:repeat>
</div>
When testing this in http://www.google.com/webmasters/tools/richsnippets I'm not getting any stars back or aggregated review count
What am I doing wrong here?
Yes!!
The problem actually consisted of two errors, first somebody had named the div class to
"hReview-aggregate" which is appropriate when you implement Microformats not
Microdata
The second error was that I misunderstood the specification of schema.org.
This is how I end up doing:
<div class="box bigBox" itemscope="itemscope" itemtype="http://schema.org/LocalBusiness">
<span itemprop="name">#{viewCompany.name}</span>
<div class="subLeftColumn" style="margin-top:10px;" itemprop="aggregateRating" itemscope="itemscope" itemtype="http://schema.org/AggregateRating">
<div class="num">
<span class="rating" id="companyRating" itemprop="ratingValue">#{rating}</span>
</div>
<div>Grade</div>
<div class="num">
<span class="count" id="companyCount" itemprop="reviewCount">
#{confirmedReviewCount}
</span>
</div>
</div>
</div>
Hope this helps!!!!!
hey checkout how holidayhq guys have done it for this url : www.holidayiq.com/destinations/Lonavala-Overview.html
you can check there snippet on this tool : http://www.google.com/webmasters/tools/richsnippets
and google out this keyword "lonavala attractions" and you will see the same snippet, they have used microdata to generate this reviews in snippet, they have used typeof="v:Review-aggregate" and much more tags, have a look at it, its nice implementation of the reviews in snippet kind of work.

Resources