How to Set the Social Image That Expands from Your Website Link

If you’ve just shared your website with someone else, or on a social media platform, and been disappointed that the link didn’t expand, it’s an easy fix to make your links more appealing and improve SEO.

It’s Set with an Open Graph Meta Tag

If you share a website link on most social platforms or direct messaging, it will auto-expand with a fancy image, title, and tagline, like so:

This is set with a meta tag, called og:image, and also og:title and og:description. This whole system is called the Open Graph protocol, which most social sites support. You can read more about it here.

The important part is how you set it. It’s just a couple meta tags:

<meta property="og:image" content="https://i.imgur.com/imagelink.jpg">
<meta property="og:title" content="Website Title" />
<meta property="og:description" content="Website Description" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://example.com/" />

Twitter will recognize Open Graph tags, but also has their own:

<meta name="twitter:title" content="Website Title">
<meta name="twitter:description" content="Website Description">
<meta name="twitter:image" content="https://i.imgur.com/imagelink.jpg">

Facebook has a great tool you can use to debug these links, so you don’t have to send it to yourself a billion times.