Open Graph Twitter Cards and Your Blog
• http://joshua.poehls.me/2013/open-graph-twitter-cards-and-your-blog/
Have you ever wondered why some web pages have a great preview when linked on Twitter, Facebook, or Google+ while others look so lacking?
<img alt="Screenshot of Google+ link previews" src="g-vs.png" style="width: 450px" />
<img alt="Screenshot of Twitter link previews" src="tw-vs.png" style="width: 450px" />
What you are seeing are formats such as the Open Graph protocol and Twitter Cards at work.
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
Adding Open Graph tags to your pages is an easy way to enhance their display on both Google+ and Facebook.
…to your home page
Open Graph requires you to import a namespace of sorts. You do this by adding a prefix attribute to your <html> tag.
<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 <head> tag.
<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" />
The 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.
…to your posts
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-28 or 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.
Adding Twitter Cards
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 twitter:image to og:image, twitter:title to og:title, and twitter:description to 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 og:image.
Remember that to light up Twitter Cards for your website you have to apply for participation with Twitter.
Further Reading
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.
Testing Tools
Make sure you’ve implemented the meta-tags correctly by using a few tools to check your pages.
Bonus Tip
You can claim your domain with Facebook and use their Insights dashboard to see how well your links are doing.