How to Use Open Graph Protocol to Improve Social Media Marketing

Published on December 16, 2014

Your blog game is top notch. You produce quality content at a consistent frequency, and you have great blog images to boot.

Unfortunately, when you go to share your blog, it pulls in the wrong thumbnail image (or, none at all). How frustrating!

Not only is this an aggravating setback, it can actually hurt your social media marketing success rate. According to Hubspot, images substantially boost user engagement on your content (read: likes, shares, favorites, comments). Posting content with an image on LinkedIn alone results in a 98% higher comment rate. That's something to write home about.

Of course, this also occurs with the right image. Cut-off images or your company logo just won't do the job you're looking for.

So, how can you make social media sites pull in the image you're looking for without too much hassle? Use the Open Graph Protocol, recently detailed by Hubspot.

So, what is the Open Graph Protocol?

Open Graph (OG) tags are your best liaison between your content and social media networks. Social media networks comb through your content looking for OG tags, which tell the social media networking sites what information should be pulled into their system.

Without OG tags, social media sites usually do a good job of pulling in page title, URL, and description, but will often pick the wrong accompanying image.

How to Use OG Tags

Facebook, Twitter, and LinkedIn can all be optimized using OG tags using a similar process. You will need to have access to the code which builds your site - if you don't, ask your web developer for help.

Here is the basic process:

Step 1: Optimize image sizing.

In all 3 cases, Facebook, Twitter, and LinkedIn prefer specific image sizes for optimization (and bigger is usually better):

Facebook: Optimal: 600 x 315 pixels (Minimum: 200 x 200 pixels, High-Resolution: 1200 x 630 pixels)

Twitter: No smaller than 60 x 60 pixels, less than 1 MB in file size

LinkedIn: Optimal: 180 x 110 pixels, or close to this aspect ration (Minimum: 80 x 150)

Step 2: Add Open Graph Tags.

You may notice that these sizes are quite differently, even contradictory, from one another. Luckily, you don't have to directly include these images in your blog, instead uploading and letting your OG tags do the work:

<meta property="og:image" content="image-180x110.jpg " /> 
<meta property="og:image:width" content="180" />
<meta property="og:image:height" content="110" />
<meta property="og:image" content="image-600x315.jpg " /> 
<meta property="og:image:width" content="600" />
<meta property="og:image:height" content="315" />

These tags are considered meta data, and will need to be added to the head section of the page where your blog post resides. How can you repeat the same meta tags (e.g. property="og:image" content...)? You just can. It seems Facebook and LinkedIn will sort it out, even though the tags are redundant and the direction is contradictory.

What about Twitter?

The Twitter game is a little different, with the addition of Twitter Card tags. Twitter Card tags are similar to Open Graph tags, pulling in title, image, URL, and short description like you'd see on Facebook. Here's the tag you add in at the top of the head section your blog post is on:

<meta name=”twitter:image” content=" http://example.com/picture.jpg”>

That's it!

Questions? Confused? We're happy to help! Shoot us an email, and we'll assist you.