Improving Open Graph Tags on hope.edu

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.

Join the Conversation

1 Comment

Leave a comment