Optimizing for Facebook Share Preview

Background Story

One of the web applications I’ve built here at work allows users to make cool t-shirt designs and then share those designs online. Since this is an intended use, we go ahead and provide some share buttons for the big social networks. One of those buttons hooks into Facebook.

I got an email from the boss recently asking if we could optimize the images that Facebook displays to the user. I had checked this at the beginning, but obviously something had changed. So when someone wants to share [their funny family reunion t-shirt design](http://t-shirts.getyourshirts.com/designs/1973;public) on Facebook, this is the first thing they see:

Bad Facebook Preview

Obviously, a “Secured by Thawte” badge is not ideal. Neither is that description which is basically disclaimer text. :( It takes paging through the first 5 of 8 images before you get to one that is actually an image unique to that t-shirt design. This could use some optimizing, but how does Facebook choose what to show?

Facebook Says …

If you read their [official recommendations](http://www.facebook.com/share_partners.php) (you’ll have to click on “How do I make sure the Share Preview works?” to see the details), you’ll see they use the standard <meta> description tag as well as introducing two new tag standards; a title meta tag and an image_src link tag. [Digg even supports](http://digg.com/tools/thumbnails) the new link tag. But how does it work? And, will it work for me?

The only way to answer this was to do some testing. Because Facebook caches each URL, I had to setup 22 different test pages to iterate through all of my initial questions and questions revealed by testing different variations. Rather than bore you with the play-by-play, let’s skip straight to the results. :)

Facebook Preview Facts

  1. Facebook sends a robot to visit the URL, with a User Agent string of
    “facebookexternalhit/1.0 (+http://www.facebook.com/externalhit_uatext.php)”
  2. If you provide a <meta> title and description tag, Facebook always displays the content you provide. If not …
    • If you don’t provide a <meta> title, Facebook will use your real <title> tag.
    • If you don’t provide a <title> tag or a <meta> title, Facebook will use your domain name (e.g. “whoisgregg.com”).
    • Title length limit is 100 characters. Description length limit is 270 characters. If you exceed the limit, Facebook chops the text exactly at the limit and adds an ellipse.
    • UTF-8 characters are supported for both title and description.
  3. If you provide a <link rel="image_src"> tag
    • Facebook ignores all the other images on the page.
    • If the image tagged is smaller than the lower limit of 50 x 50 pixels, then no image is offered at all.
  4. If you don’t provide a <link rel="image_src"> tag, Facebook scans the document for normal <img src="..."> tags and then displays;
    • up to 26 images to the user,
    • where the width and height of the image are each 50 pixels or greater (tested with images as large as 3504 x 2336)
    • in order of image dimension (smallest to largest) regardless of source order,
    • ignoring CSS declarations which would hide the image to a normal user (display:none; either inline or in the stylesheet),
    • ignoring images which are inside of CSS (inline and stylesheets), Javascript (document.write and DOM), or inside of HTML comments.
  5. If you don’t provide a <meta> description, Facebook looks for a text snippet from the page that is inside of a <p> tag and which is at least 121 characters in length. If it can’t find a matching string, it doesn’t display any snippet at all.

Facebook Share Optimization Tips

With these observations in mind, you should always provide an optimized <meta> title and description tag for each page. If your page only has one logical image, then you should also provide the <link rel="image_src"> tag.

However, if you want to give your user a choice of images, you can easily provide images just for facebook previews. Define a class in your stylesheet like img.facebook { display: none; } and then add a series of <img class="facebook" src="/path/to/img.jpg" /> pointing to images that are at least 50×50 pixels (but not much larger, so that they will appear before the other images on the page).

If you want to make sure your other images do not appear in Facebook’s Share feature (but are still visible to your regular visitors), you’ll need to change them to either CSS background images or dynamically insert them using Javascript.

Follow these tips and you’ll have users posting much more effective links:

share-optimized-2

Update 2009/05/15: Jake noticed today that Facebook is now automatically opening the preview feature anytime a person types a URL into their status. This isn’t a rarely used feature anymore.

1,217 responses

  1. Course 4 is 3 eliminates, class 3 is 30 eliminates, class 2 is
    300 kills, as well as course 1 (mx) is actually 3000 gets rid
    of.

  2. For course 4 it is actually 10 eliminates, course 3 is actually 100 kills, lesson 2 is actually 1,000 gets rid of, and also training class 1 (max) is 10,000 gets rid of.

  3. Various tanks possess different troubles from securing that impressive gold M logo, for
    example, a T54, which is actually an enthusiast favored and frequently played tier
    9, oftentimes is actually much tougher to obtain a mastery logo in than its
    tier X bro, the T62a or the obj140.

  4. Today, allow’s discuss concerning Online Income Masterclass from James Francis and merely exactly how it
    could aid you.

  5. The best schools in the resources supply a variety of hundreds of classes monthly along with various styles,
    days and also spans, allowing you to accommodate your training class or training class around your way of living.

  6. Thhe simple daily rinxe with bleach (yes, thyat
    inexpensive brown bottle yoou select up at
    the grocery or drug store) is getting me towards the white smile I want.
    Teeth hass to be brushed twice or morfe times daily for around two minutes aand flossed at least once each day.

    Indeed, a classic insplired residence is both remarkable and unique in these modern years.

  7. Flower’s 2 Sigma Issue is actually an academic sensation noted where
    the normal trainee coached one-to-one (using mastery discovering methods) carried out 2 standard deviations a lot better than students who learn through
    conventional tutorial techniques.

  8. Focusing your training class – 15 points each amount, plus
    clothing, and 125 factors at level 20, for 400 factors complete.

  9. In Online Profit Masterclass James Francis instruct you concerning moral as well as truthful procedures that will definitely help you to generate a quick alongside a lengthy-term earnings streamHe
    go over regarding techniques using they generated cash on the web and the information he gives is actually gold nuggets.

  10. Within this proficiency class I am actually mosting likely to examine specifically exactly how trader drift happens, the outcomes, and after that effective ways to solve this once and for all.

  11. Example my holy clergyman truly likes her mastery my ele witch doctor is
    alright along with it as well as my MM hunter reforges this out as much as is achievable.

  12. In this master class Jeremy Whaley will definitely be actually
    showing you the best ways to earn In Advance when you get a sell, and secure an earnings on the back end when you offer the
    supply.

Comments are closed.