Increase Your Social Impact with OpenGraph – An Introduction

by • March 6, 2014 • Experts Talk, FacebookComments Off on Increase Your Social Impact with OpenGraph – An Introduction5258

OpenGraph is an API specifically designed to create rich stories and snippets on Facebook. OpenGraph is a way for your mobile application and web content to be displayed within rich forms and contextual data on the social network. OpenGraph extends much further into the depths of the NewsFeed and is a key indicator of how your story can spread.

Please note that this is a technical article for websites that requires basic coding skills.

Also Read: Top 5 Retweeted Tweets in History

In relative cases, OpenGraph functions split between two common forms: your app and web content. As such, OpenGraph is a set of guide rules to help better translate web content to social. In this article, you will be introduced to the main OpenGraph functions and learn how to control the occurring translation with customized elements.

If you have a website or a blog, you should set OpenGraph rules to maximize social results.

What OpenGraph Means

Translating web content into social stories, or snippets is pretty much an automated process done throughout the web. By including OpenGraph rules within your web content you can control which elements are shared on social media, from the post’s picture to the canonical link and your name.

When a person shares your content through a like button or share function, your web content turns into social material, in accordance with OpenGraph rules – when those are not specified, the content generated is random. OpenGraph for web can be used effectively on all websites, from a static website page to a blog post.

In this article, we will show you how to enrich your web content by adding only the basic functions of OpenGraph, for now, and of course, how to customize each element and social content.

Note: If you have purchased an already set up template for your website, we avoid tampering with it, unless, of course, you know exactly what you are doing. Of course, we are more than happy to help – use the comment section for questions!

How OpenGraph works

This is how OpenGraph works when a user shares through the like button:

share-one

This how is the content looks on the user’s profile on Facebook, if they add a caption.

share-two

Last, but not least, this is how your web content will be translated into social content with the right OpenGraph rules. These rules involve the basic functions which you can add on your website to control how your content is shared.

share-three

Let’s set the basic OpenGraph rules to control the elements depicted above in captions.

Adding OpenGraph Rules

We now have to dig into the code of your website. We need to look for the <head></head> section of the code. It is located on the top part and contains vital information for your website’s presence. Copy the following code snippet and place it just before the end of the head section.

Right above the closing tag </head>.

< meta property="og:title" content="" />
< meta property="og:type" content="" />
< meta property="og:image" content="" />
< meta property="og:url" content="" />
< meta property="og:description" content="" />
< meta property="og:site_name" content="" />
 

The rules are simple and customization is easy:

Page Title

To tell Facebook what the title of the page is you need to use the meta tag og:title, this will appear at the top of the post on Facebook. For example:

< meta property="og:title" content="My Website Name" />

Post Image

You can set an image to use as the post image on Facebook by using the image meta tag. If your page is static, use a picture of  377×197  in .jpeg format, with a recommended original size of 1200×627 (metrics are in pixels). For more information on sizes and recommended formats for Facebook, check out The Ultimate Image Size Guide for Facebook. You need an http link here.

Leave this tag blank if your content is a blog post.

< meta property="og:image" content="http://www.example.com/images/example.jpg" />

Post URL

To set the URL for the shared link. This will be the link that will be placed on Facebook when your content is shared. Leave this tag empty if your content is a blog post.

< meta property="og:url" content="http://www.wersm.com" />

Post Description

Set the description of your content.

< meta property="og:description" content="I can spend a hundred years writing." />

Site Name

Add the name of your site.

< meta property="og:site_name" content="WeAreSocialMedia" />

Leave og:type clear. We will talk about post types and the debugger tool on our next OpenGraph post, including specifications for bloggers and dynamic content.

Use the comment section below for any questions. We are more than happy to help!

Related Stories:

Sources:

  1. Facebook OpenGraph Documentation (source)
  2. OG Types Reference (source)



Comments are closed.