Facebook’s Attached Links and Page Previews – Why’s my site showing up with that image and text?

divider

Facebook has a cool bit of JavaScript that automatically loads your link as an attachment when you type a URL in the message input box. It has a title, description, and thumbnail:

Facebook link preview embeded URL screenshot

One of our clients who is using Facebook as a part of their business, mentioned that when they were adding their website’s URL, it was popping up with the wrong text description. The text was specific to a certain part of the site, and misrepresented what the site was as a whole. Not good! Although you can easily click the text and edit it before you send your message, this could get annoying if you are including your business’ URL a lot.

How to change that description and thumbnail

Facebook reads the META description and <title> tag’s that are on the page to generate this information. If you do not have a Meta description (or a Meta description content equal to nothing), this will probably be taken from the first blurb of text that shows up in the HTML code, whether you like it or not. In the case above with one of our law firm clients, it was actually from the sidebar (not that we would leave out the Meta description tag of course! It was not loading correctly from our database at the time).
Add these HTML tags inside <head> in your HTML. The meta title may not be necessary as the title should be pulled from the regular <title> tag:

<meta name="title" content="Name of your page" />
<meta name="description" content="Page summary" />

It’s very likely that the first thumbnail image that shows up won’t be the one you want. The good news is that you can easily add a tag that Facebooks reads to choose this image.

<link rel="image_src" href="http://www.website.com/images/logo.jpg " />

Just give it some time…

The Crawler/Scraper/Bot or whatever you’d like to call it, doesn’t grab this information immediately; it seems there is some kind of cacheing used. So be aware, that your changes won’t show up right away. In our experience it showed up within a few hours. You may want to give it a day; I’m not sure how often they update their cached versions.

For more official information, and information about adding Audio and Video links, see:


12 Responses to Facebook’s Attached Links and Page Previews – Why’s my site showing up with that image and text?

  1. Agustin
    11:42 am on May 2nd, 2009

    Hello, thanks for the post.

    I’m having trouble setting this up, would you be able to give me a hand with it?
    I got it set up like that but it’s not coming thru, it was before.

    Thanks.

  2. hengzhe
    5:18 am on May 7th, 2009

    Could some tell me what is ‘blurb’ in the context of ‘this will probably be taken from the first blurb of text that shows up in the HTML code’ from the article?
    Thanks in advance.

  3. Josh
    9:52 am on May 7th, 2009

    Agustin- Possibly; what is the problem?
    hengzhe- Basically, the first text that appears in the HTML. Blurb just meaning a brief sentence/bit of text.

  4. hengzhe
    7:42 am on May 8th, 2009

    Thanks Josh!

  5. hengzhe
    7:59 am on May 11th, 2009

    I have a technical question:how does Facebook locate ‘blurb ‘?
    For instance,if we type url as http://www.cnn.com , we will see some text from the main page of cnn.com is chose as the Description,why is this specific text rather than other texts is chose?
    I ask this because I think this text is special at all,it is not the first fragment of text of the page
    at all.

  6. Josh
    12:58 pm on May 11th, 2009

    It should be pulling from the meta description. It only pulls from the text on page if there is no meta description.

  7. raybak
    12:13 am on October 8th, 2011

    I need meta description for crawlers but is there any way for facebook to not read meta instead it should read from a text block?

  8. Rebeca
    1:39 pm on May 25th, 2009

    I can’t figure out where to put the code that determines the image to show on the thumbnail… the link talks about dogs and it shows a picture of cats… can you help me with that? I’m working with WP.

  9. Josh
    5:20 pm on May 27th, 2009

    Rebeca-
    With WordPress you should be able to add the LINK tag inside HEAD in the header.php template file in your WordPress Theme. This will set the image to be used on all pages. If you need to set specific images for specific pages, there may be a WordPress plugin available. There’s a whole slew on them for custom meta tags.

    If it was me and I couldn’t find a good plugin, and I just needed a different image for 2 or 3 different pages, I’d probably just put some PHP code in the header with a basic if/then check on which page it was, to determine which image URL was printed in the HTML tag.

  10. Eric Herboso
    10:38 am on June 8th, 2009

    My issue is somewhat similar: I had a [meta description] tag, but no [meta title] nor [link image_src]. Because of this, Facebook was pulling the title from the non-meta [title] html tag (which is ok), the image as just a random pic from the page, and the description from some random paragraph in the header.

    I’ve changed it to explicitly use [meta title], [meta description], and [link image_src], and I’m hopeful that this will work, once the spider crawls it.

    Thanks for your post; if this works, then you will have saved me a lot of headache.

  11. Stefan
    9:25 am on November 12th, 2010

    oh, i forgot to paste the code for the last example, here it is:

  12. Cvarner
    1:27 pm on July 16th, 2012

    I found that if you update your page and want a new image to appear on a link just go through a link shortner and it should appear properly.

Leave a Reply

Your email address will not be published. Required fields are marked *

*