How to pop out in Social Media with your links

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.

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.

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.
 

Look 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.

og:site_name – Your website’s name.

Example:

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:

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

Example:

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.

Example:

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:

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

Example:

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:

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:

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.

IoanaBudai

Busy turning myself into a marketing whiz via Digital Marketing Superstars.