What is the Open Graph protocol? Per Facebook, it “enables any web page to become a rich object in a social graph.” The documentation goes on to state that “to turn your web pages into graph objects, you need to add basic metadata to your page.” Put more simply, add Open Graph meta tags to your website to have greater control over how your content is displayed when shared via Facebook.
The basic metadata includes a title, object type, image, and url, as per the documentation:
I’ve also included a site name and description:
There are many different object types to which you may categorize your page: music, video, article, book, profile, and website, amongst others. The two types that are relevant to my site are article and website, the latter being the object type that I’ll fall back upon for every page that isn’t a post.
The article object type has several possible values, but I’m only using article:published_time, article:author, article:section, and article:tag for my site:
Please Note: I’ve skipped the explanations for some of the following conditional statements because they’re identical to those that I wrote about in my Supporting Twitter Cards with Jekyll post. See that post for further information.
For the categories and tags, I’m using a for loop to output the appropriate meta tags. Open Graph tags only allow for one section, so I limit that to the first category. It’s rather arbitrary, but it works.
Here’s the final snippet of code with the appropriate meta data: