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

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.

Related

Track image clicks with links on Google Tag Manager

I'm trying to get a thing work for a week and no success. Really need some tips.
I have an Wordpress website built with Elementor.
This site has 10 different images with different links (they are links to stores that sell my product).
I'm trying to do something automatic in GTM that when I click on one of the stores (image with link), it shows me the variable - that is, the name of the store - that I added as an attribute in Elementor.
My question is whether it's possible to make this variable value show automatically so I don't have to create 10 different tags. I say this because I have 5 more sites in the same type of construction that I imagine I will have to do manually.
I followed this example and it almost worked - : https://www.youtube.com/watch?v=MUyJeRDKt0kThe problem is that he has a class naming, but I don't. I have only link attribute.
Something like this:
Product > Sells in Walgreens, Walmart, Costco, etc .
Attribute name and value:clickstore - wallgreensclickstore - Walmartetc.
Why I'm trying to do that? To mark as a conversion in GA4.
Any tips?Thanks a lot!
#BNazaruk
please se the image of the html
The tag fired, but doesn't populate the values automaticcaly!
#BNazaruk, sorry about the delay.
Please see below :)
That's an example with 2 stores.
Thanks a lot for the support!
<div class="elementor-element elementor-element-6511396 e-container--column e-container" data-id="6511396" data-element_type="container"> <div class="elementor-element elementor-element-4ea1df3 elementor-widget elementor-widget-image" data-id="4ea1df3" data-element_type="widget" cliquefarma="Store1" data-widget_type="image.default">
<div class="elementor-widget-container">
<div class="elementor-image">
<a href="link for store 1" target="_blank" rel="nofollow noopener" cliquefarma1="Store1">
<img decoding="async" width="220" height="157" src="storeimage1.jpg" class="attachment-large size-large" alt="" loading="lazy" /> </a>
</div>
</div>
</div>
</div><div class="elementor-element elementor-element-715f6ca e-container--column e-container" data-id="715f6ca" data-element_type="container"> <div class="elementor-element elementor-element-92cd80b elementor-widget elementor-widget-image" data-id="92cd80b" data-element_type="widget" id="cfarmacia1" cliquefarma="Store 2" data-widget_type="image.default">
<div class="elementor-widget-container">
<div class="elementor-image">
<a href="store 2 link" target="_blank" rel="nofollow noopener" cliquefarma1="Store 2">
<img decoding="async" width="220" height="157" src="storeimage2.jpg" class="attachment-large size-large" alt="" loading="lazy" /> </a>
</div>
</div>
</div>
</div>

How to bind razor variable to vue attribute?

I am trying bind a razor variable to html attribute with vuejs.
The variable which i must use is "#culture". It is a string variable which gives me current culture information.
My code is:
<div class="dropdown-product-item" v-for="(item, index) in card.items">
<span class="dropdown-product-remove"><i class="icon-cross" v-bind:data-id="item.Id" v-on:click="removeFromCard"></i></span>
<a class="dropdown-product-thumb" v-bind:href="/#{Html.Raw(culture);}/item.Link">
<img v-bind:src="item.ResimUrl" v-bind:alt="item.Ad">
</a>
<div class="dropdown-product-info">
<a class="dropdown-product-title" v-bind:href="/#{Html.Raw(culture);}/item.Link">{{item.Ad}}</a>
<span class="dropdown-product-details" v-if="!item.IndirimliFiyat">{{pieces[index]}} x {{item.Fiyat.PriceString}}</span>
<span class="dropdown-product-details" v-else>{{pieces[index]}} x {{item.IndirimliFiyat.PriceString}}</span>
</div>
This code doesn't work. I only see white screen.
How to I do this? Could you help me?

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.

Remove data-iconshadow="false" from JQM Collapsible title

