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