Linkedin og:image not working

Developing with Prismic
1

Hey,

A client was having problems with some of his article's images not showing on Linkedin. After a lot of headache investigating this, I found out that the images that were not showing had a longer name. So it turns out that if the URL is longer than 118 characters, Linkedin won't scrape it and show it.

This isn't a problem for Facebook, Twitter, etc.

Is there any way possible to reduce the length of the URL besides changing the name of the file. For example:

https://images.prismic.io/reponame/8ca26978-4086-4d9a-a052-bc3961499ce5_Untitled+design-2.png?auto=compress,format

2

Hey @kris, thanks for sharing this with us. It is not recommended to modify the URLs of the media files. Especially for images, as they would lose the automatic image compression. We've discussed this in different threads. This one for example:

Can you tell us exactly where you're adding the image URL and what error you're getting? if you could embed a screenshot it'll be really useful.

6

Hey @kris ,

Can you send me the link where you found the information about the character limit on Linkedin social cards? I'll try and investigate further.

Thanks.

7

@Phil Sadly, I couldn't find an official documentation - it was mentioned in a comment with 0 upvotes on Stack Overview. So take it with a grain of salt, but I tried it several times (shortening the name of the image file, which shortens the url itself) and it worked.

It wasn't a problem every single time, only sometimes. Probably something that you could explore if you had a spare hour on a Friday afternoon. It's only a problem in Linkedin fyi

8

OK, I'll look into this further. We are working on the ability to disable imgix per repo which would stop this but you'd lose all the image compression.

I'll talk with the team about the imgix IDs and what our options are.

Thanks.

9

Hey @kris ,

So I reached out to the team at imgix and they ran some tests.

Here's what they reported back to me:

I'm using this validator to test some URLs:
Post Inspector

So I'm getting it to work on longer images:
https://www.linkedin.com/post-inspector/inspect/https:%2F%2Fimages.prismic.io%2Ftdeco[…]=fill&fill=solid&fillcolor=f7fafc&dpr=1&q=75&ixlib=vue-2.8.1

Let's me make it silly long and try again. So I just tried doing a 306 character long URL:
https://images.prismic.io/tdecomm21/de0680b1-d97e-464b-bc34-0e78a03f1e7c_ix_grey_shirt.png?auto=format&w=580&h=580&fit=fill&fill=solid&fillcolor=f7fafc&dpr=1&q=75&ixlib=vue-2.8.1&blend-size=inherit&blend-mode=multiply&blend=https://demos.imgix.net/dark-ellipse-gradient.ai?fm=png%26w=580%26h=580%26fit=crop

It did work on linkedin:
https://www.linkedin.com/post-inspector/inspect/https:%2F%2Fimages.prismic.io%2Ftdeco[…]llipse-gradient.ai%3Ffm=png%2526w=580%2526h=580%2526fit=crop

Just put it in LinkedIn, it worked here as well. I think it's safe to say that the character limit doesn't exist.
Thomas Dale on LinkedIn: Philip Snow Check out this image I made. Pretty cool. Let's test the…

Also, the example URL in the Prismic article is 404 throwing an error on its own
https://images.prismic.io/reponame/8ca26978-4086-4d9a-a052-bc3961499ce5_Untitled+design-2.png?auto=compress,format

So it seems there's no character limit.

Thanks.

10

Amazing, thanks a lot for investigating this @Phil !

It seems that the majority of cases when it doesn't work is using .png as opposed to .jpeg or .jpg.

1 Like
11

Since it's a case of linkedin not accepting certain image formats, then luckily with the imgix integration you can dictate what format specific images are output in:

12

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.

14

To add context to this issue, I contacted Linkedin as I was pretty sure that og:image tag and the url within were perfectly fine and yet Linkedin was not able to fetch the image.

After 2 months of constant followups (earlier they refused to even acknowledge the issue). Finally they replied saying if I had a url similar to one below:
https://images.prismic.io/something/1b15a138-d650-44dc-96d4-b4f7e173fd18_Best+Tools.png?auto=compress,format

Then they encode the url before dowloading it, as per them the above url is being turned into -
https://images.prismic.io/something/1b15a138-d650-44dc-96d4-b4f7e173fd18_Best%2BTools.png?auto=compress,format

Now this encoded url basically replaces "+" with "%2B" which breaks the path to the image and they are not able to fetch it.

I have further asked them why they only need to encode a part of the url and not the full url. And if they encode the url wouldn't that anyways break the path to the image. To this message I am awaiting reply.

Hopefully, we are able to solve this issue once and for all.

2 Likes
15

Thanks @shyamal890 - glad that I wasn't going crazy and another person had the same problem as me.

Just to add to this - I created an article a while back for anyone who has the same issue - How to successfully fix the OG image for Linkedin | SEO component

I'll make sure to add your info as well as it's incredibly useful to debugging the issue

2 Likes
16

This is the reply I received from Linkedin after I questioned them on the need to encode the url:

In order to pull that image and place it in the preview window when your URL is shared on LinkedIn, we need to encode that URL using a media service called Vector. We do this for every image and there is no way around this process. When we encode your URL, this is what we receive - https://images.prismic.io/something/1b15a138-d650-44dc-96d4-b4f7e173fd18_Best%2BTools.png?auto=compress,format

This is not a bug, this is the same process we use for every URL that is shared with an image. The member's URL is not encoding properly and is providing us with the wrong encoded URL and we receive an error - https://images.prismic.io/something/1b15a138-d650-44dc-96d4-b4f7e173fd18_Best%2BTools.png?auto=compress,format

You will need to speak with your web developer to have them take a look and see why your URL cannot be encoded properly. We are not able to fix that on our end. Unfortunately, we do not have any workarounds we can provide for you for this. So if you are not able to speak with your web developer to take a look and make changes, we just are not able to pull the image. We also cannot manually add an image to your post on your behalf.

1 Like
17

OK, I’m guessing they’re aware of this issue then. It’s not the first time we’ve seen problems with how Linkedin handles images.

The only workaround I can think of is something like:

This would allow you to create a local path for the image to get around the issue. I don't know what technology you're using though and I haven't tested this.

20

I wrote an extensive article about this (and included Shyamal's communication with Linkedin)

1 Like
21

In our case the image was not showing on LI when the image file name had whitespaces i.e my first blog image while myFirstBlogImage would work.

Is there a way to manipulate the file name, to remove whitespaces (and potentially special characters, which I haven't test but it could cause the same issue) when an image is uploaded ?