Facebook’s Attached Links and Page Previews – Why’s my site showing up with that image and text?
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:
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:
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.
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.
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.
Thanks Josh!
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.
It should be pulling from the meta description. It only pulls from the text on page if there is no meta description.
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.
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.
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.