Oursky Code
  • AI
  • Auth
  • More from Oursky
    • Oursky Business Blog
    • GitHub
    • About Us
  • AI
  • Auth
  • More from Oursky
0
Subscribe
Oursky Code
Oursky Code
  • AI
  • Auth
  • More from Oursky
    • Oursky Business Blog
    • GitHub
    • About Us
  • Geek
  • Web

Basic Open Graph techniques that optimize shared links on Facebook

  • July 15, 2015
  • No comments
  • 3 minute read
  • David Ng
Total
0
Shares
0
0
0

Open Graph is a good standard, it helps turning a web page to become a rich object in a social graph.
If you follow the Open Graph protocol, most of the social platforms (Facebook, Reddit, etc. ) will crawl your website and present it in a nice and structured format.

A minimal open graph set-up requires these 4 tags:

  • og:title
  • og:type
  • og:url
  • og:image

To start with, implement Open Graph Tags as the followings:

<meta property="og:title" content="The Dancing Bananas" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://www.oursky.com/dancing-bananas" />
<meta property="og:image" content="http://www.oursky.com/dancing-bananas.png" />

Further optimizing the related Open Graph tags would be an advanced SEO skills for grow hackers.
An eye-catching and structured graph information will positively affect your post exposure.

Facebook with Open Graph

Facebook is one of the leading platform that strongly encourages the use of OG Tags.
On Facebook, you might already notice some shared links are displayed in different forms.

FOMR 1 – IMAGE Grid on left
small-og-image-sample
FORM2 – Top cover Image

large-og-image-sample

Research shows that a large cover image can positively affect the conversion rate of shared your post.
You might now want to ask, why do these two posts are presented so differently?
Ans: It’s all about how the Facebook Feed consider your og:image property.

If your image is smaller than 600 x 315 px, it will still display in the link page post, but the size will be much smaller.

Tips: If you want a great result on Retina display device (e.g. iPad air, MacBookPro), you should consider making an og:image with 1200 x 630px.

Nevertheless, Facebook is smart enough to crawl other images in your shared page if it does not specify a default og:image.

And here’s how Facebook says about the image and other best practices:

Image Sizes

Use images that are at least 1200 x 630 pixels for the best display on high resolution devices. At the minimum, you should use images that are 600 x 315 pixels to display link page posts with larger images.

Small Images

If your image is smaller than 600 x 315 px, it will still display in the link page post, but the size will be much smaller.

Note that, if you want to display an OG image, the minimum image size should be at least 200 x 200px.

Test it out!

Do test out how Facebook interprets your Open Graph post! At any time, you can use this debug tool provided by Facebook.
https://developers.facebook.com/tools/debug/

og-debug-sample

News Feed Image Generator to make your life easier

Our editors are using a tool to generate standard News Feed Images. Select an image and give it a title, the tool will ensure the image ready to share beautifully on Facebook Feed in a minute.

http://newfeedimage.appspot.com/

News Feed Generator Image

 

We’ve also made life-saver other tools for developers. Check them out and share with your friends.

  • MakeAppIcon http://makeappicon.com
    • One click to generate iOS / Android app icons in all sizes!
  • MockUPhone http://mockuphone.com/
    • Best way to embed your screenshots into iOS / Android / Window Phone Devices

If you find this post interesting, subscribe to our newsletter to get notified about our future posts!


 

Learn more about us here and follow @Oursky on twitter.

 

Read more from Oursky

Total
0
Shares
Share 0
Tweet 0
Pin it 0
Related Topics
  • growth
  • opengraph
  • social network
  • web
David Ng

Previous Article
  • UX/UI Design

UI 101: Simple Rules that make great front-end

  • July 6, 2015
  • Frank Lam
View Post
Next Article
  • DevOps
  • Python

Dockerizing our Python stack

  • September 1, 2015
  • Rick Mak
View Post
You May Also Like
skypad skygear side project
View Post
  • Web

How I wrote a HackerNews top page app in 2 hours

  • October 25, 2017
  • David Ng
keep-calm-and-sudo
View Post
  • Geek

11 Command Line Tips That You Probably Missed

  • September 19, 2016
  • May Yeung
Oursky QA Team
View Post
  • Geek
  • Software Testing

Software Testing World Cup 2016 Recap: 7 Critical Learnings You May have Missed

  • September 2, 2016
  • Joyz Ng
View Post
  • Geek

Dissecting Famous Egg Dropping Puzzle

  • July 18, 2016
  • Benson Yeung
View Post
  • Geek

Geek’s way to say things

  • June 2, 2015
  • David Ng

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Subscribe Us

Join our mailing list to never miss an update!

Oursky Code Blog
A team of Developers, Designers and Geeks. All about hacking and building things.

Input your search keywords and press Enter.