We’ve recently made a “behind the scenes” update to our hope.edu pages and sites within OU Campus that greatly improves the metadata code provided for open graph tags. Open Graph is a technology first introduced by Facebook in 2010 that allows integration between Facebook and its user data and a website. By integrating Open Graph meta tags into our page’s content, we can identify which elements of our pages we want to show when someone share’s a page on Facebook or Twitter.
By implementing this, Facebook no longer has to guess what image to pull when our pages are shared, for example.
Facebook describes it this way:
The Open Graph protocol enables developers to integrate their pages into Facebook’s global mapping/tracking tool Social Graph. These pages gain the functionality of other graph objects including profile links and stream updates for connected users.
OpenGraph tags often look something like this:
<meta property="og:title" content="Example title of article"> <meta property="og:site_name" content="example.com website"> <meta property="og:type" content="article"> <meta property="og:url" content="http://example.com/example-title-of-article"> <meta property="og:image" content="http://example.com/article_thumbnail.jpg"> <meta property="og:image" content="http://example.com/website_logo.png"> <meta property="og:description" content="This example article is an example of OpenGraph protocol.">
Cool, right? If none of this makes sense, all you need to know is our hope.edu web pages will look better when shared on social media sites like Facebook.