Why Google doesn't show review/rating with stars? - html

After readings on schema.org I wrote a small "rich snippet" or what ever it is called. We were found today by google, but no stars and ratings were shown. Maybe someone has expierence with it and know how things are done? Does it only depends on microdata or also on anything else in <head> tags? Otherwise what is wrong with my snippet?
Here is my snippet:
<div itemscope itemtype="http://schema.org/Organization">
<div class="row">
<div class="col-sm-6">
<div class="clogo-container">
<img src="logo.jpg" alt="logo" class="logo" />
</div>
<div class="infos">
<span class="website">https://localhost</span><br/>
is a page made by<br/>
<br/>
<span class="name" itemprop="name"><b>Mypage</b></span><br/>
</div>
</div>
<div class="col-sm-6">
<div class="rate" itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
<div class="ratingbox">
<img src="image.jpg" alt="Logo" />
<b><span class="name">Mypage</span></b>
<div class="main-rating" id="customer-1-rate"></div>
<span class="vote">
<span itemprop="ratingValue">4.44</span>
<meta itemprop="bestRating" content="5"/>
<meta itemprop="worstRating" content="1"/>
/ 5.00</span><br/>
<span class="total">out of
<span itemprop="ratingCount">34</span>
total</span>
</div>
</div>
</div>
</div>
</div>

Your use of Microdata and Schema.org seems to be fine, and Google’s SDTT reports no issues and says that you provide all necessary data for their Aggregate Ratings Rich Snippet. So technically everything seems to be correct.
That means the issue (that you don’t see a Rich Snippet for your result) probably has to do with Google’s policies. There are various possible reasons why a search result feature doesn’t get displayed for a result. And note that they never guarantee displaying one, even if everything is correct.
Typical (but not the only) reasons:
You have to wait longer. It can take a long time (after indexing) until Rich Snippets appear.
You checked the search result for your homepage (or you only have this markup on your homepage). Google doesn’t show Rich Snippets for homepages.
Your page content doesn’t "look like" it contains aggregated ratings, or your hide them visually.

Related

Warning on 'Question' type: "Missing a QAPage markup item on page to which this item should be associated."