I have been trying to do this for a while with CSS and also data attributes but it is driving me up the wall. It's easy to remove data-iconshadow from buttons, but from collapsibles, not so.
In the Developer Console I can see JQM is applying "data-iconshadow='true'" even after I told it not to using this code (in several places):
<div data-role="collapsible-set" data-iconshadow="false">
<div data-role="collapsible" data-theme="f" data-collapsed-icon="baby" class="ui-icon-nodisc" data-iconshadow="false" data-expanded-icon="arrow-u">
<h2 data-iconshadow="false">0-12 Months</h2>
**insert content here**
</div>
</div>
Yet it still generates this code:
<span class="ui-btn-inner"><span class="ui-btn-text">0-12 Months<span class="ui-collapsible-heading-status"> click to collapse contents</span></span><span class="ui-icon ui-icon-shadow ui-icon-arrow-u"> </span></span>
Yeah it is still writing the data-iconshadow to be true. And I'm not even sure how to target injected attributes with CSS so I am not having much luck with that either. If someone could shed some light on the subject, I would be most grateful.
Working example: http://jsfiddle.net/Gajotres/2NCjb/
HTML:
<div data-role="collapsible-set">
<div data-role="collapsible" data-theme="f" data-collapsed-icon="baby" class="ui-icon-nodisc" data-iconshadow="false" data-expanded-icon="arrow-u" id="custom-collapsible">
<h2 data-iconshadow="false">0-12 Months</h2>
**insert content here**
</div>
</div>
CSS:
#custom-collapsible h2 .ui-btn:after {
background: transparent !important;
}

Div Class order Problems

I am working on a social media network, and in my posts, I am trying to add the glyphicons found in Bootstrap 3 to the posts. Now, I have managed to the the icons on the same line as the username, but I can't work out how to get the username first, and then the glyphicons. Below is my code:
<div class="media well single-post" id="post-<?php echo $post['post_id'];?>">
<div class="avatar large pull-left">
<?php if ($this->profile_type === 'page' || $post['post_wall_profile_type'] === 'page'):?>
<a href="<?php echo $this->baseUrl()?>/<?php echo $post['post_wall_name'];?>">
<img src="<?php echo $this->GetStorageUrl('avatar') . $post['post_wall_avatar'];?>">
</a>
<?php elseif ($this->profile_type === 'feed' && $post['post_wall_profile_type'] === 'group'):?>
<a href="<?php echo $this->baseUrl()?>/<?php echo $post['post_wall_name'];?>">
<img src="<?php echo $this->GetStorageUrl('avatar') . $post['post_wall_avatar'];?>">
</a>
<?php else:?>
<div class="pull-right"><?php if (isset($post['author_meta']['badges'])):?>
<div class="network-badges vertical">
<?php echo $this->partial('/partial/badges.phtml', array('badges' => $post['author_meta']['badges']));?>
</div>
<?php endif;?><div class="pull-left"><a href="<?php echo $this->baseUrl()?>/<?php echo $post['user_name'];?>"></div></div>
<div class="pull-left"><img src="<?php echo $this->GetStorageUrl('avatar') . $post['user_avatar'];?>">
</a></div>
<?php endif;?>
</div>
Here is what it currently looks like: http://www.startrekrisa.com/Picture1.png
I know it's gonna be a simple fix, but I cannot work out how to do it.
Thanks in advance
[Edit] See this jsfiddle based on the fixed markup below and the /partial/badges.phtml code you gave in a comment; obviously your global css is not there, but you can see it properly puts the avatar left and the glyphicons to the right of it [/Edit]
The HTML you generate with that piece of code doesn't seem quite right, and considering your question only relates to html/css, it would have been better to strip your code sample down to a piece of html+css, without the php logic.
From what I can see, your question directlly concern the else part of your main logic, when the inner if is true. In that case I believe your code will generate
<div class="media well single-post" id="post-1234">
<div class="avatar large pull-left">
<div class="pull-right">
<div class="network-badges vertical">
<!-- content of /partial/badges.phtml with the user bages -->
</div>
<div class="pull-left"><a href="http://example.org/users/username"></div>
</div>
<div class="pull-left"><img src="http://example.org/avatars/username">
</a>
</div>
</div>
You can see here you have html problems:
your pull-left div is closed before the link inside is closed; the link inside is closed further on
you have a mismatch between open and close tags for your div
I believe the html you'd want would be more like
<div class="media well single-post" id="post-1234">
<div class="avatar large pull-left">
<div class="pull-right">
<div class="network-badges vertical">
<!-- content of /partial/badges.phtml with the user bages -->
</div>
</div>
<div class="pull-left">
<a href="http://example.org/users/username">
<img src="http://example.org/avatars/username">
</a>
</div>
</div>
</div>
Mixing php logic with your html like that is not terrific and will lead you to more similar problems where you end up not generating the markup you imagined.
P.S. It usually a good practice when working on the interface to first work without any logic behind and just static data, to ensure you get the markup you want and need, and then only merge this with your logic (but it's still better to have your logic separated from the ui though)

Resources