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:
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:
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:
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).
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:
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
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:
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:
"name": "Tim Ware",
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.