A way to make your posts stand out on social media is to include images. According to Buffer, Tweets with images can get up to 150% more retweets. So it makes sense to include some kind of visual element instead of dropping a link and calling it a day.
For a long time, I wondered how some links I would share would automatically get nicely formatted images, headlines and links. Was it possible to implement something like that on my projects so that I automate and improve the link-sharing experience?
Yes!
This functionality can be implemented using The Open Graph protocol.
I’ll walk through how I step it up on one of my projects.
Implementing Open Graph
The introduction says it well. In describing the Open Graph protocol, it says:
The Open Graph protocol enables any web page to become a rich object in a social graph.
The graph it refers to is an object that is created by including basic metadata tags in your webpage.
Your website most probably has metadata tags like <meta charset="UTF-8"> or <meta name="viewport" content="width=device-width, initial-scale=1.0">. The Open Graph tags use the same, self-closing <meta /> tag structure with some additions. Each Open Graph meta tag has a property and content attributes. The property attribute, describes or categorizes the value in the content attribute.
For Open Graph to work, there are 4 required properties for each webpage.
Those properties are:
- og:title
- og:type
- og:image
- og:url
Detailed descriptions of these tags can be found in the Basic Metadata section of the documentation. But, they make up the core elements of those media-rich posts that we see on our Twitter and Facebook feeds.
Using my Halloweenti.me project as an example, my 4 meta tags look something like this.
<meta property="og:title" content="How Many Days Until Halloween?" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://halloweenti.me/" />
<meta property="og:image" content="https://halloweenti.me/my-image.jpg" />
Once my HTML file is pushed live, sharing the link to halloweenti.me automatically renders the image that I specified along with a title and URL to the website.
Looking Nice
Prior to adding Open Graph, sharing the https://halloweenti.me/ link in Discord looked like this.
I mean, I think this site it awesome, but it’s probably not grabbing anyone else’s attention.
This is how it looks now.
Wow! That is easier to see and gives more context to a user who is just scrolling by. You can also see how the 4 required properties show up in the social media preview.
Conclusion
What I like about The Open Graph Protocol is that it’s relatively easy to implement and there are additional meta tags that can be added for richer content examples. I included a description for my project, but there are tags that are relevent for dated content like blog posts are articles.
I reccomend giving The Open Graph protocol a try so that your projects can better stand out on social media.