How to customize a website's social media preview?

Hello,

I published a website (Crash Data Visualization Using Leaflet) using Netlify and was wondering how I can add an image that will serve as my website’s social media preview when I share it on Facebook, LinkedIn, etc.

Thanks!

@Ashirwad Welcome to the Netlify community.

I think what you want is the Open Graph meta descriptors:

The Open Graph protocol - https://ogp.me/

Hey @gregraven, thanks for your response! I have added the following snippet to my website:

But when I use Facebook’s Sharing Debugger tool and select the option See exactly what our scraper sees for your URL, it seems Netlify is not injecting the snippet! Do you know how I can fix this?

@Ashirwad No, I’ve never seen snippet injection fail. However, you have to re-build your site AFTER defining your snippets. Snippets are not retroactive.

If you care about your Twitter presence, there are separate meta tags to control that, including:

<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@individual">
<meta name="twitter:creator" content="@individual_account">
<meta name="twitter:url" content="https://www.example.com">
<meta name="twitter:title" content="Title">
<meta name="twitter:description" content="Main website">
<meta name="twitter:image" content="/apple-touch-icon.png">

If you did rebuild your site after adding the snippet, you might try deleting the snippet and re-adding it, then doing another rebuild.