An adventure learning Open Graph

Published: 29 Jan 2023
I mostly figured this out to look cool when I post links to discord

I have always wondered how to have your website leave those cool card previews when sharing out links on slack, twitter, or discord. I had a vague memory of something called open graph being talked about on a discord I frequent. It took me a bit of digging around on google before I found the Open Graph website.

Turns out, it just takes a few html meta tags:

<meta property='og:type' content='website' />
<meta property='og:url' content='https://example.com' />
<meta property='og:title' content='Page Title' />
<meta property='og:description' content='Page Description' />
<meta property='og:image' content='https://example.com/image.png' />
<meta property="og:image:alt" content="image alt text" />

After I finished gleefully posting my website to as many places as I could I realized most sites did exactly what I wanted, but some still had a smaller image than I would have preferred.

For example, on discord my links came out like this:

Overall, I was happy with this and went to bed with a nice feeling of accomplishment.

After sleeping on it though, I really wanted the big pretty cards that I’ve seen from many of my online friends to show up everywhere. I did some more digging and figured out I needed to add the twitter card meta tags which turned out to be twogit more meta tags. While I probably don’t strictly need the twitter:creator tag I figured I would add it on the off chance I start posting content there.

<meta property='twitter:card' content='summary_large_image' />
<meta property='twitter:creator' content='@solenberg' />

This had exactly the result I wanted to see:

Overall this is a pretty small thing, but its always a big win to solve a problem. Even when it’s just two lines of code.

Written by: R.James Solenberg