Opening Up Open Graph
As I’ve dug deeper into how content is displayed across the web, I’ve found that it’s not always as rosy as I’d like. A big problem is that I am a total n00b and don’t always get my code just right when writing up my thoughts. In turn this means my pages don’t always display correctly across different applicaitons like Facebook or Linked-In.
See how lame this looks? Nobody is going to read this without a picture and some awesome OG tags.
After doing some research, I’ve found there are amazing meta tags out there that fall under OpenGraph.
The concept and application is simple. Whenever you list your site on the internet, web crawlers look for meta tags to compile information about your site and map it within their database. The more meta information you have the better, as it makes it easier for your website to be properly linked and mapped in a web-search. Beyond this, Facebook, Twitter, and other social media sites use OpenGraph tags in order to generate previews for articles and webpages among many other things.
Implementation
The basic code structure for open graph meta tags is simple:
<meta property="" content="" />
There are different properties as well. Here are a few to get you started:
property="og:title"
property="og:image"
property="og:site"
property="og:description"
property="og:type"
property="og:url"
property="article:author
property="article:section"
From there you just have to enter the "content" portion of the code. If you’re doing it with static pages then this is just text, otherwise you should generate it dynamically. For my own purposes, I used liquid tags and plugged into the power of Jekyll to generate my tags automatically for every static page I work up. Here’s a code snippet from my website of what this would actually look like:
Oh, and it’s VERY important to remember to call the og tag in the beginning of the html. Just throw this in your head section somewhere:
<html prefix="og: http://ogp.me/ns#"/>
As always, this doesn’t even scratch the surface of all the cool things that OpenGraph can deliver. Explore it on your own and let me know what you find. Here are some fun resources that you might check out with more time:
- Getting to Know Open Graph
- Essential Meta Tags from 2013
- How to implement in Jekyll, like I did.