link expand preview

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:

another link expand

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="">
<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="" />

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="">

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.

Profile Photo for Anthony Heddings Anthony Heddings
Anthony Heddings is the resident cloud engineer for LifeSavvy Media, a technical writer, programmer, and an expert at Amazon's AWS platform. He's written hundreds of articles for How-To Geek and CloudSavvy IT that have been read millions of times.
Read Full Bio »