Contact Us
  • Set Up your Website to Control Images & Text in Facebook Status Update Links

    If you’re not on the HyperArts Blog, CLICK HERE!

    When someone includes a link to your website in a fan page or personal profile status update, it is very important that the image(s) and text Facebook associates with that link accurately reflect your brand.

    For example, when someone posts a status update on Facebook that includes a link to a HyperArts Blog post, they first see the popup dialog where they enter the text and link for the update:

    Facebook Status Update Dialog

    Notice there are two choices for the accompanying image. It’s possible for you to control the image options available for your website, and your blog posts, as well as the text and title.

    Here is the resulting status update:

    Facebook Status Update

    Don’t Let Facebook Grab Random Images and Text — Take Control!

    If you don’t take the steps outlined here, then Facebook will just use the first image it locates on your Web page and use the content of your meta “description” tag for the text. If there is no meta description tag, it’ll grab the first text it finds on your page.

    In this article, I will show you how you can control the images and text that are generated by Facebook when links to your Web pages are posted.

    Controlling the Facebook Image and Text with Meta Tags

    To control what images and text show up in Facebook status updates for your site, you can use HTML meta tags. Here is a Facebook status update dialog showing where Facebook gets the content:

    Facebook Status Update Dialog

    image_src meta tag

    This tag goes in the <head> tag of your Web page and looks like this:

    <link rel="image_src" href="http://URL-TO-YOUR-IMAGE" / >

    Your image can be formatted as either GIF, JPEG or PNG.

    You can add multiple “image_src” tags in the <head>...</head> tags of your document to provide more image options to those posting a link to your Web page. These options would be visible in the status update dialog, where it says “Choose a thumbnail” (see above image).

    Title Tag

    The bolded text in the above image “Elegant, Professional Web Design | HyperArts” is derived from the “title” tag, another HTML meta element — ideally no more than 67 characters in length — that provides a succinct and (if SEO is desired) keyword-rich title of the page’s subject matter. It looks like this:

    <title>Elegant, Professional Website Design | HyperArts</title>

    It should be inside the <head>...</head> tags of your Web page document.

    In the absence of Open Graph tags (see below), Facebook will use the title tag content for that bolded text in the status update.

    Meta Description Tag

    The meta “description” tag is an HTML element that provides metadata about your Web page, specifically an approximately 150-character description of the page’s subject matter. Like all HTML meta tags, it goes within the <head> </head> tags of your page.

    <meta name="description" content="HyperArts designs elegant, professional, easy to navigate websites, coded to Web Standards - for better SEO - and devoid of clutter and confusion." />

    After you have added these elements to your Web page, you can test them by posting a link to the page in a Facebook status update. And, by the way, ALL pages of your website should have the title and meta “description” tags, regardless of Facebook considerations. They are essential in making your website search-engine friendly.

    Forcing Facebook to Update its Cache of your Site Info

    If you’ve already included a link to your Web page in a status update, or if anyone else has, Facebook will have cached the information about the page and may not display your new image options when you test after adding them.

    To force Facebook to refresh it’s cache so that your changes are reflected on Facebook, you must force your page to be “scraped.” The page is scraped when an admin for the page clicks the Like button or when the URL is entered into the Facebook URL Linter. I recommend the URL Linter method. Just enter URL in the box, as shown below:

    Facebook URL Linter

    Assuming you’ve input the meta tags correctly, and the links to the images are correct, you should then see your image options in the status update dialog box. (And, if you’re not using the Open Graph tags — see below — you can ignore the warnings. You’re just using the Linter to refresh Facebook’s cached version of your page info.)

    Controlling the Images and Text using Facebook Open Graph

    As Facebook says on its Open Graph protocol page, “To turn your web pages into graph objects, you’ll need to add Open Graph protocol <meta> tags.”

    Open Graph HTML Tag

    This HTML element is usually right after the DOCTYPE on a Web page, very near the top. Facebook requires this one:

    <html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:og="http://ogp.me/ns#"
    xmlns:fb="http://www.facebook.com/2008/fbml">

    Next, inside the <head> ... </head> tags of your Web page, you must add the following Open Graph meta tags:

    <meta property="fb:admins" content="YOUR-FACEBOOK-ID" />
    <meta property="og:title" content="HyperArts SEO Services" />
    <meta property="og:type" content="website" />
    <meta property="og:image" content="http://www.hyperarts.com/_img-fb/Image-SRC_HyperArts.png" />
    <meta property="og:image" content="http://www.hyperarts.com/_img-fb/Image-SRC_HyperArts_blue.png" />
    <meta property="og:url" content="http://www.hyperarts.com/seo-services/search-engine-optimization-services-san-francisco.html" />
    <meta property="og:site_name" content="HyperArts Web Design & Social Media" />

    Note I used two “og:image” tags so that Facebook will provide the image options in the status update dialog.

    og:type provides a category for Facebook. See all the Facebook Open Graph type options.

    Change the other “content” values to reflect your desired content values!

    How to get your Facebook ID number

    You must replace “YOUR-FACEBOOK-ID” with your own ID, a string of numbers. You can find this by going to this URL in your browser: http://graph.facebook.com/USERNAME. Make sure you replace “USERNAME” with your actual user name. Facebook will give you a read out of the data that is public in your profile, and your ID is the first item.

    For example, my Facebook username is “timware”; if I go to http://graph.facebook.com/timware, I get:

    {
    "id": "504326186",
    "name": "Tim Ware",
    "first_name": "Tim",
    "last_name": "Ware",
    "link": "http://www.facebook.com/timware",
    "username": "timware",
    "gender": "male",
    "locale": "en_GB"
    }

    Make sure your og:image is minimum 180px in width

    Facebook recently announced a new minimum width for the Open Graph property og:image, 180 pixels. So make sure your og:image meets that requirement.

    Use the Facebook URL Linter Tool to Refresh Facebook’s Cache of your Web Page

    As I mentioned above in connection with the meta tags, you can use the Facebook URL Linter to force Facebook to update its cache of your Web page info.

    NOTE: The Facebook URL Linter will see multiple og:image tags as an error and give you a warning. However, Facebook says on its Open Graph protocol page “You may include multiple og:image tags to associate multiple images with your page.” And using multiple og:image tags works.

    Facebook’s Open Graph Protocol and the Social Plugins

    Although the use of Facebook’s Social Plugins on websites is outside the scope of this article, once you’ve set up some or all of your site pages with the Open Graph tags, you can also add the Like Button as well as the other Social Plugins to your page, plus cool authentication features and much more. Find out more on the Facebook Open Graph Protocol page.

    External Resources

    Comments

    1. This post is just in time I guess. I had a problem on of the WordPress blogs where I have followed the Open Graph method for FB share button but still FB shows no image. URL: http://bit.ly/kgA0fP

      However, on checking with URL Linter, it shows the image exactly as it should be. This issue is persistent all over the blog.

      What could be the issue?

      Thanks
      Abhi

    2. This is a wonderful guide for static pages, but how do you handle blog posts that each have their own images and my not be selected as a featured image?

      • Thanks MaAnna. You should read this article I wrote about adding the Open Graph tags to a WordPress blog: bit.ly/a6i8WF

        Basically, you have to edit some of the core WordPress files (such as header.php) to add the tags and provide PHP variables for the titles etc. That post should help a lot.

        And, BTW, it’s listed in the “External Resources” of this post :-)

    3. Yippee! This is great thank you! I have a WordPress blog using the Thesis theme and FYI for that you can get Thesis Openhook plugin and add all the code to the WP Head area – it worked! Thanks a million!

    4. Hey Tim!

      I have a question about content on iframes. I’ll give you an example…

      This is a code that firebug finds when I check some custom fan page middle box:

      So here it is, the app ID. Now, how do I get the app to show on its default page where I can inspect the code? I would really like to know that to be able to understand how certain things are done by competition:) Thank you so much!

      p.s. I thired to add the app ID to the end of app homepage URL but I guess this isn’t the right way of doing it. I only get redirected to FB homepage.

    5. Vik Kumar says:

      Hey TIm, awesome article but got a question for you.  I have a list of events on the home page and each has a like button associated with it.  These like buttons also have meta tags in the head.  Now when I type the home page URL into the status bar on Facebook I get images for events showing up in addition to the site logo image that I set by following the instructions above.  I do not want anything other then the site logo showing up when someone puts in the URL for the homepage of my site into the FB status bar.  Any hints or ideas?

      Thanks,
      Joe

      • I believe that the og:image you specify (and you can have multiple og:image tags) would be the defaults. As for preventing other images on the page from showing up as thumbnail choices when someone posts a link to your page in a Facebook status update, I’m not sure if you can do that. If you find out a way to do this, please post it here!

    6. Fabio Ugolini says:

      Hey thank you very much for the Facebook Cache tips!
      It solved my Thumbnail image problem!

    7. Hi Tim,

      I have a question that maybe you can answer, in the message that is sent to the friend, how do you control the site domain link?
      I noticed that on some sites, the link is not click able, and on some it is.
      In your example above, you can see below the title that there are a http://www.hyperarts.com link, this is causing some problems for me, as I want to track clicks on the links, and this url dosn’t have anything to track as it is a standard url to the base url. Any ideas regarding this?
      (I have set the ref value, it does get set on 1 of 3 links, so then I added my own tracking variable, it got set on 2 of 3 links, so now it just the matter of this last link in the message)

      • You might check Facebook Insights for those clicks, if you can’t find a way to track them with Google Analytics.

        • The problem is, we kind of use dynamic links for each user (?id=), then the site picks up how many clicks each user generate each month. But this last link cause a problem, as some users probobly will click on the “wrong” link :( kind of sad that facebook dont add the ref value to all links in the message. Oh well, 2 of 3 is good enough for now i guess :)

    8. This is a great post but i had a query. 
      When i use facebook debugger and add my link, after few attempts, i get correct desc and photo and it look like everything goes fine..
      but all off sudden next day, again the sharing start working wrong. (see the pic).

      When i debug now, it says 
      Error Parsing URL:Error parsing input URL, no data was scraped.I dont understand what the problem is.some times it works fine, and all off sudden it again ggoes abnormal

    9. Very useful information but still i am having problem with my Blogger blog, whenever i tried to publish my blog posts on Facebook i just get simple URL link of my blog and there is no Titles, Description and Image Thumbnail on it. Can you tell me what should i do to get my blog post links submit with Titles and Description on Facebook.

      • I don’t think you can control the elements you need to if your blog is hosted on Blogger or any other blog hosting service. You need to have a self-hosted blog.
        You might check out the Social Plugins available for your blog.

        • Thanks for your reply, Tim i am already using Social Sharing Plugin on my blog and you can also check my website TechGlobeX as mentioned with my name but still after applying all above procedure i am getting same problem when publishing any posts. Some time my link shows titles, description and images but sometime it doesn’t shows. You can check and test it by your self if possible. Thanks

    10. What a great tutorial.

    11. Hey Tim,
      Thanks for this great post. I am still having some trouble though. After adding all the open graph tags everything works great when someone does a status update with a link to our website. http://www.swaggercard.com.

      On one of our pages http://swaggercard.com/scholarship.php we have the like button which works to like our FB page but when the pop-up to add comments and post to your wall comes up it shows the generic FB info and doesn’t pull in our image or content.  I can’t figure out why it works on a status update but not on a like button comments.

      Any ideas would be greatly appreciated!

    12. When I click your Like Button on the scholarship page, it pops up the comments box with your OG image and description. and it’s set up to Like that specific page, not your Facebook page. Have you changed it since this comment? I looked at your OG meta tags and they seem to be working fine.

    13. itsbarry says:

      Tim nice job, very thorough and informative article.
      Question for anybody, what are some good WordPress plugins for automatically adding FB open graph meta to the header and to image tags?

    14. Tim thanks for a great article. maybe you can offer some direction here. I am using social comments plugin on our ecommerce website and have it on each product page. Of course our product pages have several images and of course facebook chooses at random which one to display. I would like to be able to choose which image it uses but that would require some sort of dynamic option in the meta tag to choose the selected image since we cant hardcode an image url like you suggest above we do this with each product page top get a seperate url for each comment <fb:comments href="getCurrentUrl(); ?> on the page the user is on. Maybe we can do this for the image as well but have some control over it any ideas?

    15. There is no text showing up in my description.

    16. since I moved website hosting, can not share on facebook thumbnail image, is there a configuration to be done on the new server?

    17. Fantastic. Thanks for the help.

    18. Hi. This is great article. I have one question, if I dont want my link to show image or text in facebook status what to do? I want just my website link to appear instead of popup dialog that takes image and description. What steps to follow. Thanks.

    19. Hi–I’m a WordPress newbie. I’m trying to change the image that appears when I post links on my facebook. When you say copy the tag in the tag of your web page, what does that mean exactly? Where can I find the tag? Thanks.

    20. Tim:

      I realize this post is ancient, but I could really use your help.

      I have followed your instructions and cannot get things sorted out. When using the Linter, I keep getting “The image referenced by the url of og:image tag could not be downloaded.” It then defaults to a thumbnail I do not want used.
      Any ideas?
      http://www.starvingartistsent.com

      • I’m afraid I’ve never heard of this problem. However, I looked at your home page source code, and I see that the OG meta tags are all inside your tags. That may very well be the problem.
        And I don’t get why you have the opening and closing comment-out tags around the styles.

    21. RichHeimlich says:

      Tim, (or anyone) I know it’s been a while since this post but it’s my only lead. I recently moved my blog from one domain to another. I’ve changed every reference to it everywhere including every WordPress database entry. However, when Jetpack automatically shares my posts to Facebook they insist on showing it with the old domain name. For now it’s redirected but it’s annoying me to no end. Does anyone have ANY idea where this is coming from and how to stop it?

    22. Catherine Kupke says:

      Thank you for this, I have applied the first code to my page, img code, title and description. It is all working from desktop computer, but not mobile device. Share function on mobile device works, picks up meta, just no image. More tips, greatly appreciated.

    23. boroo_c says:

      i make below code…

      it is not working…

      • Generally, I don’t provide beginner-level HTML help, but your link to the image is incorrect. You need the FULL URL in the href value.
        Try W3 Schools for more assistance is using HTML and Web coding in general.

    24. No more gross looking Facebook posts :) Thanks!

    25. Mohamed Shimran says:

      in blogger it’s there already if not add this to your head

    26. Thank you so much for your help on this!

    27. Hey if you have a WordPress site, you can do this with a plugin! Install Yoast and then see the “Social” settings to set this up easily without editing code!

    Speak Your Mind

    *