This page: http://viralsport.se/4-Crazy-mal-av-Svenska-landslaget-mot-Island.html for example.
In header i have this code:
<meta property="og:site_name" content="Viralsport" />
<meta property="og:title" content="Crazy mål av Svenska landslaget mot Island" />
<meta property="og:description" content="Ett av de märkligaste målen Svenska landslaget har gjort" />
<meta property="og:url" content="http://www.viralsport.se/4-Crazy-mal-av-Svenska-landslaget-mot-Island.html" />
<meta property="og:image" content="http://gfx2.aftonbladet-cdn.se/image/10714609/485/normal/483e194e3fdfc/Ska+inte+till+aik" />
<link rel="image_src" href="http://gfx2.aftonbladet-cdn.se/image/10714609/485/normal/483e194e3fdfc/Ska+inte+till+aik" />
When I share on Facebook as it selects a completely different picture and no text at all.
What have I done wrong?
Thanks in advance
I refreshed the info in the debugger, now the correct image shows up. Just enter the URL in the debugger and you will see a button called "Fetch new scrape information" next time it does not use the correct data: https://developers.facebook.com/tools/debug/og/object/
Also, make sure the og-image follows the specification about size and aspect ratio: https://developers.facebook.com/docs/opengraph/howtos/maximizing-distribution-media-content#images
Related
I use the usual Facebook tags on my blog to make sure that a title, image and description are displayed when sharing pages. I've been using this for a long time without paying much attention to it but I recently discovered that images and sometimes descriptions were not displayed anymore.
Here is a code example:
<meta property="og:url" content="https://www.laurentwillen.be/gadgets/test-avis-projecteurs/xiaomi-wanbo-x1-test-avis/" />
<meta property="og:type" content="article" />
<meta property="og:title" content="Xiaomi Wanbo X1 : test / avis (avec code promo -30%)" />
<meta property="og:description" content="J'ai testé le Xiaomi Wanbo X1 sur de nombreux critères objectifs (qualité image, son, compatibilité netflix, ...) et je l'ai comparé aux autres projecteurs." />
<meta property="og:image" content="https://images.laurentwillen.be/sites/21/2021/07/wanbo-x1-test-avis-review-opiniones-recensione-erfahrung-bewertung-top.jpg" />
<meta property="og:image:width" content="1500"/>
<meta property="og:image:height" content="468"/>
When I test this page in the Facebook debugger, outside the fb:app_id I don't get any error message but I can't see the image:
[![enter image description here][1]][1]
For this second example, the image is not working but the description also never shows up (while tags are the same)
<meta property="og:title" content="Aidez-moi (klintistwood) à gagner le Robot Aspirateur Lefant M210s" />
<meta property="og:description" content="J'aimerais gagner le robot aspirateur Lefant M210s et vous pouvez m'aider sans devoir faire un don d'organe." />
<meta property="og:url" content="https://contest.laurentwillen.be/?c=3&p=8145ed4714f0159fc801d41037d53903" />
<meta property="og:type" content="article" />
<meta property="og:image:width" content="1500"/>
<meta property="og:image:height" content="468"/>
<meta property="og:image" content="https://10jtal.be/cms/wp-content/uploads/sites/21/2021/07/lefant-m210s-test-review-avis-recensione-prueba-opinion-beoordeling-28-scaled.jpg" />
I've read multiple posts about this, in some cases it was just a caching issue but it doesn't seem to be my case because images never show up and sometimes descriptions don't show up.
I have also tried to use og:image:secure but it didn't help.
Copy/pasting the image link directly to Facebook also doesn't work but there are no restrictions on my server that could explain this.
Any idea?
Thanks
[1]: https://i.stack.imgur.com/LzRe2.png
My site contain all the meta tags required to share on facebook. image, url, site_name, app_id, title , description etc. all the necessary things.
But when somebody share the page, it doesnot show full preview of the image on some phone. On web and some other phone its working fine.
I tried everything. I read full documentation of facebook about web sharing. I tried recommended size of 1200x630 pixel, also the minimum size of 600x315 pixel. Issue is still there. Setting og:image:width and height manually don't really make any change also.
``` <meta property="fb:app_id" content="<<PAGE ID>>" />
<meta property="og:site_name" content="<<Site Name>>" />
<meta property="og:url" content="<<URL>>" />
<meta property="og:type" content="article" />
<meta property="og:title" content="Some title" />
<meta property="og:description" content="Play now" />
<meta property="og:image" content="<<image url>>" />
```
This is driving me mental! I have page which has a share button on it, for arguments sake I have hard coded the image name and title in the controller as shown here
public ActionResult ThankYou()
{
var model = new LabCombination
{
ImageCombination = "danone_ultimate_coconut_vanilla.png",
ImageTitle = "danone_ultimate_coconut_vanilla"
};
return View(model);
}
In my view I do this
<meta property="og:title" content="Check out the flavour I just made! #Model.ImageTitle" />
<meta property="og:description" content="Check out the flavour I have just created!" />
<meta property="og:image" content="http://danone.staging-eurorscg.com.au/Content/Images/FlavourLab/CombinationSmall/#Model.ImageCombination" />
<meta property="og:url" content="http://danone.staging-eurorscg.com.au/thank-you" />
which renders as follows
<meta property="og:title" content="Check out the flavour I just made! danone_ultimate_coconut_vanilla" />
<meta property="og:description" content="Check out the flavour I have just created!" />
<meta property="og:image" content="http://danone.staging-eurorscg.com.au/Content/Images/FlavourLab/CombinationSmall/danone_ultimate_coconut_vanilla.png" />
<meta property="og:url" content="http://danone.staging-eurorscg.com.au/thank-you" />
When I do the facebook scraper I see this
yet when I go to the page a press share I see this
Why is facebook not refreshing! I have cleared the cache in my browser!
You can scrap the page here
https://developers.facebook.com/tools/debug/og/object/
with the following url
http://danone.staging-eurorscg.com.au/thank-you
Any help would be appreciated
** Update ** As I set the mete data dynamically, it caches the original information as shown here, what you see in the middle of the screen i.e the image should be also displayed in the shared dialog
My Meta data looks like this
<meta property="og:title" content="Check out the flavour I just made! Strawberry & Honey" />
<meta property="og:description" content="Check out the flavour I have just created!" />
<meta property="og:image" content="http://danone.staging-eurorscg.com.au/Content/Images/FlavourLab/CombinationSmall/danone_ultimate_strawberry_honey.png" />
<meta property="og:url" content="http://danone.staging-eurorscg.com.au/thank-you" />
As you can see it has all the correct meta data.
That is because your share button is trying to share the url http://danone.staging-eurorscg.com.au/flavour-lab and not http://danone.staging-eurorscg.com.au/thank-you
Add the following og meta tag, with the current epoch time:
<meta property="og:updated_time" content="1431713584" />
You can force Facebook to update it's cache using debugger tool. It used to be called url linter.
https://developers.facebook.com/tools/debug/
Hi I'm having trouble in showing the image when sharing a link thru Facebook.
Here are my meta tags:
<meta property="og:image" content="http://stmaws.s3.amazonaws.com/thumbs/<?php echo $meta_thumbnail; ?>.jpg" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="300" />
<meta property="og:image:height" content="300" />
<meta property="og:title" content="Check out what I made on Muserk.com" />
<meta property="og:site_name" content="Check out what I made on Muserk.com" />
<meta property="og:description" content="Muserk.com gives you the ability to legally add music to your videos and share them with the world!" />
<meta property="og:url" content="http://<?php echo $_SERVER['SERVER_NAME'] . $_SERVER['REQUEST_URI']; ?>" />
$meta_thumbnail could be something like this: http://stmaws.s3.amazonaws.com/thumbs/53135cb64f26109a448b4ba6.jpg
My thumbnail image is shared to public so I don't think the problem has something to do with privacy/security.
Image size is 32px of width and 26px of height.
Facebook debugger: https://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Fmuserk.sourcepadstage.com%2Fvideo%2Findex%2F5314f1ba4f261098448b519b
Output from Facebook Debugger:
Scrape Information
Response Code 200
Fetched URL http://muserk.sourcepadstage.com/video/index/5314f1ba4f261098448b519b
Canonical URL http://muserk.sourcepadstage.com/video/index/5314f1ba4f261098448b519b
Object Properties
og:url http://muserk.sourcepadstage.com/video/index/5314f1ba4f261098448b519b
og:type website
og:title Check out what I made on Muserk.com
og:image <IMAGE HAS BEEN DISPLAYED HERE>
og:description Muserk.com gives you the ability to legally add music to your videos and share them with the world!
og:site_name Check out what I made on Muserk.com
og:updated_time 1393881547
Raw Open Graph Document Information
Meta Tag <meta property="og:image" content="http://stmaws.s3.amazonaws.com/thumbs/53135cb64f26109a448b4ba6.jpg" />
Meta Tag <meta property="og:image:type" content="image/jpeg" />
Meta Tag <meta property="og:image:width" content="300" />
Meta Tag <meta property="og:image:height" content="300" />
Meta Tag <meta property="og:title" content="Check out what I made on Muserk.com" />
Meta Tag <meta property="og:site_name" content="Check out what I made on Muserk.com" />
Meta Tag <meta property="og:description" content="Muserk.com gives you the ability to legally add music to your videos and share them with the world!" />
Meta Tag <meta property="og:url" content="http://muserk.sourcepadstage.com/video/index/5314f1ba4f261098448b519b" />
URLs
Graph API https://graph.facebook.com/642413225848487
Scraped URL See exactly what our scraper sees for your URL
EDITS:
Hi I tried to continue sharing the link and it was displayed:
http://d.pr/i/mu2T
But I wonder why it is not showing while sharing the link: http://d.pr/i/9j3l
Your image is way too small, these are the recommendations:
Minimum 600x315px
Recommended: 1200x630px
Ratio should be 1.91:1
Also, i get an error when i try your Debugger link: "Error parsing input URL, no data was scraped."
Make sure all data is public so Facebook can scrape it.
I'm trying to implement a basic Facebook like functionality to a site. I've triple-checked & more the meta tags, but the og:description -text doesn't show up in the FB news feed. The title and the image work fine.
Here's the code:
<meta property="og:type" content="article" />
<meta property="og:title" content="SOG – VEITSIÄ VIIDAKOSTA ARKITÖIHIN" />
<meta property="og:url" content="http://www.finnprotec.fi/webshop/news/2" />
<meta property="og:description" content="Kunhan kirjoitan vaan jotain tekstia nyt." />
<meta property="og:site_name" content="Finnprotec.fi" />
<meta property="og:image" content="http://www.finnprotec.fi/webshop/kuvat/kuva517a8539a91f1.jpg" />
<meta property="fb:admins" content="6700009220" />
<meta property="fb:app_id" content="348235131938688" />
When I click on the link on the page, the description shows up nicely under the title:
But when I click on the send button, this shows up on my FB feed:
This is what I'm trying to get:
The url of the current page is: http://www.finnprotec.fi/webshop/news/2
I have tried to clear facebook's cache with the facebook linter, but that hasn't helped.
I just ran into this. I found that the description is actually there - you have to hover over the image to see it. It shows it in the format you want sometimes, depending on the size of the post where you're viewing it.
For example, after I've liked my post, I don't see the description in the post shown when I click on my name and view my wall (where the posts are smaller).
But I do see it when I just go to facebook.com and I view the larger version shown in my stream.
I realize this isn't really answering the question; I couldn't find a way to get it to show the description consistently.
add this two lines to your code after og:image
<meta property="og:image:width" content="400" />
<meta property="og:image:height" content="300" />
it must work