Open Graph for Personal Projects
Tags: html, tutorial, beginners, webdev
Published: 2020-11-29 04:02:56

---
title: Open Graph for Personal Projects
published: true
date: 2020-11-08 23:47:24 UTC
tags: html, tutorial, beginners, webdev
canonical_url: https://shannoncrabill.com/blog/open-graph/
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/gkdspva10vhim60nt4cy.png
---

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](https://buffer.com/resources/the-power-of-twitters-new-expanded-images-and-how-to-make-the-most-of-it/). 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](https://ogp.me/).

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 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 `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](https://ogp.me/#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](https://halloweenti.me/) project as an example, my 4 meta tags look something like this.

```html
<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.

![](https://i0.wp.com/shannoncrabill.com/blog/wp-content/uploads/2020/11/before.png?resize=493%2C67&ssl=1)<figcaption>An example of what the URL looks like without The Open Graph protocols</figcaption>

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

This is how it looks now.

![](https://i0.wp.com/shannoncrabill.com/blog/wp-content/uploads/2020/11/after.png?resize=428%2C383&ssl=1)<figcaption>How the URL looks after including an image that I specified, title and description.</figcaption>

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

- [50 Visual Content Marketing Statistics You Should Know in 2020](https://blog.hubspot.com/marketing/visual-content-marketing-strategy)
- [How Twitter’s Expanded Images Increase Clicks, Retweets and Favorites [New Data]](https://buffer.com/resources/the-power-of-twitters-new-expanded-images-and-how-to-make-the-most-of-it/)
- [Preview and Generate Open Graph Meta Tags](https://www.opengraph.xyz/)
- [The Open Graph protocol](https://ogp.me/)
- [Social Media Preview Images for Your GitHub Projects](https://dev.to/scrabill/social-media-preview-images-for-your-github-projects-4m04-temp-slug-6717962)

The post [Open Graph for Personal Projects](https://shannoncrabill.com/blog/open-graph/) appeared first on [Shannon Crabill — Front End Software Engineer](https://shannoncrabill.com/blog).