This is a really basic (potentially very dumb) question but I can't find an answer scouring the Facebook developer site.
Say your website's main page is www.example.com. And you have a subpage on the site at www.example.com/specific-page.php
On specific-page.php, I'd like to have two buttons next to each other:
A Facebook Like button that when clicked, likes my main domain (www.example.com).
A Facebook Share button that when clicked, shares specific-page.php
Obviously I'd have OG meta tags on specific-page.php (like those below) but both the Share and Like buttons are using that info, so it seems you can't have the Like be attributed to the primary domain and the Share to the specific page's info.
In other words, if the Like button count on www.example.com's homepage showed 143 likes and then someone on specific-page.php clicked Like, I'd want that homepage number to now be 144.
<meta property="og:image"content="http://www.example.com/images/facebookthumb.png" />
<meta property="og:title" content="Example" />
<meta property="og:url" content="http://www.example.com/specific-page.php" />
<meta property="og:site_name" content="Example"/>
<meta property="og:type" content="website"/>
<meta property="og:description" content="Example.com is an exemplary site." />
So I guess my ultimate question is: Is there some way to specify separate OG tags for Like vs. Share?
No, there is no way. Earlier, there was an option to use the FB.ui feed dialog for sharing with custom parameters: https://developers.facebook.com/docs/sharing/reference/feed-dialog
As of April 18, 2017, the following parameters are no longer supported
by Graph API versions 2.9 and higher. For versions 2.8 and lower, the
parameters will continue working until July 17, 2017.
I have problems with my domain and Facebook Open Graph Debugger. It returns a Response Code 0 for this link which is completely accesible.
My HTML source code is valid, I tried hosting the same page in another domain and then Facebook Open Graph Debugger can read the content fine.
Any ideas about this problem? I was using CloudFlare in this domain, but I disabled it 30 hours ago and the problem is still there.
If you scroll down to the bottom of the page and click the "See exactly what our scraper sees for your URL" you'll get an empty page. This suggest that yes, the Facebook scraper is not able to view your page for some reason as you've observed. This is the heart of the problem, and you can safely ignore the other erroneous and inaccurate messages that Facebook debugger displays, including:
Inferred Property The 'og:image' property should be explicitly
provided, even if a value can be inferred from other tags.
Inferred
Property The 'og:url' property should be explicitly provided, even if
a value can be inferred from other tags.
Inferred Property The
'og:title' property should be explicitly provided, even if a value
can be inferred from other tags.
Share App ID Missing The 'fb:app_id'
property should be explicitly provided, Specify the app ID so that
stories shared to Facebook will be properly attributed to the app.
Alternatively, app_id can be set in url when open the share dialog.
After looking at your code, it seems that all of your Facebook meta tags are being set correctly.
If you view the link "Open Graph Object Debugger" at the bottom of the page, you will get much more helpful information:
The following will be treated as a redirect by the crawler:
A HTTP redirect
A <link rel="canonical" href=".." /> tag
A <meta property="og:url" content=".." /> tag
The final URL, which we tried to extract metadata from is highlighted in bold
I'm guessing that the Facebook bot is getting confused by one or the other of the following tags being added by the Yoast SEO plugin:
<meta name="robots" content="noodp"/>
<link rel="canonical" href="http://eldoradoexperience.org/chapter/cosmos/" />
I'm not familiar with Yoast SEO plugin, but would suggest either tweaking the settings to remove the <link rel="..."> tag or by removing Yoast entirely and adding the following tags to your page manually:
<meta property="og:locale" content="en_US" />
<meta property="og:type" content="article" />
<meta property="og:title" content="Cosmos. Reading the celestial ceiling" />
<meta property="og:description" content="I decided to switch off all GPS electronic devices. I step on the deck and look at my surroundings, in order to understand the workings of the stars." />
<meta property="og:url" content="http://eldoradoexperience.org/chapter/cosmos/" />
<meta property="og:site_name" content="Eldorado experience" />
<meta property="article:author" content="https://www.facebook.com/NarinanVessel" />
<meta property="og:image" content="http://eldoradoexperience.org/wp-content/uploads/2016/04/dorado-33_2.jpg" />
While sharing the following URL on LinkedIn I found that LinkedIn is not taking title and description so thought to run debug tool so that it will correct this issue but it's not. Also, like feature is not working for this URL.
https://swertresresult.ph/
And after running debug, it is showing error
Sorry, something went wrong. We're working on getting this fixed as soon as we can. Go Back
This issue is only with this URL.. Similar URL is this (mybridaldresses.pk/bridal-mehndi-dresses-pakistani-designers-2018/) which is working perfectly.
Is there any other way to solve this issue?
While sharing on LinkedIn, you can determine which title, description and image will appear. To achieve this, your pages must contain some meta tags.
The following tags that must exist on your page.
<meta property='og:title' content='Title of the page"/>
<meta property='og:image' content='http://yourdomain.com/test.jpg"/>
<meta property='og:description' content='Description of the page"/>
<meta property='og:url' content='http://www.example.com/URL of the article"/>
Also, there are some limitations for images. Maximum image size is allowed is 1 MB. And smaller images from 80x150px will not be accepted.
For one of my websites I am using Open Graph to enrich posts shared from my website. But LinkedIn is not picking the image specified in og:image. The image is modified for the LinkedIn bot to be 200px X 200px by a simple PHP script.
I found some experiencing a similar problem (Linkedin not getting thumbnail image) but this problem is not yet solved.
I know it's old but this helped.
Linkedin caches link preview content for 7 days. You have to do the following to clear Linkedin Preview cache:
Step 1: Visit https://www.linkedin.com/post-inspector/inspect/
Step 2: Enter your url and click on Inspect, You will see the updated preview image
Step 3: Now try sharing your url on Linkedin
You might need to check linkedin post cache and refresh it for a specific link.
https://www.linkedin.com/post-inspector/
This question is a bit old but I ran into the same situation and got it solved so I just post my solution( or my understanding how it work) for others have the same problem.
(Thank you for #Justin Kominar, his answer in this question helps me.)
Make sure you have prefix="og: http://ogp.me/ns# in your tag, when you have iframe(s), make sure which page is calling the share function.
Make sure you set all four <meta> tags in you site and give the correct type to <meta property="og:type> (please go to ogp.me for more information)
Make sure you pass the correct url(the one you want to share, eg.https://news.com/this_news) to <meta property="og:url> especially when you use dynamic url
In the page you pass to og:url ( it is very important to understand linkedin will go to this page to look for the information not the page you call the share function, most of the time they are the same but sometimes that is not the case), you need to do step 1 and 2, set <meta og:image> AND MAKE SURE THE IMAGE LINK IS VALID AND THE IMAGE DOES EXIST
Hope it will help.
I faced with wrong image choosing by LinkedIn in my WordPress site. I found the problem by discovering URL by LinkedIn post inspector and saw that oEmbed tag was used dispite og:image tag is existed:
Does your code look like this?
<html prefix="og: http://ogp.me/ns#">
<head>
<meta property="og:title" content="My Shared Article Title" />
<meta property="og:description" content="Description of shared article" />
<meta property="og:url" content="http://example.com/my_article.html" />
<meta property="og:image" content="http://example.com/foo.jpg" />
</head>
<body>
…
</body>
</html>
Also, check the documentation here:
https://developer.linkedin.com/docs/share-on-linkedin
Also, check your URL with Facebook Linter (it works with all OG tags):
https://developers.facebook.com/tools/debug/
Adding a garbage parameter at the end of my link, helped me force linkedin to get og:image again.
I found my solution on this post
Per #checkTek's comment, LinkedIn does not support .webp images for the og:image property.
Try to 1000x425 image. It works for me.
This answer is for the people who tried all the methods described in the above answers and still got no luck !!
I had this scenario and I fixed it by renaming the og:image.
I believe image with long name can trick the linkdin to prevent the image from scraping.
before the tag was
<meta property="og:image" name="image" content="images/meta-this-is-a-very-long-name.jpg">
I fixed this issue by renaming it to a smaller name.
<meta property="og:image" name="image" content="images/meta-image.jpg">
voila.. it worked !!
Warning - i'm using JavaScript
Check step
First of all, you have to check if your website/blog have all the meta tags correctly puted on tag of your HTML document. You can do this by just puting your website link on
https://developers.facebook.com/tools/debug and debugging.
But if you just get the wrong image no matter what on Linkedin post inspector but not on Facebook debugger (both use open graph tags) the problem is the Linkedin. So if this you can continue here.
My problem and the solution
I have my images on AWS, so i use 2 different links, one is for the service, the other is the link of the image.
The problem with Linkedin, is that he cannot read two URLs. So you have to encode properly.
My service is somenthing like this
https://d1muf25xaso8hp.cloudfront.net/[IMAGE_URL]?options
Now, you gonna see an example. I have a function that just get this two together. Take a look:
Example:
// The service -
https://d1muf25xaso8hp.cloudfront.net/[IMAGE_URL]?options
// Function Input -
https://s3.amazonaws.com/appforest_uf/imageID/200x200.png
// Function Output -
https://d1muf25xaso8hp.cloudfront.net/https%3A%2F%2Fs3.amazonaws.com%2Fappforest_uf%2Ff1643682361025x516549218825449500%2F200x200.png?w=&h=&auto=compress&dpr=1&fit=max
The function
const resizeS3Image = (s3_url) => {
let s3_clean_url = s3_url;
s3_clean_url = s3_clean_url.replace(/\//g, '%2F').replace(/\:/, '%3A');
const cloudFrontCompressedImage = `https://d1muf25xaso8hp.cloudfront.net/${s3_clean_url}?w=&h=&auto=compress&dpr=1&fit=max`;
return cloudFrontCompressedImage;
};
Things you may have notice
The second URL (the image) have some things replaced, like the slash ('/') and colon (':'), for the equivalent code on URL encode.
2 - How i did it ? using regex pattern and the .replace native JS constructor.
Tools and references that i used
https://www.w3schools.com/tags/ref_urlencode.asp
Remind to
When you're debuggin again your website on the Linkedin Post inspector, remind to add after the URL somenthing after '?' like https://yourwebsite/post/what-is-lorem-impsum?aaaa=912093090
That way, you gonna update the Linkedin SEO Cache.
I was using the LinkedIn Post Inspector and it wasn't finding my image. However, Facebook Debugger was showing it. Both platforms use Open Graph (OG).
In my case, the issue that was causing this to happen were spaces in the original image name (replaced in URL with +)).
This worked:
https://images.mywebsite.com/abc/name_of_image.png?auto=compress,format&rect=0,0,3600,1890&w=1200&h=630
This was failing:
https://images.mywebsite.com/abc/Name+of+Image+-+Test+-+4.png?auto=compress,format&rect=0,0,3600,1890&w=1200&h=630
For me the problem was the image size. Once I increased the size from 300px wide to 1200px wide it worked.
For LinkedIn:
The maximum file size allowed is 5MB.
The minimum image dimension should be 1200px X 627px.
https://dev.to/samuelorobosa/how-to-handle-linkedin-and-twitter-link-previews-23eg
However, the post inspector was finding smaller images around 750MB. So the true value is somewhere between 300:1200
p.s. gifs work on linkedin but are a single still frame on twitter
<meta property="og:url" content="http://localhost:8821/EventRegister.aspx" />
<meta property="og:title" content="Welcome and Share Test" />
<meta property="og:description" content="Hope it worked!!!!!!!" />
I am developing an asp.net project and wanted to put a facebook share button in it. I wrote that code in head /head part and then started the debug mode and tried the link:
https://www.facebook.com/sharer/sharer.php?u=http://localhost:8821/EventRegister.aspx
But all I got is a empty share page with no title or description only just the localhost link in description.
How can I make it work? I want customizable title, image, description like in the above code. I have been looking for it for 2 days non-stop.
Thanks...
--
UPDATE:
<a onClick="window.open('http://www.facebook.com/sharer.php?s=100&p[title]=sfgsfgsfg&p[summary]=sdgsdgsdg&p[url]=http://localhost:8821/EventRegister.aspx','sharer','toolbar=0,status=0,width=548,height=325');" href="javascript: void(0)">Click to share.</a>
did this and still same result :(
Yes it is working after I created a free host on myasp.net... :) Do not debug any facebook code on localhost as it won't work because facebook cannot access to your local machine unless you have some workarounds.