The following Answer schema gives a warning in Google’s SDTT:
Missing a QAPage markup item on page to which this item should be associated.
Microdata:
<div itemscope itemtype="http://schema.org/Question">
<h1 itemprop="name">What is attr_accessor in Ruby?</h1>
<div itemprop="upvoteCount">196</div>
<div itemprop="text">I am having difficulty understanding Ruby attr_accessors, can someone explain them?</div>
<div>asked <time itemprop="dateCreated" datetime="2010-11-04T20:07Z">Nov 11 '10 at 20:07</time></div>
<div itemprop="author" itemscope itemtype="http://schema.org/Person">
<span itemprop="name">someuser</span>
</div>
<div><span itemprop="answerCount">4</span> answers</div>
<div itemprop="suggestedAnswer acceptedAnswer" itemscope itemtype="http://schema.org/Answer">
<div itemprop="upvoteCount">1337</div>
<div itemprop="text">
(The text of the accepted answer goes here...).
</div>
<div>answered <time itemprop="dateCreated" datetime="2010-12-01T22:01Z">Dec 1 '10 at 22:01</time></div>
<div itemprop="author" itemscope itemtype="http://schema.org/Person"><span itemprop="name">anotheruser</span></div>
</div>
<div itemprop="suggestedAnswer" itemscope itemtype="http://schema.org/Answer">
<div itemprop="upvoteCount">39</div>
<div itemprop="text">
(Another explanation would go here).
</div>
<div>answered <time itemprop="dateCreated" datetime="2010-12-06T21:11Z">Dec 6 '10 at 21:11</time></div>
<div itemprop="author" itemscope itemtype="http://schema.org/Person"><span itemprop="name">lonelyuser1234</span></div>
</div>
</div>
Is this markup not true for Google at this time?
Like the warning says, Google recommends to provide a QAPage item, probably for qualifying for one of Google’s search result features.
You can associate your Question to the QAPage via the mainEntity property:
<div itemscope itemtype="http://schema.org/QAPage">
<div itemprop="mainEntity" itemscope itemtype="http://schema.org/Question">
<!-- … -->
</div>
</div>
You should also take in mind if this is a QAPage (which only handles an individual question as stated) or a FAQPage (with one or more questions & answers, as stated as well). The last one is still on the pending extension, but it looks it is close to be released into the schema spec, per https://searchengineland.com/google-confirms-new-faqs-qa-and-how-tos-for-search-results-snippets-303116.
In any case, you should be able to wrap all of your Question and Answer schema markup within the markup of these other specs, at least for QAPage and FAQPage, which both extend from WebPage (already stablished inside the schema spec).
You can take a look at how SO does it inside the <html> tag, at least for the QAPage spec, which seems more like the thing you need:
Also, these are some SO questions that might be related to yours:
Schema.org for the FAQ page
Schema warning about QAPage on Question type
QAPage with multiple questions
2019-05-08 - EDIT: The FAQPage is now an official extension:
https://schema.org/FAQPage
https://developers.google.com/search/docs/data-types/faqpage
https://searchengineland.com/google-search-adds-support-for-faq-and-how-to-structured-data-316541
This day i was searching for something similar, in the past my html code whas ok but shcema.org is always changin. I check out your code and the erros and requirements were the same for my code. I re-write by my own the code and i have the answer.
Now if you whant to solve the problem (probably in a few months its wrong what im writing) try this
itemscope="" itemtype="http://schema.org/FAQPage"
itemprop="mainEntity" itemscope="" itemtype="http://schema.org/Question"
REMOVE itemscope itemtype="http://schema.org/Question" and add at the end one more div
(i have problems to copy the full code add properly de starting and ending divs

How do I use Schema.org to identify filters on our hotel search site?

I'm working on a site designed to help a user find a hotel. We've got lots of widgets for filtering the hotels we show (e.g. price filters) or else ordering the hotels we show (e.g. by distance).
I can see how to markup our hotels as being a list. And also how to communicate the sort order of the list.
And we're already marking up the hotel's themselves:
<div itemscope itemtype="http://schema.org/Hotel">
<div itemprop="image" style="background-image: url('{{{ imageUrl }}}');"></div>
<h2 class="title" itemprop="name">{{ name }}</h2>
<div itemscope itemtype="http://schema.org/Offer">
<div itemprop="price">{{{ price }}}</div>
</div>
</div>
Is there a way of identifying our filters as being tools for adjusting the list?
To get an idea of how the website works see - http://mapov.com/hotels/the+strip/.
Is there a way of identifying our filters as being tools for adjusting the list?
With an Action type.
See SearchAction or perhaps FindAction (DiscoverAction).
An Action can be used to represent what happened (e.g., "User 3 searched for hotels in Amsterdam"), but also for representing potential actions: use the potentialAction property to specify the possible actions an item can have.
<section itemscope itemtype="http://schema.org/ItemList">
<div itemprop="potentialAction" itemscope itemtype="http://schema.org/SearchAction">
…
</div>
</section>
Side notes about your markup
Your image property won’t work, it can’t have an image specified in the style attribute as value. You have to provide the image property on a "link" element (e.g., img, a, link, …).
Your Offer is not associated with the Hotel. You could use the makesOffer property.
<div itemscope itemtype="http://schema.org/Hotel">
<img itemprop="image" src="http://yourhostel.es/content/124"/>
<meta itemprop="address" content="you street"/>
<h2 class="title" itemprop="name">name </h2>
<div itemprop="priceRange">price</div><div itemprop="telephone">9999999</div>
price

Embedding Youtube player on website page

Having had some very basic HTML involvement in a previous website I was involved with, I am learning HTML and CSS in an effort to be able to do more work on my new website.
Currently I have a static image of a Youtube video, with a link that opens up a fullscreen player on a new page, but I'd like to replace that static image with an embedded Youtube player to play the video on my webpage.
There are a few places on the webpage (http://www.johnpearsesafaris.com/page-news-ls.html#) this method is used, but I am trying initially to just make the change to the uppermost image of the falcon with wings splayed, under the title 'How Did they ever film this?"
I initially went to the youtube site that explains the various embed player options they have and decided to go with the iframe one, as i have used iframes elsewhere before.
On my first attempt, I managed to get the player to embed itself and the video to play, but unfortunately it screwed up the rest of the formatting on the page. The static images for all the others News posts below it disappeared and the formatting of the rest of the page went out of whack.
=I then looked at a number of different guidelines on how to do it, and have spent a number of hours trying to rectify the situation, but I can't seem to overcome the break in formatting.
What I did was replace the HTML between rows 166 and 185 with the following HTML:
<div class="row">
<div class="loop-posts eight columns">
<div id="div3" class="post-CLASS blog-post-item b30">
<div class="post-heading">
<h2 class="blog-title"><a
href="https://www.youtube.com/v/XBEyCr5AoIs" target="_blank">How
did they ever film this?</a> </h2>
<div class="blog-meta"> <span class="blog-date">FEB
2014 <span class="blog-author"><span>
By </span><a class="blog-author-tooltip" rel="tooltip" data-original-title="View all posts by TheEditor" href="#">The
Editor</a>
</span>
</span>
</div>
</div>
<div class="blog-thumb-wrapper">
<iframe src="//www.youtube.com/embed/XBEyCr5AoIs" allowfullscreen="" frameborder="0" height="360" width="640"></iframe>
</div>
<div class="blog-excerpt">
<p>How did they ever film this?</p>
</div>
</div>
</div>
</div>
I am hoping that it's a simple oversight on my part. What is really confusing me is the div classes.
I confess I don't know enough about them but have been watching multiple instructional videos and using various other sources in a desperate effort to get up to speed.
I would really appreciate any help / guidance anyone could give me in helping me resolve the matter. I will continue to try to fix it on my own in the meantime.
Replace with this:
<div class="row">
<div class="loop-posts eight columns">
<div class="post-CLASS blog-post-item b30" id="div3">
<div class="post-heading">
<h2 class="blog-title"><a href=
"https://www.youtube.com/v/XBEyCr5AoIs" target="_blank">How
did they ever film this?</a></h2>
<div class="blog-meta">
<span class="blog-date">FEB 2014 <span class=
"blog-author">By <a class=
"blog-author-tooltip" data-original-title=
"View all posts by TheEditor" href="#" rel=
"tooltip">The Editor</a></span></span>
</div>
</div>
<div>
<iframe frameborder="0" height="360" src=
"//www.youtube.com/embed/XBEyCr5AoIs" width="640"></iframe>
</div>
<div class="blog-excerpt">
<p>How did they ever film this?</p>
</div>
</div>
</div>
</div>

Correct usage of microformat

I am using microformat for the first time.
So as examples given on http://support.google.com/webmasters/bin/answer.py?hl=en&answer=164506, I changed the code.
This is the existing code that was present on the page:
<div class="evD mr10">
<div class="imgH fl"><img /></div>
<div class="infAr">
<h3>EVENT NAME</h3>
<h4><span>at</span>VENUE NAME</h4>
<p>Event Description</p>
<a class="tdd" href="#">Genre</a>
</div>
<div class="dth">
<div class="sfrD fl">
</div>
<div class="strE sn fl">
</div>
<div class="Buy">
<a class="bkT" href="buy_link"></a>
</div>
</div>
</div>
The Changes I made include :
Change the doctype to html5, and added microformat classes.
<div class="vevent evD mr10">
<div class="imgH fl"><img class="photo" /></div>
<div class="infAr">
<h3><a class="url summary" href="event_URL">EVENT NAME</a></h3>
<h4 class="location"><span>at</span>VENUE NAME</h4>
<p class="description">Event Description</p>
Genre
</div>
<div class="dth">
<div class="dtstart frD fl">DATE_START<span class="value-title" title="Date in ISO"></span></div>
<div class="dtend strE sn fl"><span class="value-title" title="Date in ISO"></span></div>
<div class="Buy tickets">
<a class="bkT offerurl" href="buy_link"></a>
</div>
</div>
</div>
I have the following questions/doubts :
Is it ok to have existing classes alongwith the microformat tags as done above?
As mentioned on http://support.google.com/webmasters/bin/answer.py?hl=en&answer=1093493#usage, it is not allowed to have display:none on the content. However, I pass the data set and paginate using javascript, in which I show the relevant data. So how do I make sure that these is not ignored.
I load the images which are on the current page, leaving the src as blank, and later change the src, as the page is changed. So initally the event's photo is blank.
How do I counter from a search engine reading as blank.
Thank you.
(Sorry about the question being so long)
1) that is no problem. You can even combine multiple types of semantic markup on the same tags.
2) 3)
If the data is hidden and in JavaScript/AJAX then it is highly unlikely Google will see it.
You may have to restructure your architecture to make your content crawlable. That's a big subject. I suggest looking up "progressive enhancement" which is the method I currently think is best.

html5 microdata mixed with other new semantic elements. Is this correct?

I am writing markup for a restaurant review. This is what I’ve got so far:
<article itemscope itemtype="http://data-vocabulary.org/Review">
<img src="" alt="Shatranj Napoli" />
<h3 itemprop="itemreviewed">
<a href="">
<strong>Shatranj Napoli </strong>
<em>Bandra West</em>
</a>
</h3>
<p class="cuisine">Italian & Lucknowi</p>
<p itemprop="summary">Whoa! What a marriage of cuisines! Italian and Lucknowi. And much to my surprise, both are good, though I prefer...</p>
<span itemprop="rating">4.5</span>
<span class="price-rating">3.5</spam>
</article>
Does this look right? Or will this not work at all?
Looks fine to me, as per Google’s documentation.
I don’t think the fact that you’re using the <article> tag will cause any problems, at least as far as the microdata goes — see e.g. http://diveintohtml5.ep.io/extensibility.html#data-model, where <section> is used in the example.