Open Graph for Personal Projects

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:

  1. og:title
  2. og:type
  3. og:image
  4. 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.

An example of what the URL looks like without The Open Graph protocols

I mean, I think this site it awesome, but it’s probably not grabbing anyone else’s attention.

This is how it looks now.

How the URL looks after including an image that I specified, title and description.

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.

Resources

Leave a comment

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.