Using Open Graph Protocol for Marketing
How to Optimize Blog Images for Social Sharing
Are you wondering how to make your content more clickable, shareable, and noticeable on social media?
Open Graph meta tags are the solution
We’ve all been there before. You’ve written a great blog post, and you’ve stuffed a featured image in there to represent the post on social media, your blog’s main page, and so on.
Then you get ready to share it on social media, paste the link into a new post. You’re about to share it with your entire network but there’s just one problem. Unfortunately, the social networks are pulling the wrong thumbnail image. Or worse, they’re pulling none at all, and this not only goes for the image. It could be your meta title, descriptions, headings etc. It’s a total nightmare!
Not only is this annoying — you were so close to being done — but a bad thumbnail image (or no thumbnail image) could seriously hurt your post’s performance on social. This perhaps will be your first impression of your post. Images are a key play for garnering engagement on your social pages, and data shows they help generate more likes, shares, and comments. But that image needs to be the right image — not your logo, not a cut-off picture of your call-to-action button, and not some other image randomly pulled from the page.
So, how do you ensure each of your social networks pulls in the image you want it to? The answer lies with something called the Open Graph Protocol.
Open Graph
Open Graph tags — they’re beautiful little things that are essential to any digital marketer’s toolkit. These guys make your content work harder and smarter, and they’re pretty easy to deal with, too.
Open graph is a protocol first created by Facebook in 2010 for extracting the title, images, URL, and meta-information from a web page and displaying it in a social media post. Today, Facebook, Twitter, and LinkedIn all use open graph protocol to help publishers include more content on the front of their social media posts.
If you’re not familiar with the Open Graph protocol, I’ll break it down: these tags are similar to title and meta description tags that we know and love so well from search, except they’re created specifically to help you optimize your content for social sharing. Just like search tags, Open Graph tags go right between the <head> tags on your site
How to use Open Graph Protocol
Marketers need open graph (OG) protocol if they want to post better-looking content on social media. But where does each social network find that information? That’s where open graph tags come in. When you put OG tags in the head section of a webpage, social networks have a much easier time finding the correct information for each part of the social post.
Open graph tags are the specific pieces of information that publishers can insert into their web pages so social networks know which site attributes to pull into the social media post. Some CMS’s include meta tags automatically, while other websites need you to add them manually through the page’s HTML.
There are lots of Open Graph properties, but you can cover a lot of ground with just these four basics from the Open Graph protocol:
- og:title — The title of your object as it should appear within the graph, e.g., “The Rock.”
- og:type — The type of your object, e.g., “video.movie”. Depending on the type you specify, other properties may also be required.
- og:image — An image URL which should represent your object within the graph.
- og:url — The canonical URL of your object that will be used as its permanent ID in the graph, e.g., “http://www.imdb.com/title/tt0117500/“.
Depending on the type of media you’re posting — image, video, infographic, or just text — you might find a need for other OG tags as well to further customize the OG that appears on your social media feed once you post your content. Here are a few of them:
- “og:image:width” — This OG tag is nested within the image tag, allowing you to define the specific width of your feature image in your social media post.
- “og:image:height” — This tag is nested within the image tag, allowing you to define the specific height of your feature image. We’ll talk more about recommended image sizes for each social network in the next section.
- “og:article” — This tag lets the social network know your post is an article, and there are several other tags you can nest inside this one to further promote the article in your social media post.
- “og:article:author” — This tag is nested within the article tag, allowing you to promote the author (or the byline) of the article in your social media post.
- “og:audio” — This tag allows you to promote and describe a playable audio file in your social media post.
- “og:video” — This tag allows you to promote and describe a playable video in your social media post.
- “og:video:series” — This tag is nested within the video tag, allowing you to promote and define a video series if your video belongs to a larger video campaign.
- “og:type” — This specifies the type of content that social media post is expecting to create. (For example, type=website or type=article)
The list goes on…
How to add the Open Graph tags
If your page is static and you don’t use a CMS you’ll need to manually add OG tags to each of the pages your blog posts are on. The tags are meta data, so you need to add them to the head section of the page your blog post is on. (If you don’t manage the code on your site, you’ll need to ask your web developer for help.)
Open graph image sizes
Although your images look similar when posted to Facebook, Twitter, and LinkedIn, each social network’s open graph protocol has its own minimum image size requirements. Facebook, for example, recommends using images that are 1200 x 630.
Wrapping up
The hardest part of selling anything is getting people interested. That’s why every point of interaction is so important. When you’re working hard to get your content, products, and services noticed, you can’t let something like a misformatted link undo all of your hard-earned progress.
Here are some tools to help you get started with Open Graph tags.
Happy optimizing!
- The Open Graph Protocol breaks down all the elements of Open Graph tags
- This Open Graph tag tester will let you double-check your site’s tags before you set it out into the wild for sharing
