Content marketers create lots of content on their websites.
But with no audience, your content is like a gun without bullets.
So, what’s the first thing which comes in your mind when you like to reach a broader audience with your awesome new post?
Sharing on social media, of course. The huge audiences of Facebook and Twitter make them the best platforms for sharing, but do you know how to optimize that outreach potential?
How to attract more audience?
Why Open Graph?
Facebook introduced Open Graph in 2010. It promotes integration between Facebook and other websites by allowing them to become rich “graph” objects with the same functionality as other Facebook objects.
Yeah, it is little technical.
Let’s forget it.
Come to the point.
Have you ever shared a link on Facebook only to find that the thumbnail was missing, or there was a totally different picture than you expected?
If Yes? this post is for you only.
You can see my post “5 Amazing Tools on Internet Everyone Should Know“. When I posted the link of this post, It appears in the beautiful thumbnail.
This is because of Open Graph (og) tool.
Let’s understand from the basic.
Code that you should put into your head section.
<head> <meta property="og:title" content="5 Amazing tools on internet..." /> <meta property="og:type" content="blog post" /> <meta property="og:url" content="http://tahirahmad.in/technology/5-amazing..." /> <meta property="og:image" content="http://tahirahmad.in/images/amazing.jpg" /> ... </head>
Let’s understand one by one.
As you might guess, this is how you define your content’s title. It serves a similar purpose as the traditional meta title tag in your code. In fact, if Facebook doesn’t find the og: title tag on your page, it uses the meta title instead.
Keep in mind that the text shown on a Facebook feed is in bold and extremely eye-catching. It must be compelling, just like a good post title.
There is no limit on the number of characters, but it’s best to stay between 60 and 90. If your title is longer than 100 characters, Facebook will truncate it to only 88!
<meta property=”og:title” content=”Your eye-catching title here” />
This is how you set the canonical URL for the page you are sharing. What this means is that you define one page that all your shares will go to. It’s useful if you happen to have more than one URL for the same content (for example, using parameters). Important note: URL provided is not shown on the Facebook newsfeed, only domain is visible.
<meta property=”og:url” content=”http://www.yourdomain.com” />
Not only this, but it also helps in showing your content beautifully on search engines such as google.
This is how you describe the kind of object you are sharing: blog post, video, picture, or whatever. The list to choose from is long.
<meta property=”og:type” content=”website” />
This meta data descriptor is very similar to the meta description tag in HTML. This is where you describe your content, but instead of it showing on a search engine results page, it shows below the link title on Facebook.
Unlike a regular meta description tag, it won’t affect your SEO. (So, don’t spend too much time figuring out how to sneak in keywords.) However, it’s a good idea to make it compelling because you want people to click on it.
You are not limited to a character count, but it’s best to use around 200 letters. In some cases, depending on a link/title/domain, Facebook can display up to 300 characters, but I suggest treating anything above 200 as something extra.
<meta property=”og:description” content=”Your entertaining and descriptive copy here, if your meta description is good, use it.” />
This is the most interesting Open Graph tag for many marketers, because a picture always helps content stand out. This is how you ensure that a particular thumbnail will be shown when your page is shared. It can be very helpful for your conversion rates.
Make sure you set the og:image you choose, otherwise Facebook will show something stupid like an unwanted ad banner scraped from the page, or nothing at all. We definitely don’t want that!
<meta property=”og:image” content=”http://www.yourdomain.com/image-name.jpg” />
This is all about Open Graphs.
If you are developing your website or content using PHP, Node.js or other web development frameworks you can use above-mentioned code. You can also visit the official Facebook open graph website for more help.
If you are creating your content on WordPress or other CMS platforms, You can use the Yoast SEO plugin which will automatically deal with Open Graph tools.