The real OG…Open Graph tags!

I really mean Open Graph tags!

What are OG tags and how can they help me when I share my applications on social media platforms? I’m here to tell you! Recently as I’ve grown as a developer, its becoming more of a regular occurrence for me to deploy my applications(I’ve been using Heroku to deploy my apps). It’s the best way to get real life practice with your applications…because in the professional world everyone will be using your apps, not just you! Plus, who doesn’t want to show off all their countless hours of coding and hard work?!? The best way to show off is by using social media platforms by posting your link for others to access your app. Without OG tags that link would look something like this…

The link is there for others to access, but it doesn’t really stand out

This isn’t bad, but it doesn’t really say, “hey check me out..click me!..I’m probably a pretty cool app!”..This can be fixed very easily in about 5 mins using OG tags! OG stands for Open graph tags. Here is the official documentation for OG tags. There are a bunch of different properties we can manipulate, but we are going to focus on 4: Title, description, image, and type.

There is a little bit of preparation to complete real quick, before coding the tags in the head of our index.html. We have to host our image online that is going to be displayed with our app. I used a free image hosting site such as https://imgbb.com/ …You can quickly upload an image, and you’re given a unique url to access your image. I like to take a screenshot of my home page on my app, but you can use whatever image you like!

This is a screenshot of my home page on my app

Click to upload your image. Select your desired file. You can adjust it if necessary before posting. Choose never delete.

Make sure the embed codes is set to HTML full linked. We want the url that is set to the src of the img. In our case it would be,

https://i.ibb.co/X2bLr95/Screen-Shot-2020-07-08-at-10-22-22-AM.png

You should be to access this image by posting the url in your browser.

It this works..you’re good to go!

Now its time to write our OG tags. We will write these tags in the head of our index.html.

This is our current head

Now we will write the 4 tags using the provided documentation, and they will look like such:

The title will be the header or title of our app. Description is a short statement about our app. Type is the type of content, and image is the picture that will be displayed with our app. Type isn’t necessary, but I like to include it with my tags. Since my app is deployed, I’ll go ahead and push up these updates. If you’re unsure what I mean..I’m going to:

git add .

git commit -m “OG tags added”

git push heroku master

Now we can use an OG Tag checker to ensure our tags can be read properly. Click the link to follow. Once here we will post the link to our app like so..

Now just click show the tags! This is what the results should look like

As you can see the type didn’t show, but thats ok! It won’t affect anything we are doing

Everything is rendered just as we wrote it. This is exactly what we want, and now we can try to share our newly updated app! It may take a minute to update, so don’t freak out if it isn’t showing yet. Here is how it will be displayed on a few different apps..

on Slack..

on Text messages..

And for LinkedIn we can use their personal post inspector and hopefully we get a result like this..

So now if we share our app, people will see more than a link. It’s almost like advertising your app to others! If we try to make a post about it now..

This is way better than what we started with! I hope this helps your applications stand out on social media platforms, and you enjoyed my article. I use OG tags on all my applications since I learned about them!

Full Stack Software Engineer