Some Specific URLs are not Debug at LinkedIn - linkedin

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.

Related

LinkedIn share article throws something went wrong exception

Recently we are facing issues with sharing an article from LinkedIn through our website. The following is the webpage having LinkedIn button at the bottom.
https://www.perpetual.com.au/insights/so-far-so-good-as-the-recovery-rally-continues
When user clicks on this button, a popup window will be displayed with LinkedIn login page. Providing the userid and password throws an exception "Something went wrong".
enter image description here
This has been working for long time and we are recently facing this issue. There is some other article(url given below) is working fine.
https://www.perpetual.com.au/insights/equity-market-rally-set-to-boost-income
We are unable to find the root cause of the issue. This issue has happened some 2 months ago and it was resolved automatically. Again issue occurred once again recently.
Appreciate your help in finding the root cause.
We are receiving following error in console
Error while processing route: inshare.index Ember Data Request GET /voyager/api/contentcreation/urlPreview [inshare-common/routes/index] Error: Ember Data Request GET /voyager/api/contentcreation/urlPreview [inshare-common/routes/index]
at https://static-exp1.licdn.com/sc/h/6jo0t9xz6vly9fmfoukgr7muj:189:561
at b (https://static-exp1.licdn.com/sc/h/1bncnki27iq14axs5xmo7o2nr:7153:12)
at g (https://static-exp1.licdn.com/sc/h/1bncnki27iq14axs5xmo7o2nr:7152:3)
at p (https://static-exp1.licdn.com/sc/h/1bncnki27iq14axs5xmo7o2nr:7139:1)
at invokeWithOnError (https://static-exp1.licdn.com/sc/h/1bncnki27iq14axs5xmo7o2nr:6009:199)
at d.flush (https://static-exp1.licdn.com/sc/h/1bncnki27iq14axs5xmo7o2nr:5993:20)
at p.flush (https://static-exp1.licdn.com/sc/h/1bncnki27iq14axs5xmo7o2nr:6021:52)
at B._end (https://static-exp1.licdn.com/sc/h/1bncnki27iq14axs5xmo7o2nr:6122:9)
at B._boundAutorunEnd (https://static-exp1.licdn.com/sc/h/1bncnki27iq14axs5xmo7o2nr:6059:6)
Try updating your LinkedIn share to use the updated url as below:
https://www.linkedin.com/shareArticle?mini=true&url=https://www.perpetual.com.au/insights/equity-market-rally-set-to-boost-income
Also make sure you have the below meta tags defined for your page
<meta property='og:title' content='Title of the article'/>
<meta property='og:image' content='images/image.png'/>
<meta property='og:description' content='Description '/>
<meta property='og:url' content='https://www.articleURL' />
We just noticed ours was broken, and I got it working by replacing an & between query arguments with a simple &

Is there any way to add title and description while sharing something using linkedin share api?

i'm using linkedin share api to share a post on linkedin, but the problem is i'm not able to add title and description on it.
I using the following API :-
https://www.linkedin.com/sharing/share-offsite/?url={url}&title={}&description={}
The onClick function to be called is defined below.
const shareViaLinkedin = () => {
window.open(
`https://www.linkedin.com/sharing/share-offsite/?url=${groupToShare}&title=${title}&description=${descrption}`,
'_blank',
'width=700, height=500, left=700, top=280'
)
}
title and description aren't working
Even though i've tried using OG meta tags for sharing.
As mentioned in https://www.linkedin.com/help/linkedin/answer/46687/making-your-website-shareable-on-linkedin?lang=en
<meta property='og:title' content='Title of the article'/>
<meta property='og:image' content='//media.example.com/ 1234567.jpg'/>
<meta property='og:description' content='Description that will show in the preview'/>
<meta property='og:url' content='//www.example.com/URL of the article' />
But noting works! still i'm not able to add description on POST to be shared.
Unfortunately, these are your options, you may pick only one:
You can display an image.
You can display a description.
The image has priority, so if both are listed, the image will be used. I have proof: Two weeks of arguing with the LinkedIn support staff (Oh the humanity...).
Besides that, let's try sharing a site with only a description and one with a description and image. Wikipedia and GitHub, respectively.
Wikipedia: Description Shows! (But there is NO IMAGE)
GitHub: Image Shows! (But there is NO DESCRIPTION)
I made a test site, with only description, and, similarly, it works.
After thorough testing, this seems to be the unfortunate case! I've re-requested LinkedIn to reconsider how they do this, but I have had no success. I'm well aware that the Official Microsoft LinkedIn Share Documentation makes no mention whatsoever of this, but all of the real evidence seems to point in the opposite direction.

Linkedin Share URL preview not showing correctly?

I need to share dynamically created URLs in website to Facebook and LinkedIn. I am sharing to Facebook properly and all needed og tags have been set. But for LinkedIn, it is not working.
This is my URL: https://www.fourthambit.com/blogs_fa/102048
It is properly parsed in Facebook and preview is shown correctly.
But the same link is not working in LinkedIn.
Am I missing anything else?
All needed meta tags are set:
<meta property="og:title" content="Indian Media: Then.... Now... and Later" />
<meta content="Sensationalism has become synonymous with the Indian Media, especially Television. In 2008 dur..." name="description" />
<meta property="og:description" content="Sensationalism has become synonymous with the Indian Media, especially Television. In 2008 dur..." />
<meta content="Academic network" name="keywords" />
<meta property="og:image" content="https://www.fourthambit.com/article/getarticlephoto/big/ZGNlZQD4/0/102/20150807050217-12217198186.jpg" />
<img src="https://www.fourthambit.com/article/getarticlephoto/big/ZGNlZQD4/0/102/20150807050217-12217198186.jpg" style="display: none !important;" />
<meta property="og:type" content="website" />
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
This is the ajax call going while I try to view a preview in LinkedIn update status bar text-area.
https://www.linkedin.com/sharing/api/url-preview?url=https://www.fourthambit.com/blogs_fa/102048
The reason to this problem could be the following:
"Unfortunately LinkedIn caches the data it retrieves the first time the link is previewed and keeps it cached for a week!"
and the solution:
"The only way to “clear” the sharing preview cache for LinkedIn is to trick LinkedIn into thinking your page is a different (and new) page.
This is done by adding a made-up parameter to the link. It doesn’t affect your webpage, but it does force the metadata to be re-fetched.
Example:
Original link: http://beantin.se/consultant-resume
"New" link: http://beantin.se/consultant-resume?1
LinkedIn has launched Post Inspector. You can now 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
It could be a caching issue, or it could be a misuse of the LinkedIn API.
If you think you have a caching problem, try...
Inspect your webpage at the LinkedIn Post Inspector.
Try sharing not just example.com, but, example.com/?someFake=Parameter. Since the URL is different, it shouldn't hit the cache.
So, if that's it, then why isn't og:description showing???
Because the LinkedIn API supports two levels:
Level 1: If you supplied an image, show image with title/domain.
Level 2: If you supplied a description, but no image, show description with title/domain.
Is it possible to display: title, image, description, url? No, it is not. I gleaned this over two weeks of struggling with the LinkedIn support team (oh the humanity).

LinkedIn not picking up og:image

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

facebook open graph preview thumbnail image is not showing all of a sudden

I know this has been asked several times but i am really puzzled as this just stopped working for my new links last few days. All the old links that are cached just works fine.
I have my meta tags very neat. facebook debug tool does not report any error/warnings.
Here are my meta tags ..
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html><head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta property="fb:app_id" content="820998487913242">
<meta property="fb:admins" content="param.krish.5">
<meta property="fb:admins" content="obtest.obkrish">
<meta prefix="og: http://ogp.me/ns#" property="og:site_name" content="Salefrog.in">
<meta prefix="og: http://ogp.me/ns#" property="og:type" content="website">
<meta prefix="og: http://ogp.me/ns#" property="og:url" content="http://www.salefrog.in/register_fmp">
<meta prefix="og: http://ogp.me/ns#" property="og:title" content="Salefrog.in : Register as a Freelance Marketing Partner (FMP)">
<meta prefix="og: http://ogp.me/ns#" property="og:description" content="Register as a FMP. Join us. Get a FMP login and get paid as you earn credit points. More details in your login upon registration.">
<meta property="og:image" content="http://www.salefrog.in/img/fmp-picture.jpg">
<meta property="og:image:type" content="image/jpeg">
<meta property="og:image:width" content="250">
<meta property="og:image:height" content="250">
<meta name="title" content="Salefrog.in : Register as a Freelance Marketing Partner (FMP)">
<meta name="description" content="Register as a FMP. Join us. Get a FMP login and get paid as you earn credit points. More details in your login upon registration.">
<link rel="image_src" href="http://www.salefrog.in/img/fmp-picture.jpg">
</head></html>
Facebook debug tool tells me that it picks up an image but the image preview is not just there at all (looks to be hidden) as shown below.
When i click that "blank" space against the "og:image" , it opens up the image in a separate window so why does not it show up the preview image in the debug tool ?
I attempted changing the picture to different sized one's like 250x250, bigger etc. but nothing really helped. When i place one of the old cached images in the meta tag, it shows up that image. This tells me that old cached images are just fine but the newer images are not showing at all, for some reasons.
I tested using the link http://www.salefrog.in/register_fmp in the debug tool. If you guys can find some error, do let me know as it would really help me save time than i break my head to fix it all by myself.
I fixed the problem. It was due to the .htaccess which was blocking(or not letting the facebook ) to parse the image which was the reason that it threw a blank image , not showed any error.
How i fixed or analyzed the whole problem ?
Since there are no errors reported by the facebook debug tool and nothing seen in the apache logs, i suspected it could be that the tool itself does not sense any error with the whole process hence it must be something to do with the image itself OR something in-between.
Requests from facebook hits my webserver which has a .htaccess to redirect to a separate php that responds back only the meta tags , nothing else.
As there are no errors reported in facebook debug tool or in my webserver httpd logs, it could be two things that is causing the problem.
Image itself (could be the location of the image or the image is
corrupt or its size or aspect ratio or other format)
facebook debug tool has a bug (very unlikely but cant rule out )
(.htaccess) that does the redirection when the request comes from fb
As i have reasonably no doubt with the first two, i went to the 3rd item in the list.
I suspected the requests from fb is not fetching my images possibly due to the redirection happening for the "HTTP GET" to the image requests as well.
SOLUTION
I added the following line in the .htaccess just before the redirect so that all the image requests directly goes to the file, which just fixed the whole problem.
..
RewriteCond %{HTTP_USER_AGENT} ^(facebookexternalhit)
RewriteCond %{REQUEST_FILENAME} !(img|css|jp?g|png|store_images|category_images|fonts|awesome|ttf|tif|custom_images)
..
I know in most cases it might be something to do with the errors in the meta tags or in the image itself. But, in my case , it was not both.
Hope this helps someone out there !!

Resources