Have you ever wondered why some web pages have a great preview when linked on Twitter, Facebook, or Google+ while others look so lacking?
Open Graph is an open source protocol originally created by Facebook that allows your web page to describe itself using meta-tags. When people link to your web page on Facebook or Google+, these meta-tags will be parsed and used to display a snippet of content from your web page. Without these tags, the parser has to guess what to display.
Twitter Cards let you attach a summary to any tweet that contains a link to your web page. Twitter Cards use their own set of meta-tags but will fallback to using the Open Graph meta-tags in some cases.
Adding Open Graph tags to your pages is an easy way to enhance their display on both Google+ and Facebook.
Open Graph requires you to import a namespace of sorts. You do this by adding a
prefix attribute to your
<html prefix="og: http://ogp.me/ns#">
Every page is required to have a set of basic properties. Your blog's home page should have the following meta-tags inside the
<meta property="og:type" content="website" /> <meta property="og:title" content="Zduck - Joshua Poehls" /> <meta property="og:image" content="http://zduck.com/logo.png" /> <meta property="og:url" content="http://zduck.com" />
og:url property is the canonical URL of the current page. If there are multiple URLs a user could use to visit your page (e.g. www.zduck.com and zduck.com), this should contain the preferred URL.
The properties on your individual post pages will be slightly different. Open Graph calls a blog post an article and we'll need to import the namespace for the article object type.
<html prefix="og: http://ogp.me/ns# article: http://ogp.me/ns/article#">
<meta property="og:type" content="article" /> <meta property="og:site_name" content="Zduck - Joshua Poehls" /> <meta property="og:title" content="Title of my blog post" /> <meta property="og:image" content="http://zduck.com/mypost/image.png" /> <meta property="og:url" content="http://zduck.com/mypost" /> <meta property="og:description" content="One or two sentence description or summary of my blog post" /> <meta property="article:published_time" content="2013-01-28" />
article:published_time needs to be an ISO 8601 formatted timestamp. It'll look something like
2013-01-28T00:37Z if you include the UTC time.
If you use categories or tags then you can include properties for those as well.
<meta property="article:tag" content="Category 1" /> <meta property="article:tag" content="Category 2" />
Facebook requires your
og:image to be at least 50px by 50px but prefers a minimum of 200px by 200px. It is a good idea to create a separate copy of your image specifically sized for Facebook.
Twitter Cards have their own set of meta-tags that you are required to add to your page. Unlike Open Graph, you aren't required to import the namespace prefix on your page.
<meta name="twitter:card" content="summary" /> <meta name="twitter:title" content="Title of my blog post" /> <meta name="twitter:url" content="http://zduck.com/mypost" /> <meta name="twitter:image" content="http://zduck.com/mypost/twitter-image.png" /> <meta name="twitter:description" content="One or two sentence description or summary of my blog post" />
If you have a Twitter account then you can link to it as the author of the article.
<meta name="twitter:creator" content="@JoshuaPoehls" />
And if you have an account that represents your blog you can link to it as the publisher of the article.
<meta name="twitter:site" content="@MyBlog" />
Twitter Cards require a
twitter:url but will fallback to
og:url if it isn't found. Twitter also has fallbacks for
og:description. If you already have the Open Graph properties on your page then there isn't much point in duplicating them for Twitter unless you want to change how the information is displayed on Twitter specifically.
Twitter requires your images to be 120px by 120px and will resize and crop any image that is too large. It is a good idea to have a copy of your image sized for Twitter and use the
twitter:image tag in addition to
Remember that to light up Twitter Cards for your website you have to apply for participation with Twitter.
Both the Open Graph protocol and Twitter Cards support a lot more than what I've covered. These formats have a lot to offer beyond the world of blogging. Do yourself a favor and skim the Open Graph protocol and Twitter Card documentation for an idea of all they can do.
Also, while Google+ supports the Open Graph protocol it actually prefers schema.org microdata for building its snippets. Google, Yahoo!, Bing, and other search engines also use schema.org microdata to better represent your pages in search results. That is a topic for another time.
Facebook also has documentation regarding their use of the Open Graph protocol.
Make sure you've implemented the meta-tags correctly by using a few tools to check your pages.