Applying Open Graph or “How to share pretty info?”

After working on a new website yesterday I was ready to share my progress with some friends and I was dismayed that the link produced on Facebook was not pretty, the way other site are automatically linked with a nice picture and the right kind of info. Not to be discouraged I figured I had to do better…

The Open Graph Protocol

A little searching led to the Open Graph protocol: “The Open Graph protocol enables any web page 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.”

So in other words: the regular meta tags I was using were not helping I needed to add ogp.me tags.

There is some help on page, but a basic example for your homepage is not on the OGP.ME webpage so I figured I’d share my result:

    <meta property="og:title" content="Chianso: digitaal kindvolgsysteem, documentbeheer en kinddossier." />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://www.chianso.nl/" />
    <meta property="og:image" content="https://www.chianso.nl/Images/ChiansoLogoShareX256.jpg" />
    <meta property="og:site_name" content="Chianso" />
    <meta property="og:description" content="Chianso biedt een digitaal kindvolgsysteem, online documentbeheer en digitaal kinddossier waarmee voldaan wordt aan nieuwe IKK regelgeving, kwaliteitsverbetering op de groep en kostenbesparing door het terugbrengen van administratieve handelingen." />
    <meta property="og:locale" content="nl_NL" />

 

Now what I found is that the image you want to share cannot be larger than 8MB, also, even though I found no documentation for this, JPG images seem to work better than PNG.

Facebook debugger

So one way of getting this right is adding the info to your website and the trying to share a link on Facebook. This will work once… then the next try may not show any of your changes. A very useful tool at this point is the Facebook Debugger. It will load all the metadata from your site and provide a link preview. Together with a bunch of hints and useful info AND it offers a ‘Scrape Again’ button, which invalidates the caching that is in play.

You can find the debugger here:  https://developers.facebook.com/tools/debug/sharing

Result

Facebook-ChiansoLink

Yeah!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s