Halloween is the one night of the year when everyone gets to dress up in stuff they would never normally wear and parade around town. And doesn’t it seem like it’s much easier to approach someone and have a conversation when that person is dressed as a fluffy bear wearing a tutu?
As it turns out, the same principle applies to our Facebook and LinkedIn shares. If we trick them out in a sweet costume, people may be more likely to interact with them. Fortunately, Facebook and LinkedIn allow us to do just that.
Ever noticed how every link you enter into Facebook gets structured into a post with a title, an image, the URL and a description? This convenient little process is called the Open Graph Protocol, and it was launched by Facebook in 2010 as a means of standardizing how all the different types of content across the web should be structured on social networking platforms. At the time of this writing in October 2013, LinkedIn also makes use of the Open Graph Protocol.
How it Works
When you post a link to your timeline in Facebook, the Open Graph Protocol goes out and scrapes the page you posted. It looks for a title, images, and a meta description. Then it uses that information to display your link on Facebook.
If you're hosting your blog on any of the major content management platforms, you may already see this Open Graph Protocol in action every time you post a link to one of your blog posts. But did you know you can set Open Graph tags on your pages so the OG Protocol pulls different information from the page?
This nifty little feature provides huge value, because it lets us customize the image that automatically displays every time anyone shares your page on the Social Graph. By using eye-catching images that offer a compelling call to action, we can boost engagement on our social shares.
Remember, because LinkedIn uses Facebook's Open Graph Protocol, this tip can be applied to both LinkedIn and Facebook.
Quick Note: I came across this strategy because I was trying to post a link to a landing page on LinkedIn. The image on the landing page was bigger than LinkedIn's maximum hero image size. Not wanting to post a link to LinkedIn without an image, I began to search for a solution to my problem with the help of our in-house web developer. The solution was in the Open Graph Protocol.
How to Set it Up
Step 1: Choose Content
First choose the blog post or website page you want to share on Facebook or LinkedIn. Next, upload the image you want to use in your post to your content management system.
In order to add an image to be displayed in Open Graph, you need to be able to upload images to your content management system. You should use an image that you think will A) resonate with your audience on Facebook and LinkedIn or B) standout from the blue and white color palette that dominates these sites. For example, try testing a big red arrow that says “CLICK HERE!”
My hypothesis: it will be more effective than no image at all.
Step 2: Optimize Content
You should be aware of the different requirements for image size Facebook and LinkedIn impose on shared pages. On Facebook, an image must be at least 200x200px for the Open Graph protocol to use it as the default image for a shared page. The image will then get downsized to 156x116px.
Linkedin is even more strict. The thumbnail to be displayed in the social graph needs to be exactly 180x110px. Any larger and LinkedIn won’t display the image at all.
Once you’ve uploaded your image to your content management system, you need to remember its associated URL. So copy and paste it to your notepad, write it down, leave the tab open - whatever it takes.
Step 3: Add Open Graph Tags
Now it’s time to start adding the Open Graph tags. The Open Graph tags are meta data, and should be added to the <head> section of your page. At first glance, the Open Graph tags may look complicated. They actually follow a very simple logic. You’ll be adding Open Graph tags and feeling like a web maestro in no time.
The tag you need to add to the <head> section of your page looks like this:
<meta property=“og:image” content=“http://example.com/picture.jpg” />
The example URL that comes in the “content” portion of the tag is the URL of your image.
Open Graph tags added to the <head> section of a page in HubSpot
That’s all you need to do! Now, when you post the link to your page on Facebook or LinkedIn, the Open Graph protocol will read this tag and display the image you pointed to.
A social share with Open Graph tags as it would appear on Facebook
Another Note: Facebook caches its shared pages. That means if you post the page and realize you messed up the tags, or you’ve previously posted the page without tags, you’ll need to run the URL through Facebook’s debugger.
For a more in-depth description of the Open Graph protocol and its uses, check out the Open Graph protocol website.
Zack Bridges (@z_bridges) is an Account Manager at OverGo Studio. He works closely with OverGo's clients to develop and execute marketing plans that help them attract visitors and convert leads online.
Originally published Oct 31, 2013 2:00:00 PM, updated January 18 2023