How to pop out in Social Media with your links.

07 Oct 2013
| Last update: 05 Dec 2014

You’ve seen them. I’ve seen them. It’s all over social media

It’s the new Facebook way of delivering content. And so far it’s gaining a lot of traction. What’s even more surprising is that the sky isn’t falling.

People usually dislike change. Especially design changes. Last time Facebook did their page overhaul, all the web was flooded with negative feedback.

I have yet to hear anything about the new way Facebook displays links. Anything. It probably has something to do with the fact that outside of a circle of very attentive to detail people this change has gone unnoticed.

That’s not to be viewed as a bad thing. Lack of recognition means blending in. It means no red flags have gotten off in peoples heads. Red flags in social media is a bad thing. It puts users in a defensive position.

The Open-Graph protocol

“The Open-Graph protocol enables any website to become a rich object in a social graph. For instance, this is used on Facebook to allow any web page to have the same functionality as any other object on Facebook.” – Opg.me

Social Graph is basically another name for Social Network. A map encompassing all it’s users interactions on social media. In principle it tracks all your interactions as a user and tries to provide you with the best outcome.

A rich object is basically an element (your  website) that presents the same attributes as any object that is proprietary of Facebook. It allows for seamlessly integrating your webpage into the News Feed so that you get a better representation of your content.

Wake up with new leads from the content you publish.

 

Of course Facebook is already sort of integrating your links. If you paste a URL in your status box you’re at least getting a title, a thumbnail, and a short snippet of text relevant to that link.

It’s what goes on under the hood that will make you see Facebook with a fresh pair of eyes.

The second you paste a URL in your status box Facebook starts searching for that page. It finds the page and it reads it. Well not out loud. It reads the meta-tag that provide the image, title and a short snippet that gets shown in the post you’re sharing. Meta-tags provide information relevant to search engines. There are 5 attributes: content, http-equiv, name, scheme and charset. Only one of them is relevant to this article and that is content.

You most likely had your share of posts with links that were displayed nakedly. No title, no image, no text. Just an ugly looking long string of numbers and letters. And you most likely weren’t to pleased of the way it looked. That was because Facebook couldn’t find any attributes of the content meta-tag to help it read the article.

You also haven’t seen any of those type of links in a long time. It’s a testimony that there’s a lot going on at Facebook to improve the user experience. It’s also a testimony that the technologies are standardizing more and more.

That was the old way of integration in Facebook. The new way, courtesy of Open Graph, lets you tell Facebook how you want to integrate your link.

How to communicate in the same language

At first there was the internet. Then came Google and changed everything. Then came Facebook and changed everything again with the way you we’re presented with new content. Google used to show you what you were searching. Facebook shows you what it believes you might be interested in. That and what your friends spam the news feed with.

Small Social Media Share

You ought to remember this layout. It’s still widely used. A small image on the left, barely visible. A nice thick text that transports you to the linked page. And a small description box doing exactly what a description box should do.
 

What it does:
• It offers you a preview
• It kinda draws attention
• It allows you to reach that webpage
• It gets buried the second it’s posted alongside hundred of other posts
What it doesn’t do:
• It doesn’t stick around the news feed for too long
• It draws too little attention
• It doesn’t offer enough information
• It doesn’t drive distribution
Without the use of Open-Graph the Facebook crawler takes just the basics of your content to share and doesn’t allow targeting audience and proper distribution. All the distribution you’re getting is from posts of your link.
Large Social Media ShareLook at your old post. Now back to the new one. Now back to your old post. Now back to this. Sadly your old post is the subject of history books covering the Cretaceous period. Before covering just how easily is to implement the lines necessary for Facebook to do it’s magic lets see what are the benefits.
What it does:
• It offers you a large, clean preview
• Due to its size it differentiates itself from other posts  thus drawing more attention
• Having an image at the top draws attention even more towards the description
• It draws distribution
What it doesn’t do:
• It’s there but it’s not being intrusive
• It doesn’t require a Super Saiyan programmer or Social Media engineer to implement the little code required.
It’s the second time you hear about distribution. In my opinion it’s the most important feature of the Open-Graph. You’re basically getting insight about your links and allows the links to be indexed properly thus improving your SEO even more. It’s similar to how your Google+ posts increase your visibility on the search engine.

The 9 tags that will make you popular again

9 tags, one condition. The condition is that you need to put them in the header of your page.

og:title – Pretty self-explanatory. You put your article title here.

Example:

<meta property=”og:title” content=”Tom Clancy dies at 66″>

og:site_name – Your website’s name.

Example:

<meta property=”og:site_name” content=”Just another news website”>

og:url – The pages URL. Note that this acts like a identifier for Facebook’s crawler so having the canonical URL allows you to track your links progress in Insight.

Example:

<meta property=”og:url” content=”www.anothergenericwebsite.com/2013/10/12/George-R-R-Martin-turns-66-next-year”>

og:description – A short description about the linked content. Think of it as a google snippet.

Example:

<meta property=”og:description” content=”Tom Clancy, a writer who was as famed for what Stephen King called his “monster advances” as his wildly popular thrillers, including The Hunt for Red October and Patriot Games, has died in hospital in Baltimore at the age of 66″>

og:image – The image associated with your article. The new Facebook link preview has a image box of 398×208. Its obligatory that your image is .JPEG and has a size of at least 200×200. For the best results your image should have a ratio of 1.91:1 otherwise Facebook will crop it or even worse revert to a less visible link preview like the one below.

Medium Social Media Share

Example:

<meta property=”og:image” content=”www.anothergenericwebsite.com/wpcontent/uploads/2013/10/Tom_Clancy_headshot.jpg”>

fb:app_id – The unique ID that lets Facebook know the identity of your site. This is crucial for Facebook Insights to work properly. Here’s a link to their documentation in case you want to learn more.

Example:

<meta property=”fb:app_id” content=”[FB_APP_ID]”>

og:type – Specifies the type of media you’re linking. In our case it’s an article.

Example:

<meta property=”og:type” content=”Article”>

article:author – Links to the author of the article. It can link to either his Facebook Profile or Facebook Page. This allows for expanding the current follower base of the author.

Example:

<meta property=”article:author” content=”https://www.facebook.com/everydayjoefacebookuser“>

article:publisher – Same as the author function, allows to link to the publisher of the article. This function is only available to media publishers

Example:

<meta property=”article:publisher” content=”https://www.facebook.com/Bigimportantmediaoutlet“>

These are the basics that will offer you the Social Media boost you’ve been lacking lately.

If you want to go even further with Open-Graph Opg.me  has a list of all the currently available meta-tags supported by Facebook.

And lastly Facebook provides this awesome debugger that signals any wrong doings in the code and refreshes the servers caches of the page link you’re troubleshooting.

 

Alexandru Coroiu

Alexandru Coroiu

Content Creator at Squirrly.co
Has a love-hate relationship with Google
Once tried to steal Iron Squirrel's suite just to realize it's too small for him
Owner of Oglinda Obscura
Alexandru Coroiu

Comments

Enter to Win Licenses for Content Marketing Tools and Books from Neil Patel and Pat Flynn

x