I am using the following Linkedin API for sharing from my application.
https://www.linkedin.com/shareArticle?mini=true&url=XX&title=XXXX&source=XXXXX. I am using open graph meta tags for binding the informations 'title', 'URL', and 'description'. But the description is not working with Linkedin. It is working fine with Facebook share.
Step 1 - Use the Right URL Format
https://www.linkedin.com/sharing/share-offsite/?url={url}
Source: Official Microsoft LinkedIn Share API Documentation.
Step 2 - Set Title, Description, Image using og: Tags..
<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' />
Source: LinkedIn Share Documentation: Making Your Website Shareable on LinkedIn
Step 3 - Check Your Code
Take the URL you are sharing (i.e., example.com, not linkedin.com?share=example.com), and input it into the LinkedIn Post Inspector. You will be told everything that goes into determining how your webpage is shared on LinkedIn.
Related
I have created this site in WordPress (https://gs4mc.org/) and installed Yoast SEO Plugin.
I have properly implemented meta and OG tags, but when I am posting the above site URL on LinkedIn, the 'Home_main_latest' dummy title is showing.
you can use theses meta tags for LinkedIn, you can even set the website title, description or image.
<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'/>
here is the reference from LinkedIn website
Also use wp-head wordpress hook to add this code in the website.
Happy Wordpress
Please use below URL to get updated title and description from your site in linked share:
https://www.linkedin.com/post-inspector/
you have another option apart from the above one: you can add '?latest' after your site URL
Also, please don't forget to include below code in your header file:
"Unfurling is the technical term for what happens when you share a link on Twitter, Facebook, LinkedIn or Slack." (From the book: Designing Bots: Creating Conversational Experiences
By Amir Shevat)
What spec does the HTTP response body have to conform to in order to enable unfurling the link on the LinkedIn ?
Unfurling works by the app being able to read the meta tags in the HTML head of your document at the specified URL.
There are a few specs that most of the services you listed will use and/or fallback on, including og (opengraph) and twitter.
Your HTML head needs to contains something like this (for opengraph)
<meta property="og:url" content="your website url" />
<meta property="og:title" content="the title that shows up in the unfurled preview" />
<meta property="og:description" content="the description in the preview" />
<meta property="og:image" content="the url of the image you want to show in the preview" />
Note that if you are building an SPA or something that dynamically loads content based on route parameters, you'll need to do server side rendering or something that can serve the HTML statically, because the unfurl-er will not run the javascript that would add to the DOM.
There is also something called oEmbed that is a standard for sharing meta data with other services. This would be a server that responds with JSON about the links you post. Slack primarily relies on oEmbed but will fall back on og or twitter tags if it isn't available.
For example, the URL of a page has the og: <meta property="og:image" content="https://url.com/wp-content/uploads/2016/09/image.png">
If I write that URL in LinkedIn that previous image is shown, but if I write the URL https://url.com/suburl no image is shown, and the og is the same: <meta property="og:image" content="https://url.com/wp-content/uploads/2016/09/image.png">
Why does LinkedIn do that? In fact both pages have the og meta data. What am I doing wrong?
See answer here:
https://stackoverflow.com/a/43567627/3644967
In short, it's likely because you're missing the OG prefix on your page:
<html lang="en-US" prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# website: http://ogp.me/ns/website#">
Either add it manually, or if you're using a WordPress theme, use a plugin like Complete Open Graph to manage that for you:
https://wordpress.org/plugins/complete-open-graph/
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:
We have a web site www.mywebsite.com that sells widgets which implements Open Graph tags as follows:
<meta property="og:title" content="This is the title of the widget model" />
<meta property="og:type" content="product" />
<meta property="og:url" content="http://mywebsite/widget/67734" />
<meta property="og:image" content="http://mywebsite/images/123456.JPG" />
<meta property="og:site_name" content="My Website" />
We have a developer who has been asked to create a Facebook application that also sells widgets. He has asked me to change the og:type value on our website pages from "product" to "widget" so that Facebook application displays a description to the user that includes "widget" instead of "product". My understanding is that the Open Graph Protocol has a defined set of types that can be used:
http://ogp.me/#types
I'm concerned that by using a type not defined in the protocol I will degrade my ranking with Facebook, Google, or any other Open Graph subscriber. Is this correct? Shouldn't the Facebook application have the custom type value and NOT our website?
Step 3 of Facebooks Open Graph Tutorial ( https://developers.facebook.com/docs/opengraph/tutorial/ ) provides instructions for creating a custom type, including your own namespace. However, this documentation is for creating a facebook app and is not written to descriibe how to implement OG tags on your websites pages. After further reading I found facebook specify that OG types must be only those specified in the OG protocol. See Step 2 of http://developers.facebook.com/docs/reference/plugins/like/ which discusses implementing a like button:
"You must select a type from the list of Open Graph types."
In the end, the answer is to only use OG defined types for your web sites pages.