LinkedIn Featured Link Preview Images Not Showing Up?? Try this.
Are you a React developer with a few projects that you want to show off on LinkedIn? Have you tried to simply type in your link and are met with this empty grey box?
This is what happened to me, and I didn’t completely understand what to do after reading through LinkedIn’s recommendations.
My projects were all based in React, so I’m going to show how I went about solving the problem through that library.
After I deployed my project, a public file was built containing the index.html, manifest.json, 🤖s.txt, etc.
*more on svg favicons here if interested.
We’re going to focus on the index.html file.
Add this prefix attribute in your html:
<html lang="en" prefix="og: http://ogp.me/ns#">Here’s a great explanation of the prefix tag and why it is relevant.
Also, add these 5 meta tags:
<meta
property="og:title"
content="Example Title"
/><meta
name="image"
property="og:image"
content="%PUBLIC_URL%/example.png"
/><meta
name="author"
content="Example Author"
/><meta
property="og:description"
content=”Example Description“
/><meta
property="og:url"
content="https://example.com"
/>
My method for adding an image was to simply take a screenshot of my project, add that screenshot to my public folder, and then reference it in my og: image meta tag section using the %PUBLIC_URL% method, just like how a favicon is linked:
%PUBLIC_URL%/scott.pngOnce you have all of these meta tags and prefix to ogp.me in place, you should be ready to redeploy your project.
At this point, you could go straight to LinkedIn and attempt to link your shiny new website with an image attached, however, this did not immediately work in my situation.
LinkedIn caches link preview content for 7 days, so if you’ve already tried to link your url before adding the new meta tags, you will be stuck until you follow these steps:
1: Go to https://www.linkedin.com/post-inspector/inspect/
2: Enter your url that you are hoping to see your new image. Make sure to put the full url with https://
3: If your new preview image appears on this page, you are in the clear to link on your LinkedIn page!
I hope you see your preview image after following these steps and feel the sigh of relief that I did!
Feel free to comment below if you have suggestions!
Make it so! 🚀🌀
