An SSL Story: how to fix preview thumbnails not showing on Facebook and Twitter from your website pages

Image for post
Image for post
Freely-usable via Unsplash.

I have a website, and recently, when I went to Facebook to paste a link to a post from it, I was horrified to see that my post did not have a preview image.

I’ve seen this happen before. Sometimes, I would just backspace my link out and then paste it back in, and the thumbnail would re-appear. It didn’t.

No worries. I’ve seen that too. All I’ve had to do is go to the Facebook debugging tool. There, I could paste the link, and then then get the Facebook crawler to scrape the page again and hopefully pick up the image.

This time, though, it didn’t work.

Image for post
Image for post

I looked around the page more to see what was going on, and then I saw a true monstrosity.

Image for post
Image for post

SSL issues? That’s not great.

How to fix this annoying issue

So immediately, you’re going to want to make sure your SSL set-up on your site is fine. SSLShopper’s SSLChecker is one. This SSL Server Test is another. DigiCert has one called the SSL Installation Diagnostic Tool.

Honestly, put your website in them all. Get all the info.

What I found is that every single one told me that my client certificate chain was broken. I had a server certificate installed (which allowed users to access my site via https), but unknown to me, my intermediate certificate wasn’t in place.

Here’s a very useful resource for understanding certificate chains. From the link:

If the Intermediate Certificate is not installed on the server (where the SSL certificate is installed) it may prevent some browsers, mobile devices, applications, etc. from trusting the SSL certificate. In order to make the SSL certificate compatible with all clients, it is necessary that the Intermediate Certificate be installed.

This isn’t the best security-wise, and some browsers may straight-up not like it. It’s something you want to fix, especially because I’m assuming you paid for your SSL certificates and want to use them correctly.

What I did

So I discovered this issue around 2 A.M. one night as I was working on my site. I felt so bothered by this issue that I stayed up an extra hour to fix it. I decided to go the route of re-issuing my SSL certificates entirely and then re-installing them.

I use Namecheap, so I followed these instructions. In a nutshell, I had to do the following:

  • Generate a new CSR/RSA pair. Instructions here. Make sure you have a text editor or something to copy and paste these to or just keep careful track of where you save them on your file system. Losing a private key is a real pain because you’re going to need it during the set-up
  • I had to click a button to re-issue my SSL certificate; this is just how Namecheap does it. For your host, you will have to look up how to re-issue them. It should be free for most providers (I’d think) and not too painful. It asked me to verify with my site’s admin address, which I did. Then, I got the certificate e-mailed to my personal e-mail
  • Go to your website host (I’m using EasyWP, which has a simple wizard to install a SSL certificate) and then insert 1) your CSR; 2) your private key; and 3) your CA Bundle. Your CA bundle contains the root and intermediate certificates. I don’t know if I entered this incorrectly when I re-newed my SSL certificate, but I made sure I got it right this time

Try the SSL tools again

If everything worked, then try the tools. It should say your chain is fine again. It did for me — thank goodness.

The results

Image for post
Image for post

Absolute serenity.

Full-time software engineer since 2016. UCLA Computer Science B.S. with Atmospheric and Oceanic Sciences minor, class of ‘16.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store