Create enhanced results on Yahoo! and Facebook with Share markup

Yahoo! announced support for enhanced search results last week based on Facebook Share and RDFa markup. Website owners can add a few meta tags to their pages to boost click-throughs from a more visual Yahoo! Search result and ease the process of sharing a link on Facebook at the same time. In this post I will cover the major categories of enhanced share types — audio, images, video, news, blogs, games, documents, and multimedia — and walk through how site owners can stand out on shareable platforms. Yahoo! and Facebook are just the first two platforms to collaborate on this effort. Expect more announcements from a variety of activity stream and URL share providers in the future.

Why add special markup?

Yahoo! Enhanced Search example

Shared pages and search results contain, at a minimum, a title and a description extracted from your site’s <head>. You can enhance your search and share capabilities by explicitly specifying a thumbnail image or playback data you would like included directly alongside mentions of your pages.

<meta name="title" content="Apple iPhone 3G" />
<meta name="description" content="iPhone 3G combines three products in one..." />
<link rel="image_src" type="image/jpeg" href="http://www.apple.com/iphone/iphone_thumb.jpg" />

Thumbnails appear alongside Yahoo! search results in a 54 pixel high by 98 pixel wide image window. Thumbnails might be overlaid with a call to action for supported mediums and their embedded players.

Supported mediums

The Facebook Share API supports annotating a page as audio, video, generic multimedia, an image, blog content, or news content. Publishers simply add a single line to their pages to help Facebook classify the type of page shared by their users and apply the appropriate specialized handling.

<meta name="medium" content="blog" />

Yahoo! Search currently supports enhanced search results for video, games, and documents (all wrapped in a Flash player). Playback SWF files must be white-listed by Yahoo! before they are supported for inline playback (Facebook also white-lists). Yahoo! currently supports the following websites’ embedded Flash players:

Video
Hulu, YouTube, Yahoo! Video, Metacafe
Games
Playcrafter
Documents
Scribd, SlideShare

Inline audio

Facebook supports track title, artist name, album name, and a direct link to the audio through its share interface. Facebook users should be able to playback MP3s and other popular audio formats from their social news feed.

<meta name="medium" content="audio" />
<meta name="title" content="Pearl Jam - Black" />
<meta name="description" content="Sheets of empty canvas, untouched sheets of clay..." />
<link rel="image_src" type="image/jpeg" href="http://pearljam.com/ten.jpg" title="Ten Album cover" />
<link rel="audio_src" type="audio/mpeg" href="http://pearljam.com/black.mp3" />
<meta name="audio_type" content="audio/mpeg" />
<meta name="audio_title" content="Black" />
<meta name="audio_artist" content="Pearl Jam" />
<meta name="audio_album" content="Ten" />

Inline video

Video sites should specify their embedded player and its desired height and width on each video page. White-listed players will be played back directly in a social news feed.

<meta name="medium" content="video" />
<meta name="title" content="The Daily Show with Jon Stewart: Thu, Mar 12, 2009" />
<meta name="description" content="Jon Stewart and CNBC's Jim Cramer go face to face in the studio." />
<link rel="image_src" type="image/jpeg" href="http://thumbnails.hulu.com/73511_145x80.jpg" />
<link rel="video_src" type="application/x-shockwave-flash" href="http://www.hulu.com/embed/_3TIApx3ymwKbAfZnz-MKA" />
<meta name="video_width" content="512" />
<meta name="video_height" content="296" />
<meta name="video_type" content="application/x-shockwave-flash" />

Summary

Search results pages and social news feeds provide new sources of referrals for connected sites. Webmasters can spice up their pages with a few extra meta tags to stand out any time a machine or a human decides to share your content with others. Adding thumbnails to a page, something as simple as a user profile picture in a social context, is a simple step that will help your content stand out from the crowd.

Publishers supporting embedded Flash players should consider the impact of off-site inline playback on their business. If you’ve already embraced spreading your SWFs far and wide you should jump on the white-list queue early to gain a competitive advantage through partners such as Yahoo! and Facebook.

3 comments

Commentary on "Create enhanced results on Yahoo! and Facebook with Share markup":

  1. Alan on wrote:

    Any sense of how Facebook, Yahoo or Digg will handle multiple image_src tags in a single file?
    Facebook, when there is no image_src defined, will present several thumbs for the user to choose from. This seems to me to be a positive from the user’s perspective. They have control. By defining a single thumb, we cheapen the user experience.

    • Niall Kennedy on wrote:

      Alan,
      A total possible image thumbnail share set might be all images on the page larger than a minimum height and width chosen by the share site (e.g. 150 x 50 px). That share set might include your site logo, a headshot of the author, and other content not directly related to the unique story.
      A share site implementing support for share metadata could still display the total possible image set but default to the image_src option.

  2. XeM on wrote:

    We have multiple videos on a single page. How can we add unique meta tags for image_src, video_src etc for each video on the page so that Facebook picks the right video and its image for preview which user intended to share? Is this possible?