Schema.org, Open Graph, and making links to your site from social look pretty

I have only been working on Google+ for  two weeks and I have already learned so much about what Google is doing in this space and why they are doing it.  I recently started learning more about the publishing features of Google+, most notably snippets. Snippets are the little boxes that appear when you copy and paste a URL into a share box on Facebook or Google+ or any other site that renders scraps of the web into small sections. Google tries to do many clever things, but the preferred mechanism for rendering and exposing content is by creating content that conforms to Schema.org markup or the Open Graph protocol.

Now when you think about snippets, your first impression is that it’s an easy problem to solve, just minify the page, put an image on it, and you’re good to go.  In practice, it’s not that easy.  The web is full of people creating HTML in various iterations of the HTML spec and in many (most?) cases, that content is malformed. This makes it very difficult to discover content to render.  To further complicate the situation, even if the content is well formed, how do aggregators and other consumers of this content identify the right content to expose?

Schema.org and Open Graph markup were created to address this specific purpose: surface content information so that it’s easier to organize and to also enable the content creators to expose their content in the way they want it to appear. Put more concisely, these markups make it easy to expose both what content to render and to associate information about the content to make it easier to render in the right format.

Consider the following example for how my personal site renders without any specific optimizations for aggregators:

You’ll notice that it uses my meta description, pulls in my title and all that goodness to give the reader a link with a little bit of context around it.  However, the content doesn’t look exactly how I would like for it to appear in social media feeds yet. I made a few changes and added the following markup to my page:

    <!-- open graph content -->
    <meta property="og:title" content="Gus Class: Learn all about me"/>
    <meta property="og:image" content="http://gusclass.com/square_profile.png" />
    <meta property="og:description" content="Learn more about Gus Class, a developer advocate on the Google+ team." />
    <!-- schema.org microdata -->
    <html itemscope itemtype="http://schema.org/Person">
    <meta itemprop="name" content="Gus Class's Online Portfolio">
    <meta itemprop="description" content="Learn more about Gus Class, a developer advocate on the Google+ team.">
    <meta itemprop="image" content="http://gusclass.com/square_profile.png">

By adding that code to my page, I signaled various aspects of the content that made it easier for Google+ to pick up.  External links to my page will now render like this:

A picture of Gus Class next to a short description for social media

Which is much closer to how I want links to my site to render. With a little more tweaking and customizing the markup on your pages, you can really drive up engagement to your site and can make everything look beautiful when people give you links from social media.

If you’re looking for a quick way to get started, Google+ documentation includes a snippet creator that will create schema.org code for you. If you are looking for a more complete solution, particularly for large-scale sites that publish dozens or hundreds of articles a day, you should work on dynamically authoring the schema.org and open graph code. In many cases, you can install plugins to simplify and automate inclusion of the correct images.  For example, I am using the thumbnail maker and

In conclusion, make sure your site looks great when people link you from social media sites, not everybody will choose the best picture or description.  By making it easier for Google and others to expose the right content, you will make sure to preserve your brand and will always be looking good on incoming links.