Changing Your Website’s Preview Images on LinkedIn and other Social Media
So you finally finished that portfolio project and added it to your LinkedIn profile in the featured section, when you notice the preview image being displayed is not what you envisioned.
However, you are aware that there was no moment while you were creating this project in which you explicitly chose a preview image, so it doesn’t feel that shocking that LinkedIn doesn’t know what it should be either.
For me, this sad moment looked like this:
Luckily, there is a pretty easy fix for this.
Here’s the TL;DR version of how to specify a preview image for your website that will display on LinkedIn. You will need to:
1) take a screenshot or some other picture to serve as the preview image that you want to use
2) add this preview image to your project directory.
3) in the project’s index.html file, between the head tags, you will want to add a meta tag with a these two attributes: a) property=“og:image” and b) content=“path_to_your_preview_image”, like so:
<meta property=“og:image” content=“path_to_your_preview_image” />This is what it looks like in my React App:
This is what it looks like in my portfolio website, created with HTML5 Up:
For some background, this og:image property is an Open Graph property that we are adding. Open Graph protocol was developed by Facebook; you can read more about it here.
After I did this for my projects, I assumed that client side caching of the images would prevent me from seeing if I’d actually fixed this problem on LinkedIn. So I googled how to clear my cache for LinkedIn specifically, so that the rest of my browser’s cache wouldn’t be affected. I don’t know if this actually helped, but there’s a chance it may have, and more importantly, I think it’s nice to know how to clear you cache for a specific website, so here’s a link to a how to: How to Clear Chrome Cache for Specific Website Only (3 Steps)
After initially trying to clear the cache locally, I realized that besides client side caching, there is also server-side caching, and I think this is what is happening with LinkedIn preview images / the caching that Ananda Kannan is alluding to here in this post. So if I am correct here, you wouldn’t expect clearing your local cache to fix this. This Medium post has some nice diagrams showing these two types of caching: Cache Me Outside (oh, programmer puns).
So the next question is, if this image data is getting cached server side, can we do anything about it, or are we hosed? Ananda’s post provides a nice tool that I believe fixes this problem. I say believe here, because when I did this, it seems like I had to do it a couple of times before it “took”, but I believe this was the step that got my images displaying properly.
Using the LinkedIn post inspector, just copy-paste the URL of your website into the search bar, and click inspect. If I am reading Ananda’s post correctly, this should both show you what you website is showing the online world, and also trigger some sort of LinkedIn caching server refresh of your website’s data. At the very least, this will show you what your website is displaying to the world, and in the worst case scenario, if this doesn’t update LinkedIn’s caching server immediately, you can rest relatively easy since according to Ananda, “LinkedIn caches link preview content for 7 days,” so if it’s wrong it should update in 7 days or less.
SPECULATION/#maybeFAKENEWS/#notSureBuuuut:
If this doesn’t update immediately, you might also try clearing your LinkedIn local cache and refreshing the page, since I wouldn’t be surprised if your image data is also getting cached locally, so maybe both of these need to get updated. Again, I just say this because when I did this all, it didn’t seem to update immediately, but then after clearing things a couple times and refreshing, it “magically” started working.
To me network requests feel fairly complicated/prone to chaos/complexity, and I feel like I’ve heard that caching itself is one of the most complex computer science problems, so I think that might be partly to blame for why this process isn’t an entirely open and shut case. BUT, for me, after about 15 to 20 minutes of screwing around with this, it started working, and I think if you follow these steps, you can get the same results pretty easily. Hope this helps and be well!
PS When all was said and coded, my LinkedIn looked much more presentable:
