Configure Your Website Teaser for Facebook Share

Configure Your Website Teaser for Facebook Share

You have Facebook share function in your website but when you share the link, Facebook doesn’t show correct image and description for the teaser? Then maybe you are not yet set the Object Graph for Facebook to identify your link.

Facebook Object Graph (OG)

Facebook has some Object Graph (og) configurations which you could set in your meta tags html for every page which will be shared on Facebook.

 

  1. Url: which link you shared, you could have different shared link with your current page where you share your link.

    [code language="html"]<meta property="og:url" content="http://yourlink.com/">[/code]
  2. Title: link title.

    [code language="html"]<meta property="og:title" content="Your Link Title Goes Here">[/code]
  3. Image: teaser image (thumbnail).

    [code language="html"]<meta property="og:image" content="http://yourlink.com/path/to/yourimage.png">[/code]
  4. Description: description of your link.

    [code language="html"]<meta property="og:description" content="Your Text Description">[/code]

You can check the detail here : https://developers.facebook.com/docs/opengraph/using-object-api/

Facebook OG Debugger

But if you still having a problem with your teaser, then you can to check your link here https://developers.facebook.com/tools/debug/og/object to make sure that your link has correct informationd. Just input your url and boom! This tool will tell you information of your url object graph and will tell you when you missed something from your url. See the example below :

 

Configure your Website Teaser for Facebook Share

Your url object graph information :

Configure your Website Teaser for Facebook Share

Warning for your url :

Configure your Website Teaser for Facebook Share

 

Hope this article can boost your branding for your website on Facebook. Happy Coding (^-^)

 

 

Written by Aditia Mahdar – Web Developer at 41studio