I have a personal website that I refer to from Linkedin. I like the preview windows on my Linkedin profile to show a snapshot image of my website. However, I cannot seem to get this to work.
According to the documentation it must fulfill the following:
Below are the og: tags that must exist and 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" />
Here are the image requirements specific to the LinkedIn sharing module:
Max file size: 5 MB
Minimum image dimensions: 1200 (w) x 627 (h) pixels
Recommended ratio: 1.91:1
I have done exactly this and then run it through the linkedin inspection tool that is supposed to detect these as well as clearing the linkedin cache: https://www.linkedin.com/post-inspector/
It does pick up all my og tags in my header section of my index.html, except for the image og tag. It says it cannot find it at all. In my case, I'm linking to an image I have to github, like this:
<meta name="image" property="og:image" content="https://github.com/XXX/XXX.github.io/blob/master/img/XXX.png">
(Size is 1641x851)
What else can I do to try and make this work? I have tried and made sure to verify all other suggested solutions
Related
Does anyone else have this problem or can you see what may be wrong on my end?
Problem: If I go to LinkedIn (business or personal) and post a link to one of my websites:
https://inventivewebdesign.com/
https://www.revealio.com/
I get the image, but I don't get the title or description. Both sites are using WordPress with the latest version of Yoast SEO. I asked LinkedIn and they just said that my meta og tags need to be added to my site, but when I look at the source code for each page on either site I can see them there. Is there something that I am missing?
This is what LinkedIn Customer support said:
You'll need to make sure the source code complies with Open Graph
Protocol (OGP) and certain image requirements specific to LinkedIn.
Our developer website contains more details on setting display tags
for shares (available in English only). Below are the og: tags that
must exist and 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" />
Here are the image requirements specific to the LinkedIn sharing
module:
Max file size: 5 MB
Minimum image dimensions: 1200 (w) x 627 (h) pixels
Recommended ratio: 1.91:1
These are the OG tags on my site:
<meta property="og:type" content="article" />
<meta property="og:url" content="https://www.revealio.com/features/" />
<meta name="twitter:card" content="summary_large_image" />
<meta property="og:site_name" content="REVEALiO" />
<meta property="og:title" content="How To Make Your Message Come Alive With REVEALiO" />
<meta name="twitter:title" content="How To Make Your Message Come Alive With REVEALiO" />
<meta property="og:image" content="https://www.revealio.com/wp-content/uploads/BC_phone_scan-iPhone-wText-1.jpg" />
<meta name="twitter:image:src" content="https://www.revealio.com/wp-content/uploads/BC_phone_scan-iPhone-wText-1.jpg" />
<meta property="og:description" content="REVEALiO Is a Video Marketing Technology That Makes Your Promotional Materials COME ALIVE With A Personal Video Message and Call To Action Buttons" />
<meta name="twitter:description" content="REVEALiO Is a Video Marketing Technology That Makes Your Promotional Materials COME ALIVE With A Personal Video Message and Call To Action Buttons" />
<meta name="twitter:creator" content="#Revealiocards" />
<meta name="twitter:site" content="#Revealiocards" />
Am I missing something?
I'm not having any trouble with your title tag, but your description tag is definitely missing. LinkedIn provides two levels, which each are triggered in their own way, but they are mutually exclusive...
Level 1
If you supply: og:image tags.
The preview shows: title, url, image.
Level 2
If you supply: no og:image tags, but an og:description tag.
The preview shows: title, url, description.
Your site is using level 1...
The Official Microsoft LinkedIn Share Documentation makes no mention of these levels. But I have been informed by LinkedIn support staff that they exist, and experimentation seems to confirm it.
Example: Wikipedia has og:description and is missing og:image, so, sharing Wikipedia shows the description. But GitHub has both og:description and og:image, so, sharing GitHub shows the image.
I am trying to update some old iOS/Android Facebook sharing code to work with the new sharing API. The old API used to let you specify a URL and an image, so users see the image in the FB feed and if they click on it, it takes them to the URL. I'm trying to figure out how to do the same thing under the new API.
This is for a game program. The way it worked is if a user got a high score - say, 1000 points - I would bring up a share dialog, specify a URL for a stylized "1,000 points!" JPG as the image, and specify the game's home page as the destination URL. Under the new approach, I'm not allowed to specify the image, instead they want me to specify it in the Open Graph metadata for the target URL. This is the solution I came up with under the new approach:
<!DOCTYPE html>
<html>
<head>
<title>NAME OF GAME</title>
<meta http-equiv="refresh" content="0; URL='GAME WEBSITE'" />
<meta property="og:type" content="website" />
<meta property="og:title" content="NAME OF GAME" />
<meta property="og:image" content="URL OF JPG" />
<meta property="og:url" content="URL OF JPG" />
<meta property="og:description" content="NAME OF GAME" />
</head>
</html>
This mostly works. When a user shares a link to the above web page, they get the JPG image showing their score, and if you click on the JPG it redirects you to my game's website - however, in the news feed Facebook is now overlaying the URL of the redirected page and a little arrow to show that a redirect will take place. If I can eliminate the ugly overlays and just show the image, my work is done. If you have any insights they would be greatly appreciated.
Sharing certain links on Skype triggers the program to show preview with image from the page. On a website I work on - there are big images on certain pages but Skype picks up the logo of the website instead. I was unable to find what meta tags would make Skype pick up the intended image and preview it.
I have a <link rel="image_src" href="http://www.example.com/path/to/img.png" /> that works for Facebook-sharing preview (img.png is used instead of the logo of the website) but doesn't work for Skype.
So how would you hint Skype which image should be used for preview?
I will need to find some source to support this, but I think that if you have defined some open graph meta data, it will pick the image specified in there. For example, I have these in one of my sites:
<meta property="og:title" content="Site Title" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://my.site.com" />
<meta property="og:image" content="http://my.site.com/images/thumb.png" />
<meta property="og:description" content="Site description" />
And the image displayed as the link preview on Skype is the thumb image specified in og:image (that is not available anywhere else on the page).
We are in 2021 and this Skype issue continues! :/
I communicated through Microsoft forum and several users have the same problem.
My open graph metadata is well defined, in fact the link previews fine on Facebook and Twitter, but not on Skype.
I already reported the bug to Skype, hopefully they will answer something ...
I am attempting to get my website logo to show up properly on Facebook news feeds. When I paste my site link on my news feed (share it) in Facebook and the image shows up, but the thumbnail image is just a portion of my logo. Specifically, the center portion of my logo shows up only.
My image/logo is exported via GIMP 2.8 and it is 1200 by 349 px. I made it this size because that is the closest I could come to the Facebook recommended 1200 x 650 px (or something like that).
EDIT:
I am not sure if this is the best way to publicly share images, but this is exactly like my logo except for text and color:
http://2imgs.com/2i/i/53d2dd5f/22d0e1223be1e43544446b27ab6b4b3c/377394be6d.f.jpg
Then when I scale the image down (in GIMP 2.8) to something that seems like it will fit, the image doesn't seem to change anything.
I am using the Open Graph Debugger here:
https://developers.facebook.com/tools/
I am doing stuff like this (and many other) posts:
Default website image for social sharing
Here is the head of my Index.php:
<head>
<link href="html5reset-1.6.1.css" rel="stylesheet">
<meta charset="utf-8" />
<meta name="description" content="my business description here" />
<!-- For facebook -->
<meta property="og:image" content="http://www.example.com/imagename_w1200h349.jpg">
<meta property="og:image:type" content="image/jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="349">
<link rel="icon" type="image/png" href="myiconpic.png" />
<title>my business title here</title>
</head>
What am I missing? This is the first website I have built.
Make sure the Open Graph image is always public, that image does not seem to be available for Facebook.
About the correct sizes: https://developers.facebook.com/docs/opengraph/howtos/maximizing-distribution-media-content#images
I sorted it out. I had two issues:
1) Facebook's Open Graph debugger Share Preview section doesn't refresh right when you upload a new Index.php and picture file to my host. I had to let it sit for a few minutes then refresh the page to get the preview to update.
2) I'm not sure if this is 100% true, but it worked for me: I made my image 1200 x 1200 with white canvas space above and below the logo (black). Since Facebook's recommendation is to go with 1200 x 630 pixels pictures, my solution here seems off, but it works so I am posting it.
Here is my image example that works:
EDIT: (Previous link didn't work. Hopefully this one does.)
http://2imgs.com/2i/i/53d3c78d/6719aed50ed239e3331cdeeadc572cf1/577394be6d.f.jpg
you can test why is not fetching you site image to facebook.
Facebook crawler will 'scrape' your site search for an image to use when it is being shared. If you want to specifiy which image to use, put this in the the section of your site:
Facebook may have cached a copy of the previous random image. to change or refetch for newer image. and you can test it for your ans.
https://developers.facebook.com/tools/debug/
I have a problem with the og:image tag. I followed the instructions on SO about implementing the tag, which was very straight forward. It works great when someone like's the page. There is now a problem though, that when I post the link into a message I am composing on facebook, it does not show any thumbnail.
Here's my site: http://www.sunlitehardware.com.au/
So check this.
Okay jump onto facebook, and create a private message to one of your friends.
Paste in this link: http://www.sunlitehardware.com.au/blog/Power-Tools-Save-Your-Energy
Watch the thumbnail box below the post generate, and pull in some data. You'll notice it has a title, a link but no image.
The head of that particular link looks like this:
<head>
<link rel="shortcut icon" type="image/x-icon" href="http://www.sunlitehardware.com.au/site/assets/template/images/favicon.ico" />
<meta property="og:title" content="Power Tools - Save Your Energy" />
<meta property="og:image" content="http://www.sunlitehardware.com.au/site/assets/media/Bosch-1590EVSK-6.jpg"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content=" Sunlite Hardware stock a massive range of tools for all your hardware needs in Sydney City & Bondi Junction." />
<meta name="keywords" content=",hardware, store, city, power tools, llight bulbs, paint, sydney, bondi junction" />
<meta name="verify-v1" content="Ow6TX6iHLufi9DAwV6mWquC9SEW4Les+o/wz29uUdeY=" />
If you take a look, the link to the og:image link, you can see the link points here:
http://www.sunlitehardware.com.au/site/assets/media/Bosch-1590EVSK-6.jpg
If you were to click that, you should be able to see the image, i know I can, so the link is working.
Seems like for some reason facebook is ignoring it ..
Take a look at the facebook lint page here: http://developers.facebook.com/tools/lint/?url=http%3A%2F%2Fwww.sunlitehardware.com.au%2Fblog%2FPower-Tools-Save-Your-Energy
It has the thumbnail there. It just won't work when making posts. Any ideas?
The Facebook Debugger is a handy way of checking your links and usually warns you of the problems with your OG tags.
For the og:image, try using an image that's closer to 50x50 (yours is roughly 1200x1200).