Make Your Blog Posts Shareable with OpenGraph Meta Tags

This blog is written in a Ruby tool called Middleman. I noticed that when trying to share one of my posts on social media, it doesn't format as nicely as sharing articles from other big media sites.

Bad social media share link
How one of my blog articles looked when I tried to share
Msm social media link example
What a nicely formatted blog post share looks like
Corrected social media link
What a nicely formatted blog post share looks like

Facebook OpenGraph Tags

I found out that Facebook invented a meta tag standard called OpenGraph which allows you to specify how your blog post will display when shared on Facebook. Many other social media sites like LinkedIn and Twitter read the same tags.

I was able to fix my blog post display by adding the following meta tags to the <head> section of each web page.

<head>
  <meta content='http://www.winstonkotzan.com/2019/03/09/production-https-setup-for-ruby-on-rails-app-with-docker.html' property='og:url'>
  <meta content='article' property='og:type'>
  <meta content='Human Readable Title of the Blog Post' property='og:title'>
  <meta content="Short description of my blog post." property='og:description'>
  <meta content='https://my-blog-url.com/link/to/image-to-display.png' property='og:image'>
  <meta content="Same as the og:description value above" name='twitter:card'>
</head>

Facebook also has a debugger tool that can help you validate your HTML meta tag markup.

Corrected social media link
Facebook debugger tool

Additional Resources:

  1. Facebook OpenGraph Docs
  2. Facebook OpenGraph Debugger
  3. Twitter