In 2010, Facebook introduced Open Graph.  Open Graph designs a set of meta-tags that you can add into the part of your webpage that will tell Facebook (and now other social media sites) what title, description and image to use when sharing your content.  By leveraging open graph, you can make your pages standout on social media sites and increase the likelihood that people who see the share, will click on the link.  Open graph tags can consequently affect your social click-through rates and conversation rates, so it's something that you should spend a few hours on to get right.

Even though Facebook introduced this standard, all of the other major platforms, Twitter and LinkedIn, all recognize Open Graph tags.  Twitter does use its own set of meta-tags for Twitter Cards, but if Twitter robots cannot find any, Twitter uses Open Graph tags instead, so using Open Graph means that you're set for everything.  

The Open Graph Tags Demystified

og:title: Defines the title that will be displayed.  If Facebook doesn’t find the og:title tag on your page, it uses the meta title instead. 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!

og:url: Defines the URL that will open when the link is clicked. 

*og:type: * Defines the type of page being shared, blog post, video, picture, etc.. I won't cover all the options as the list would be too long, however, you can go here for more information.

og:description: Defines the description, again very similar to the normal HTML description tag. This is used to describe your content, but instead of it showing on a search engine results page, it shows below the link title on Facebook.  (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.

og:image: Defines the image to associate with your page.  This is probably the most important tag,  because as we all know, a picture is worth a thousand words.  If you don't set this then Facebook will pick what to show from your page, whether that be an unwanted ad banner, an image that looks terrible, or simply nothing at all.  When selecting an image to use,the recommended resolution for an OG image is 1200 pixels x 627 pixels.

fb:app_id: Defines your Facebook application Id, used for analytics etc.. 

If things have gone well, your HTML page should look similar to this:

Note: There are a few more 'advanced' tags but these aren't really as important.

Test Your Markup

In order to test how your pages will look on social media, you can use the Facebook Crawler tool.  Simply, enter a URL into Sharing Debugger and will show which meta tags the crawler scrapes as well as any errors or warnings.

It’s surprising how few people use open graph tags with Umbraco. As you can hopefully see, adding the tags is really easy and it can help your pages stand out on social media pages.