I am working on a website and we have a requirement for allowing our clients to share their pages on LinkedIn.
We have implemented a share button using AddThis which seems to work fine for LinkedIn, but manually sharing any of the pages that work fine with LinkedIn (via the Share Update functionality of our accounts) doesn't seem to work as expected.
When manually sharing a link, the link to the page is properly generated, however the title and descriptive text of the page (we're talking about news articles) are not filled all of the time.
It seems that most of the time we are getting the 404 page's title and content, and sometimes just the 404 page's title and the targeted page's content.
Has anyone else encountered this issue? If so, could you tell me where the information is pulled from and how?
To prepopulate a preview of your site's title, image, etc., you'll need to use og: tags, for instance...
<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" />
You would insert these into the <head> block of your HTML.
Source: LinkedIn Developer Docs: Making Your Website Shareable on LinkedIn.
You can verify that you implemented correctly by using the LinkedIn Post Inspector on your website's URL.
Related
is it possible to customize the image that you see as a preview when posting the link to your github pages?
I feel like they specifically address the issue for github repositories here, but I dont know how to do this for github pages. Specifically, I want my github page to not just display just a grey image of nothing, when it is showing up on my Featured section on LinkedIn:
This preview image taking from website meta tags. Specifically for LinkedIn enough to use:
<meta property="og:image" content="preview_image.jpg" />
Example from my LinkedIn:
The first two featured items are my personal website pages, and each of them has separate meta tags. It hosted on GitHub Pages, but it doesn't matter where to host. Here is how it's can be done:
<head>
{/* all socials */}
<meta property="og:image" content={previewImageSrc} />
{/* twitter */}
<meta name="twitter:image" content={previewImageSrc} />
</head>
full example (gatsby + react-helmet)
Tried the answer above but my og:image still doesn't reflect on my linkedIn profile. After further inspection , I found out that LinkedIn caches link preview content for 7 days. Changes you made will not reflect immediately unless you inspect your site using the LinkedIn Post Inspector.
Credits to this article: https://www.linkedin.com/pulse/how-clear-linkedin-link-preview-cache-ananda-kannan-p
I would like to use my own image for the LinkedIn share button. I've been following the information on this previous post:
How to make a custom LinkedIn share button
It's noted here that: To create a custom Share button for LinkedIn, you need to make POST calls now.
I've read the Linkedin documentation however I don't understand how to incorporate the POST call with my HTML page. Could someone help explain it to me please?
I've initially tried to use this URL which i understand is now not supported by LinkedIn:
https://www.linkedin.com/shareArticle?mini=true&url=articleUrl&title=YourarticleTitle&summary=YourarticleSummary&source=YourarticleSource
It partially works! The image, title and summary are all incomplete or not what I have specified in the URL, however if I click on the LinkedIn post it does actually link to the right page.
Is there anyway of getting this working?
Many thanks
Let's take a quick glance at the Official LinkedIn "Making Your Website Shareable on LinkedIn" Documentation. The URL format should be...
https://www.linkedin.com/sharing/share-offsite/?url={url}
And to have it use the other parameters, such as image, etc., set your og: tags in the HTML of the link you are sharing, like so...
<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" />
I need to make social networks for example facebook.com to display website logo when someone put link on it in post, message or share it. I have googled this question and found that website should have this:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://ogp.me/ns/fb#">
and
<meta property="og:image" content="https://www.lucida.construction/wp-content/themes/lucida-theme/images/logo_for_sn.png" />
<meta property="og:title" content="Home - Lucida ConstructionLucida Construction" />
but it doesn't give any result. I tried to do this on Facebook and LinkedIn and both of them either not showing an image at all or display some random image and not the logo that I've set in the <meta property="og:image" /> tag.
Website I try to share are http://www.resolutemarine.com and https://www.lucida.construction
Any help appreciated! Thanks!
What you did is correct. I don't know about other social media channels but facebook caches the information of your page. So if have you shared your link before the results are probably cached before you made the change in your code (inserting the og:image part). I don't know when facebook exactly clears it but you can do it manually by using their tool (again).
I tried it with one site of your linked domain and it works for me.
So if you want to test it use their tool. Otherwise you just need to wait until they grab it automatically.
Here is the link to the tool - just enter the url that you want to be crawled again by the bot: Facebook sharing debugger
I tried to share my website sometime and it kept on showing me the website logo, till I had to uninstall all plugging and it still didn't work not knowing it was the All in one SEO plugging that I selected a default image when shared on social media, so if you have AIOS installed, kindly check the settings=> Social Networks and selected the social media you want to change the profile picture if you have it installed
I try to add my link to a facebook page. Sometimes facebook loads preview picture, sometimes not (even don't try to load and just add as link, without preview picture). My code has the following lines in head section:
<meta property="og:title" content="[title]" />
<meta property="og:description" content="[text]" />
<meta property="og:image" content="[correct_link_to_image]" />
all pages have format like
[MY_ADDRESS]/jpg/[UNIQUE_CODE].html
links for images have format:
[MY_ADDRESS]/publicThumb/[UNIQUE_CODE].JPG
So, each unique page has unique image
My thoughts - it happened because Facebook caches it. But how to solve?
Thanks
I solved my problem.
First at all, facebook proposes us a special debug tool
https://developers.facebook.com/tools/debug/og/object/
If you enter the url to check and click on "Fetch new scrape information" and receive all detailed information, including page error (this was my case, I asked Request.UserLanguages on page and this is empty for Facebook's request, so, Facebook got an error).
Secondly, need to add og:url meta tag (this tag is mandatory to correct work)
Thirdly, og:image should be at least 200x200, otherwise Facebook try to catch any other picture on page
P.S. Seems, russian social network "VKontakte" uses the same tags as Facebook
I need to create custom share buttons for Facebook, Twitter and Google +.
At the moment I have the following:
Facebook
facebook
Google
google
Twitter
twitter</li>
This seems to be working. But I still have a few problems:
How to specify the title of the page being sent in each service?
In Google + I there is the following on the url: "confirm?hl=en" ...
If the site is not in English should I change "en" to the site's language?
Thank You,
Miguel
Social networking services look for Open Graph metadata when a page is shared. To specify what this data is, you have to include the meta tags in the head of your page. The following should be your bare minium tags to include. For the rest, google them and you will find them easily enough:
For the page title:
<meta property="og:title" content="Title Here" />
For the URL
<meta property="og:url" content="http://www.example.com/" />
For the image that is typically displayed when someone shares a page to their wall:
<meta property="og:image" content="http://example.com/image.jpg" />
Description text that is generally included when someone shares a page:
<meta property="og:description" content="Description Here" />
However, I'm not exactly sure what "confirm?hl=en" does, but if you want to tell a search engine to crawl a site in a different language, then you can do so with the locale property.
That's a bit more complicated, though. Check out this article for more info on internationalization.
https://developers.facebook.com/docs/opengraph/guides/internationalization/