This bounty has ended. Answers to this question are eligible for a +500 reputation bounty. Bounty grace period ends in 20 hours.
John Rood wants to draw more attention to this question.
When the button on my website is pressed, I want the link of my website to be shared on LinkedIn. But when the button is pressed, the image I specified in the meta tags does not appear on the share page. In addition, the description and title information I gave in the meta tags are visible.(I am using vite-11ty.)
the link i gave to the button
Share with Linkedin
my meta tags
<meta name="image" property="og:image"content="image-url"/>
Maybe Linkedin cache isn't up to date with your website. You can try using the LinkedIn Post Inspector to see if the info you gave in the meta tags is being returned ok by Linkedin, it'll make Linkedin refresh the data they've about your post too.
If it doesn't work, try the process mentioned in this post (add a query string in the img url so Linkedin will consider it as a new img).
Also, make sure the URL in the og:image tag is public and the right format (jpg or png)
First of all, one needs to make sure one is following all the requirements:
og: tags
Image requirements
Below will also give one example of how to solve it with WordPress, as the approach might be helpful.
If those don't work, one approach is to reach out directly to LinkedIn's Support.
Requirement 1
With regards to the og: tags, they must exist and this is their correct format:
<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'/>
One can add inside one's <head> tags.
Requirement 2
The image needs to satisfy the following requirements:
Max file size: 5 MB
Minimum image dimensions: 1200 (w) x 627 (h) pixels
Recommended ratio: 1.91:1
If the image meets the requirements, but it still does not appear in updates on LinkedIn, one's website may be blocking LinkedIn from pulling the image or the image may be located on a protected directory or website.
How to solve it in WordPress?
In WordPress one can solve this issue by using YoastSEO.
The hyperlink above redirects one to a page on how to do it using Facebook, however, as LinkedIn also uses Open Graph metadata, the data used in the Facebook preview is also what LinkedIn will use.
In order to set up an Open Graph image for individual posts and pages, with Yoast SEO,
you can do that in the Social tab of the Yoast SEO meta box, which can
be found bellow the page content
(as seen on the image bellow):
Notes:
One can test the posts with LinkedIn Post Inspector. If one's content has changed recently, one can see when LinkedIn last updated their data on it, and request a re-scrape.
Relevant reads:
Make your website shareable on LinkedIn.
Share on LinkedIn.
Clear LinkedIn cache: LinkedIn caches the OG tags for shared URLs. Sometimes, if the OG tags were updated recently, the cached version may still be used. To clear the LinkedIn cache, you can use the LinkedIn Post Inspector tool (https://www.linkedin.com/post-inspector/).
Check for other OG tags: Sometimes, other OG tags may be present on the website that conflict with the OG tags you added. Check the HTML source code of your website to make sure there are no other conflicting OG tags.
Test with other sharing tools: Test sharing your website link on other sharing tools such as Facebook or Twitter to see if the image appears. If the image appears on other platforms but not on LinkedIn, it may be an issue with LinkedIn.
If none of these steps work, you can try reaching out to LinkedIn support for further assistance.
Related
I am trying to share following post/page on my google plus account https://www.schoolmykids.com/parenting/importance-of-father-daughter-relationship/
Instead of TITLE of the blog, google plus is showing me just the site name.
Please suggest how to resolve this issue except for my actual blog/article page all pages are showing correct tile while sharing on google plus.
Try modifying your page to add meta tags with Open Graph properties. This should work for sharing either on Google+ or Facebook. Using these OpenGraph properties you can specify descriptive meta data about your page such as your page title, a brief description, an image, etc.
For example:
<meta property="og:title" content="The Importance of the Father-Daughter Relationship" />
Here are a couple of links to get you started:
https://developers.google.com/+/web/snippet/
https://developers.facebook.com/docs/sharing/webmasters
I have trouble sharing page URLs from the website http://www.waterlinedata.com/ on LinkedIn: the Open Graph title and Description are ignored .However, the Facebook Debug tool returns all the information correctly (so I assumed the og tags are correct)
ex: www.waterlinedata.com/careers/
With the FB Debug, the og:title ( Careers | Waterline Data is hiring ) is correctly returned. However when trying to share the same link on LinkedIn, the og:title is ignored and it seems that the last part of the URL 'careers' is displayed instead.
Here is a screenshot from Facebook Debug
And below is a screenshot of a share on LinkedIn :
AS you can notice the og:title is not displayed (instead is the word "career" which is the name of the WordPress page and the last part of the URL ...)
It is a WordPress website, running the SEO plugin by Yoast.
Could someone help me resolve this problem? Thanks.
LinkedIn provides the two following modes for the sharing API preview...
Level 1
You supply: og:image tags.
Preview shows: title, url, image.
Level 2
You supply: no og:image tags, but an og:description tag.
Preview shows: title, url, description.
Regardless of the applicable level, the og: tags for title and url always display fine.
Since you supply an image, the description will not display. The Official Microsoft LinkedIn Sharing Documentation, which mentions the four tags (title, url, description, image), is silent on this matter.
We can test it, though. Wikipedia has no image tag, but a description tag, and we only see the description when sharing Wikipedia. GitHub, on the other hand, has both image and description tags, and we only see the image when sharing GitHub.
A conversation with LinkedIn support over the course of two weeks yielded no result. (oh the humanity) So, I think we are stuck with just the image for now in the LinkedIn preview. Right now, it seems like nobody can fix this but Microsoft themselves.
Lately i've been working on a share button which should take some specific information on the website and post it on LinkedIn. The website is an single-page application with Angular ui-router.
I followed LinkedIns developer guide docs with the customized URL to execute this action. My link looks like this:
https://www.linkedin.com/shareArticle?mini=true&summary= Description
&title= Title &url= Url &picture= Image.
Description, Title, Url and Image are unique values which is set by the content of the page and i've set the Open Graph meta tags:
meta property="og:title" content="website title"
meta property="og:description"
content="website description"
meta property="og:url" content="website url"
meta property="og:image" content="website image"
Since the page is an single-page application, the page "never" really reloads, but just changes the content inside the body element. Therefore i've created some Javascript to do the job for me which works like a charm with LinkedIn sharing to your network but "sending to a specific person" is inserting the wrong url.
When the user enter our website, locate to an article they want to share and click on the LinkedIn icon in the top right corner, a new tab appears. In the new tab, the user sees the title of the page, some of the url link and some of the description. They can check whether to share an update or / and send to a specific person. If the user checks to share an update with their network, the correct information is set with title, description, image and url. But when the user wants to send it to a specific person, which the user is notified about in their messages, the title and description is correct, but the link is not.
This issue seems to be connected to some sort of caching. If the user visit a new page, where no one has shared any article or so on linkedIn via the website, the correct link for both the network and the person, who is recieving the message. Let's say it is website.com/#3/5521. But when another user wants to share a different article on the page, the message url link is set to the first one, that the other user earlier shared. The link should have been website.com/#3/9978 but is set to website.com/#3/5521 no matter what i do. It's the same link that sharing with your network gets as when sharing to a specific person, so i can't see, how i can deal with this problem properly.
I hope this gives an idea of what the issue is. Tell me if you guys need any more explaining.
The problem appears on this website, if you want to see it in live action:
http://gentofte.viewer.dkplan.niras.dk/plan/52#/23703
Thanks in advance.
I'm not experiencing this problem at all. Is it still broken?
Here I am trying to share this URL: http://www.revoltlib.com/?id=17. I am using this URL...
https://www.linkedin.com/sharing/share-offsite/?url=http%3A%2F%2Fwww.revoltlib.com%2F%3Fid%3D17
This is the screen on sharing...
And this is the result after sharing...
It appears to work! Is it still broken for you?
This is SO annoying.
The Issue is a matter of two scenarios behaving differently when I expect (and wish) them to be the same, these relate to the same webpage/article which features both Facebook Comment widget and a Share icon.
It's important to mention that the webpage is a Wordpress article, and we redirect:
from www.example.com/wordpress/articles/news/thearticle
to www.example.com/news/thearticle
The issue explained:
Scenario 1) I visit the article and type a facebook comment, I also click 'Also Post on Facebook'. When I view may facebook wall and see the share with the comment I just made, the link is linking back to the wordpress URL - I do not want this.
Scenario 2) I visit the article and share it through the Share icon. On my wall this time the linkback URL is the short one - this is good.
Important info regarding debugging
My OG URL tag is correct:
<meta property="og:url" content="http://www.example.com/news/thearticle"/>
Facebook debugger is picking up the correct desired URL as above,
also listing the desired Fetched URL and Canonical URL. All seems to
be what I want it to be.
This is true regardless of whether or not I
scrape the URL before or after I try this procedure.
Even if I then go back and do another comment with 'also post on FB' after doing a scrape with FB debugger, still the share links to the wrong/long format/original URL.
However, if I at any point share via the share icon, not the comment-share, the desired URL is present as per the OG URL.
If I do a comment-share, then an icon-share, then another comment-share, the comment share ones still have the wrong URL even though the icon-share had the correct one!
Any ideas? Thanks so much in advance to anyone who can help :)
It seems that the Comments FB plugin doesn't get the page info from OpenGraph, but expect a data-href attribute, or if not provided will use the current url by default.
From the doc:
data-href
Description : The absolute URL that comments posted in the plugin will be permanently associated with. Stories on Facebook about comments posted in the plugin will link to this URL.
Default : Current URL.
So what you need to do is to provide the valid URL as an HTML5 attribute on your plugin wrapper:
<div class="fb-comments" data-href="http://www.example.com/news/thearticle" data-numposts="5"></div>
I have a resources.aspx page that renders on run-time displaying all the articles (a title, description, image, and a read more link) with each of the article displayed. I have successfully been able to render social media buttons (Facebook's Like, Twitter's Tweet, LinkedIn's Inshare, and Google's G+) on in each of my rendered div's. Now, the problem is that when I click on Facebook's like button, it post just the URL of my page to my timeline. I want it to post the title of the article, it's image, and some description set by me. How can I get it done using Open Graph meta tags? I'm unable to change their values on run-time.
i think this is a tautology, but because Facebook uses the meta tags to decide the title, description, etc, If you're not able to change the meta tag values at runtime, you're not going to be able to change the title, description at runtime.
Maybe I misunderstand the question. If so please edit your question to clarify.
Why can't you change their values at runtime? What specific features of ASP.NET are you using that would preclude setting meta tag values at runtime? Does Facebook just see your resources.aspx file as the URL or do each of your articles get their own URL?
Razor:
<meta property="og:description" content="#Model.YourCustomDescription"/>