We've set up a new mini-site with extensive social sharing, including LinkedIn. Lots of OpenGraph tagging, the works. We have chosen specific images to be shown when sharing by using the og:image meta property.
The images work fine on Facebook and Pinterest, but are not working properly on LinkedIn. Here's the OG image tagging:
<meta property="og:image" content="https://img.mshanken.com/d/wso/Articles/2016/ST_TheBreakers070516_1600.jpg">
But if you click the LinkedIn icon we have set up at the bottom of our page, you end up on a share page that looks like this, which does NOT show the image:
Weirder still, if you inspect that share preview, the image IS in the source code:
<div class="image-thumbs-container">
<img src="https://media.licdn.com/media-proxy/ext?w=180&h=110&f=c&hash=q0uvWygJS2HJrhZZ2qZGdYu2Tig%3D&ora=1%2CaFBCTXdkRmpGL2lvQUFBPQ%2CxAVta5g-0R6jnhxUzw8p4aCKqEH-50hKCoaTFXP-RFTovozTPCKqZsXfeLS-xzl5HHRU4kZnLrT9AnPhFZO5KoyAfNpxi4m_ZMc" width="130" alt="Preview of the share image" data-orig-url="https://img.mshanken.com/d/wso/Articles/2016/ST_TheBreakers070516_1600.jpg" data-width="" data-height="" data-size="" data-position="1" class="active">
</div>
What do we need to do to get that image showing up on LinkedIn shares?
I was having the same issue last night. Spent hours researching solutions. Finally I contacted LinkedIn about this issue and they responded right away. Their development team has implemented a new tool called "Post Inspector", which allows you to optimize content sharing. Literally, in just minutes this worked.
All you have to do is type in your URL and they do all the busy work i.e. verifying correct code of properties such as image, author, title, description, publication date etc. Not only do they verify, they also tell you what to include and what is missing.
Here is the website to use Post Inspector:
https://www.linkedin.com/post-inspector/
Couple of things it could be:
The dimensions 1600x900 and size of 220kb are within LinkedIn's requirements. However, your aspect is 16:9 instead of 4:1 / 1:4.
Max file size: 1 MB
Minimum image dimensions: 80 x 150 pixels
Recommended aspect ratio: 4:1 or 1:4
Making Your Website Shareable on LinkedIn
Your image URI is https, it could be they are unable to retrieve your image. Have you tried with an http image?
Note: If the image meets the requirements, but it still does not
appear in updates on LinkedIn, your website may be blocking us from
pulling the image or the image may be located on a protected directory
or website.
Making Your Website Shareable on LinkedIn
Was the image change from the first time LinkedIn crawled your page for the image? They do cache for ~7 days.
The first time that LinkedIn's crawlers visit a webpage when asked to
share content via a URL, the data it finds (Open Graph values or our
own analysis) will be cached for a period of approximately 7 days.
This means that if you subsequently change the article's description,
upload a new image, fix a typo in the title, etc., you will not see
the change represented during any subsequent attempts to share the
page until the cache has expired and the crawler is forced to revisit
the page to retrieve fresh content.
Shared Content Caching
Chiming in from the future - I faced this issue today as our site update wasn't displaying the proper image. In my case the solution was simple: try posting the link like so: https://url.com/?jhskjsh and it forced linked in to fetch the meta tags again which then displayed my image, as opposed to the grey square it previously had.
Related
My company uses LinkedIn Share API to publish messages on LinkedIn profiles sharing content from WordPress posts.
One thing that is driving me crazy right now is that when I share the same URL and content to two different profiles, the preview cards that result from that are different. On one profile I got a full image preview like the following:
But the same content (same API params to share) produce this different preview:
I'm trying everything I can to get a consistent behavior. I'd like to have all previews being full size previews like the one shown in the first screenshot. API documentation doesn't help much here.
Any help or clue would be appreciated.
It's a random behaviour from LinkedIn. From time to time a significant percentage of accounts reached via the post API return a small thumbnail as well as a different content link (if you use redirected links like bit.ly). It happened for a week in February and since last Friday, including a number of Internal Server Errors. It looks like LinkedIn runs different code on different parts of its infrastructure.
So there is nothing you can do programmatically on your end I'm afraid.
I've got a site that has multiple share buttons on entries in a WordPress site.
We designed this so there are no individual entries to view, they're Podcasts and videos. The listing page has a minimum of 10 entries, each with share buttons.
Currently the share links and titles are working correctly. But the page is not recognizing the og:image, and instead is picking up the default logo for the site itself.
I read another post on Stack Overflow that said it might be an issue for LinkedIn if the image is utilizing SSL for the link. But I just find that hard to believe.
The other issue I'm struggling with, the docs say once an image is scraped it stays cached for approximately 7 days.
I had an issue with FaceBook and there's a debugger that allows you to rescrape the page which let's me verify my changes worked.
My two questions are, is there something other than the og:image i should be specifying? since I can't specify it per post, it's in the head of the page itself, i would think it would pick that up. No?
Second, is there a way a developer can re-check after the meta info has been changed to see if the changes worked, without having to wait the TTL on the cache?
try this:
url/link?blah=1
url/link?blah=2
url/link?blah=3
to get around the cache.
This should trick it into thinking its a new page each time.
Can i get a link to test?
Anthony Walz posted the correct answer. Through email he also helped another problem i had which corrected a new issue i didn't realize I had until i looked.
my LinkedIn shares were not picking up the show title, they were picking up the page description instead (i have several podcasts showing on one page, we don't use individual post pages, they all play from the listing.)
he pointed me to the developer docs on formatting sharing links
Which gives a real world example - here:
https://www.linkedin.com/shareArticle?mini=true&url=http://developer.linkedin.com&title=LinkedIn%20Developer%20Network
&summary=My%20favorite%20developer%20program&source=LinkedIn
Thanks a ton for assist Anthony!
I am an Amazon author, who has cunningly inserted a 1 pixel x 1 pixel image onto the sales page of his book. My intent is to track how many times that image is viewed, thus learning how many people are visiting said page.
So far, so good, but: how do I count the downloads of the image? I have spent all afternoon Googling this, but have been unable to find a way to do it in Wordpress or Google Analytics.
The image is stored in the "Media Library" of my site, which is hosted on WP Engine. I did investigate hosting the image on Flickr instead, but Flickr doesn't seem to like me hotlinking images. I am open to hosting the image somewhere else that will allow me to see how many times it is viewed.
If anybody can point me in the right direction, I'll be very grateful.
Thanks,
-Charlie.
I have my blog (wordpress) web site hosted at bluehost.com. A few months ago I decided to enable Cloudflare (through CPanel).
It's all working well (and I am seeing better overall performance etc) BUT I have a small issue I am dealing with.
I posted this blog some 10 days ago: http://it20.info/2016/01/why-docker-containers-and-docker-oss-docker-inc/
A few days later I had to change picture #2 (of 3) to tweak it a bit. The old picture says "Unikernel" in the red rectangle and the new picture (I uploaded) says "Unikernel/vm".
Note that inside the blog post I make an external reference to the picture (in the html code):
http://www.it20.info/misc/pictures/WhyDocker-ContainersAndDockerOSS-DockerInc2.jpg
If you point STRAIGHT to the picture you will see the new version (so I know I have updated it properly).
However the blog post still shows the old picture (as if Cloudflare is caching it indefinitely).
If in the blog post I right click on the image and do a "view image" (Firefox) it points to: http://i0.wp.com/www.it20.info/misc/pictures/WhyDocker-ContainersAndDockerOSS-DockerInc2.jpg?resize=640%2C392
(which shows the OLD image).
Funny enough if I remove the "?resize=640%2C392" it shows the proper picture.
I am trying to figure out a proper procedure to 1) write a blog post that refers to pictures as external links 2) possibly update said picture via an FTP upload and 3) have Cloudflare render the updated picture.
Thanks.
The root of your problem could be that query string after the image URL:
?resize=640%2C392
In CloudFlare, go to the caching settings and check if your current caching level is standard. If yes try changing to either no query string or ignore query string.
As far as a proper proceedure for future posts where images could change, as an alternative to purging all your site files in CloudFlare, or selectively purging just the image file in question, woudl it be feasible for you to simply change the name of the updated image file, or keep the same name but upload it to a different directory? And of course update the image src in your HTML as well.
Good luck
The past week, Facebook has been getting every article feature image wrong on my site. The og:image is clearly defined, worked fine for the past few months and even the debugger shows the correct image, yet it chooses to use the same incorrect image across all new articles now.
Article
http://www.highwaysindustry.com/causeway-creating-a-competitive-edge/
Facebook Debugger:
https://developers.facebook.com/tools/debug/og/object/
URL: http://www.highwaysindustry.com/causeway-creating-a-competitive-edge/
The meta tag, which clearly provides/defines the correct image Facebook should be using:
<meta property="og:image" content="http://www.highwaysindustry.com/wp-content/uploads/2015/05/Causeway-image-1.jpg" />
When on the debugger, if you Fetch New Scrape Information it will fix the issue. However I am currently having to do this on every single article that is posted. Why it's getting the wrong image in the first place I don't know.
In case someone runs the 'fetch new scrape information', here it is at the moment for that URL provided:
https://www.dropbox.com/s/8t4o9h3o1p9uxhv/debugger-fb.png?dl=0
I am using WordPress and Yoast SEO.
There's a warning. And it's going to take some time to update the latest information but for now you might have to fetch new scrape information yourself.
og:image was not defined, could not be downloaded or was not big enough. Please define a chosen image using the og:image metatag, and use an image that's at least 200x200px and is accessible from Facebook. Image 'http://www.highwaysindustry.com/wp-content/uploads/2015/02/Dorman00001-e1423681471392.jpg' will be used instead.