Using OpenGraph Tags to Integrate Your Content with Social Media

posted by Nick Weynand on May 2, 2012 | Comments (0)

OpenGraph logoOpenGraph is a protocol that allows webpages to be integrated with social media in the way they were intended. For example, have you ever posted a story on Facebook and had to deal with Facebook’s “best guess” at what the title, summary and thumbnail image for that story should be? OpenGraph eliminates this guesswork because a story’s important elements are defined ahead of time in a way that Facebook (and other social media sites) can understand.

The OpenGraph standard is being pushed by Facebook, but it’s expected to be adopted by many social media sites that integrate content from other places.

The important elements of a story are defined using OpenGraph (or OG) tags within the HTML of the document. Let’s take this article that you’re reading as an example. You won’t see it on the front-end, but embedded in the HTML are OG tags for the title of the article, what kind of content it is, who the author is and what thumbnail image should be used. In this case, the OG tag for the thumbnail image looks like this:

<meta property="og:image" content="https://www.trademarkmedia.com/public/upload/files/general/__thumbs/icon-og.jpg" />

When this article is shared on Facebook and some other social media sites, those sites know exactly what content should be displayed and the results are consistent.

If your website doesn’t use OpenGraph to define your content, it’s something you should ask your web developer about. It’s an easy addition and will ensure that your content looks consistent when it’s shared on social media.

For a more detailed description of the OpenGraph protocol and a list of all tags, see ogp.me.

Tell us what you think