How to add Facebook Open Graph (og) meta tags to individual pages in Kentico

In my case — in facebook when I link to a blog article that I write, I want the correct image, title, description, url and site to appear in the status update.

This can be accomplished easily by using the Head HTML Code webpart in your Page Template and using macros to populate your tags content.

1. Add the Head HTML code webpart to your Page Template Design.
2. Configure the webpart
   1. Give it a short web part control id, I used "fbog".
   2. Web part title should be something you recognize, I used "Facebook og"
   3. Populate the HTML code. Make sure you Edit in a New Window so you can add macros. (code below)
   4. Disable view state under Performance for a performance boost since you don't need it.

Here is my code:

<meta property="og:title" content="{% BlogPostTitle %}" />
<meta property="og:site_name" content="Dahlin Development" />
<meta property="og:url" content="{% CurrentDocument.AbsoluteURL |(user)joel.dahlin|(hash)7fe2a36c108cad583c135b5270f9fcfd1764d4ba91843e5bd5394011762cba32%}" />
<meta property="og:description" content="{% StripTags(BlogPostSummary) %}" />
<meta property="og:image" content="{% BlogPostTeaser %}" />
<meta property="og:type" content="article" />

As you can see this is on a Page Type Blog post (CMS.BlogPost). You can see the properties I am using to populate the tags. I also am using the StripTags macro on the Summary since I may have html like a p tag in it.

This will add the meta tags to your page for facebook to pick up when it scrapes the page.

To see what the rendered output looks like, view the source of this page.

*Tip, to see what facebook sees you can enter your page url at
https://developers.facebook.com/tools/debug/