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 replies on “Create enhanced results on Yahoo! and Facebook with Share markup”

  1. 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.

    1. 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. 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?

Comments are closed.