I am working on a website for a client. They have marked up individual reviews that they display on their site with Microdata, but they have not included the corresponding aggregateRating property.
I have informed them that they need to include the aggregateRating propery in order to get Google to display stars in their organic listing. The client responded saying that this is okay, but I must hide any values associated with aggregateRating - (ratingValue, ratingCount) from the users who interact with their website.
I know that Google frowns upon this practice, but I want to know if anybody has had success hiding review Schema.org with CSS? By success I mean Google still displaying stars in organic listing.
There's no need to hide your schema using CSS. Not all schema data has to be shown on the web page. Consider JSON-LD schema, that's all in the head so none of those values are displayed.
HTML schema allows you to markup content that's not visible on the webpage.
From Schema.org:
Sometimes, a web page has information that would be valuable to mark up, but the information can't be marked up because of the way it appears on the page […]
[…]
<meta itemprop="ratingValue" content="4" />
Full code snippet:
<div itemscope itemtype="http://schema.org/Offer">
<span itemprop="name">Blend-O-Matic</span>
<span itemprop="price">$19.95</span>
<div itemprop="reviews" itemscope itemtype="http://schema.org/AggregateRating">
<img src="four-stars.jpg" />
<meta itemprop="ratingValue" content="4" />
<meta itemprop="bestRating" content="5" />
Based on <span itemprop="ratingCount">25</span> user ratings
</div>
</div>
Related
How to enable images to be shown when a link is shared in whatsapp? Like the link above from amprandom.blogspot.com.
OG tags modified as needed. Still does not show images. How to get it work?
You can use the Sharing Debugger to see the information that is used when your website content is shared on Facebook, Messenger and other places. The Batch Invalidator will let you refresh this information for multiple URLs at the same time. Open Graph markup lets you take control over how your website content appears to others.
Reference: https://developers.facebook.com/tools/debug/
Steps:
Add needed og tags ex. og:title, og:image, etc in your website code.
After adding necessary tags, go to Sharing Debugger and enter your website URL there.
Click on Debug. It will show all the data scrapped by it and refreshes them.
Next time you share your website/link, it will scrap metadata added to it.
Edit:
You need to add itemprop to the og:image meta-tag
Ex: change value of url_image to your image/ logo/ favicon url.
<meta property="og:image" itemprop="image" content="url_image">
Thumbnail schema from schema.org inside for WhatsApp
<link itemprop="thumbnailUrl" href="url_image">
<span itemprop="thumbnail" itemscope itemtype="http://schema.org/ImageObject">
<link itemprop="url" href="url_image">
</span>
I am having some difficulty implementing a solution that I found via my research here (the actual accepted answer is not helpful and has been downvoted to Bolivian).
Problem: Facebook doesn't seem to recognize the OpenGraph meta tags that I have added to my Header.
What I know (or think I know): It is my understanding that by adding some appropriate opengraph meta tags, the content, such as YouTube video, should appear in the body of the "post" on Facebook.
What I have tried so far: Referring to the solution linked above, I have tried to implement this method.
In my examples, I'm embedding this video
https://www.youtube.com/v/BQBjVr1iHH4 in the following page
https://www.keithandthegirl.com/vip/bonus/episode/9/40/this-is-40 I
would like Facebook to show the YouTube video whenever anyone shares
my page on Facebook.
Option 1: setting the og:video to https://www.youtube.com/v/YOUTUBECODE
The meta tag will look like
<meta property='og:video' content='https://www.youtube.com/v/BQBjVr1iHH4' />
Further, I have attempted to disable plugins which may conflict with this -- any plugins which appear to add OG meta tags.
On the code side: I have hard-coded the following meta tags in the Header (this will eventually become a PHP function or something, but not until/unless I can make it work on a single post):
<meta property='og:image' content='http://agnarchy.com/wp-content/uploads/2014/11/2014-11-01-22.02.37.jpg' />
<meta property='og:video' content='https://www.youtube.com/v/dt6pPdz5eqg' />
<meta property="og:video:height" content="854" />
<meta property="og:video:width" content="510" />
<meta property="og:type" content="video">
Observed behavior:
All I see is the post's featured image. When I schedule or submit this link to my facebook page, Facebook does not recognize the OpenGraph tags and does not render the embedded video as part of the content of this Facebook post:
Desired behavior:
This is at odds with the suggested method, which if I use the URL provided in that answer, I can see the embedded video player:
I am implementing various meta tags within my site. Many are aimed at social networks such as Facebook and Twitter. To manage these tags easier I have grouped the related tags.
For instance:
<!-- DESCRIPTIONS -->
<meta name="description" content="Page description. No longer than 155 characters." />
<meta itemprop="description" content="This is the page description">
<meta name="twitter:description" content="Page description less than 200 characters">
<meta property="og:description" content="Description Here" />
This will make it much quicker to insert the descriptions for each meta tag.
My question: Is there any reason Open Graph, Schema.org, Twitter Cards, or any other meta tags need to be:
grouped together and/or
be in a specific order?
Of course this assumes the meta tags are in the <head> of my site.
Most documentations don't mention a required or recommended order (Twitter, FB, OG).
According to this source the order matters for the Google+ button. I'm not sure if that is still true.
The order of the tags is not critical. But schema.org markup should be placed on the page itself, not in the head section with meta tags.
I've just read about Google's Rich Snippet and I am planning to apply it on a Classifieds Ads Website.
Is it fine and effective if I use it in a Classifieds Ads Website?
I've asked this because, I've understood from my further readings that It only has effect on Products that can be purchased from the site where it is Posted and, that, that "Product" itemtype (itemtype="http://schema.org/Product") shall not be a PRODUCT LISTING, that can be purchase by contacting and paying the seller offline, or from off the website. In my classifieds ads website, the buyer contacts the seller if he wants to buy the item and they shall agree to meetup. Or when no meetups is possible, the seller sends the item to the buyer after the seller received the price amount from the buyer. And I got another inquiry, can we apply and use this snippet to a website similar to eBay?
The best way to model classified ads, with no explicit details of the products offered, for Google Rich Snippets is using the GoodRelations vocabulary, http://purl.org/goodrelations/ in RDFa syntax.
Simply use the gr:Offering class as shown below:
<div xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:foaf="http://xmlns.com/foaf/0.1/"
xmlns:gr="http://purl.org/goodrelations/v1#"
xmlns:xsd="http://www.w3.org/2001/XMLSchema#"
xml:lang="en" >
<!-- The Classified Ad content -->
<div about="#offering" typeof="gr:Offering">
<div rev="gr:offers" resource="#user1234"></div>
<strong property="gr:name" >Classified ad - headline (e.g. the text in bold)</strong>
<div property="gr:description">Here comes the full text of the classified ad ....
blablabla</div>
<!-- if you have an image, use this pattern -->
<img rel="foaf:depiction" src="http://www.heppnetz.de/rdfa4google/image.jpg" />
<!-- if you know the type of business function (Sell, LeaseOut, Dispose, ProvideService,
attach it like this -->
<div rel="gr:hasBusinessFunction"
resource="http://purl.org/goodrelations/v1#Sell"></div>
<!-- if you can provide the price in a structured form, use this pattern
(needed for Rich Snippets) -->
<div rel="gr:hasPriceSpecification">
<div typeof="gr:UnitPriceSpecification">
<div property="gr:hasCurrency" content="USD" datatype="xsd:string"></div>
<div property="gr:hasCurrencyValue" content="89" datatype="xsd:float"></div>
</div>
</div>
<!-- provide the URI of a deep link to the page -->
<div rel="foaf:page" resource="http://www.heppnetz.de/rdfa4google/tc16.html"></div>
</div>
This validates in the Google Rich Snippets Testing Tool, as you can see here.
For your convenience, I just created a respective recipe in the GoodRelations Cookbook:
http://wiki.goodrelations-vocabulary.org/Cookbook/Classifieds
Hope that helps!
We have a Wordpress site that uses a plugin to place Open Graph tags on our content. We receive the following error when using the FB linter:
Response Code: 200
Fetched URL: facecrooks[dot]com/
Canonical URL: facecrooks[dot]com/
Errors That Must Be Fixed
Body Meta: You have meta tags outside of your head. This is either because your head was malformed and they fell lower in the parse tree, or you accidentally put your Open Graph tags in the wrong place. Either way you need to fix it before the tags are usable.
We have not been able to locate any meta tags outside of the header.
Also, when we post an item from our website to our Facebook page a random image is selected instead of the one defined in the OG. Usually the image selected is a 125x125 ad from our right column.
You can verify that the Open Graph Tags are active on the site by visiting http://facecrooks.com and then view source.
Any idea on how to fix these errors would be greatly appreciated!
Maybe facebook's linter doesn't like the HTML div tags in the head section...
<noscript>
<div style="display:none;">
<img src="//pixel.quantserve.com/pixel/p-74ksBYx3WjrXU.gif" border="0" height="1" width="1" alt="Quantcast"/>
</div>
</noscript>