Meta-tags To Use For Optimized Facebook Sharing

[⚡JFarrow⌁]

When content from your ning network is shared to facebook, you want the vital information about the content to show up in that post right?  Here are a few of the most important meta-tags you'll need to add to pages (ie in the Manage Title and tags) in order to get the results you need.

Make Sure Facebook Can See Your Title and Description

When sharing content on Facebook using Share, Facebook looks for a title, description, and thumbnail image to pull into the feed story. While Facebook will always try to find this for any shared link, you can actually specify this copy for the Facebook crawler if you want to have more control over the copy or images that show up in Facebook.

At the very least, you should test out sharing content from your site in order to make sure Facebook is picking up a title and description for pages shared from your site. Just make sure you’re setting these two lines of code in your site’s header:

<meta name=”title” content=”SXSW Driskill Flashmob: When Friends Converge & Create Memories” />
<meta name=”description” content=”When we peer into the looking glass into what truly made SXSW Interactive a unique and successful culmination of culture and real life networking, we see something very different and exceptional.” />

 Specify a Particular Thumbnail Image

Once you have the basic plumbing in place, Facebook gives you the option to explicitly specify which image shows up next to content your users share. If you don’t specify what to pick here, Facebook will choose images from the page and let users pick which to show.

If you want to specify a particular image for Facebook Share, add this line of code to your header:

<link rel=”image_src” href=”http://farm4.static.flickr.com/3640/3354626316_25f2e12dbf.jpg?v=0″ />

Here’s how this would look inside Facebook:

4. Optimize for Multimedia

In addition to basic content sharing, Facebook also makes it possible to add metadata to your page to make audio and video sharing more powerful.  When you use these tags, your shared content can be playable directly in the feed.

First, you have to add this line to your site’s header to let Facebook know which type of multimedia it is:

You may also specify the type of content being shared by using the following tag:

<meta name=”medium” content=”medium_type” /> (where medium_type could be “audio”, “image”, “video”, “news”, “blog” 0r “mult”)

Video Sharing

Here are the tags you’ll need to set with each page containing video:

<meta name=”title” content=”video_title” />
<meta name=”description” content=”video_description” />
<link rel=”image_src” href=”video_screenshot_image_src url” />
<link rel=”video_src” href=”video_src url”/>*
<meta name=”video_height” content=”video_height” />
<meta name=”video_width” content=”video_width” />
<meta name=”video_type” content=”Content-Type header field” />

Audio Sharing

And here are the tags you’ll need to set with each page containing audio:

<meta name=”title” content=”page_title” />
<meta name=”description” content=”audio_description” />
<link rel=”image_src” href=”audio_image_src url (eg. album art)” />
<link rel=”audio_src” href=”audio_src url” />
<meta name=”audio_type” content=”Content-Type header field” />

In addition, these tags are optional:

<meta name=”audio_title” content=”audio_title (eg. song name)” />
<meta name=”audio_artist” content=”audio_artist_name” />
<meta name=”audio_album” content=”audio_album_name” />

 

[Patrick Chappelle]

I'm totally clueless in these matters, and as of this moment, slightly inebriated (as always, it seems). How do I add these codes to my header?

[Ceddy J]

Do you have a way we can implement this on 3.0?

[TJ @ jQueryHelp]

Interesting and helpful!  Thanks JFarrow!

[⚡JFarrow⌁]

cool.. i forgot about this one... no problem!