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>
Related
The fb:pages tag on the url doesn't contain this page's id. The url has
fb:pages tag but they don't have this page's id. Please work with your
developers / webmaster to add this tag to your website.
On a Wordpress site, using a child theme. I copied the header.php file from the parent and uploaded it to the child theme, and placed the following code within the tags in the header.php file:
<meta property="fb:pages" content="#############" />
<meta property="og:type" content="website" />
I have troubleshooted this issue in all the recommended ways, including clearing my browser and Wordpress cache, and still continue to get this error. What am I doing wrong?
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>
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 have an blog with related posts image in the top of it. I was waiting for something to fix it since they launch it, but didn't find anything yet so I'm asking for help with it.
The question is. When someone share an post with +1 button, it get the first image of the URL, which usually is one of the featured posts thumbnail.
In Facebook Share I got an plugin that get the 'featured image', but as far I researched, didn't find anyway to make it possible with G+.
So, one of the solutions I considered is making the "Featured post thumbnails" div 'hidden' to G+ button. Is it possible? Or make something similar?
You need to specify the +Snippet values. In the case where a post has no image make sure you keep the image definition but use the blog logo instead.
<body itemscope itemtype="http://schema.org/Product">
<h1 itemprop="name">Shiny Trinket</h1>
<img itemprop="image" src="image-url"></img>
<p itemprop="description">Shiny trinkets are shiny.</p>
</body>
In addition to Abraham's way, you can specify the og: meta data tags in the <head> section of your blog posts. See http://ogp.me for more information about the og: meta tags. The one you need is <og:image />.
IIRC, Wordpress has plugins that allow you to specify og tags.
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>