Pecularities of LinkedIn Open Graph Images

I had some issues with my open graph images not show up correctly when shared on LinkedIn, even though they appeared correctly when shared on Twitter and Facebook.

As a starting point of reference, here is an example of a problematic URL that I was using in my open graph image:

1https://www.robertcooper.me/api/og-image/Building%20with%20feature%20flags?readTime=6

Now here are the two issues to be aware of that are related with the above LinkedIn URL that was shared:

1. Make sure the URL doesn't have any redirects

My open graph image URL was referencing www.robertcooper.me which actually redirects to robertcooper.me. LinkedIn will not display your open graph image correctly if the URL redirects to another domain.

2. Make sure the URL ends with an image file extension (e.g. .jpg or .png)

LinkedIn requires that the open graph URL end in an image file extension in order to be able to display the image.


With the aforementioned changes, the final corrected URL looks as follows:

1https://robertcooper.me/api/og-image/Building%20with%20feature%20flags?readTime=6.png

And the corresponding HTML meta tag looks like this:

html
1<meta property="og:image" content="https://robertcooper.me/api/og-image/Building%20with%20feature%20flags?readTime=6.png">

Finally, here's how the open graph image should look like when shared on LinkedIn:

Open graph image for my feature flag blog article

Cheers 🥂



Robert Cooper's big ol' head

Hey, I'm Robert Cooper and I write articles related to web development. If you find these articles interesting, follow me on Twitter to get more bite-sized content related to web development.


Newsletter

Sign up to my newsletter if you like being disappointed.