Make Facebook Use the Right Image on Your Blog Post

Client Resources | Programmers

Make Facebook Use the Right Image on Your Blog PostEver try to share something from your blog post on Facebook and it adds some random image from your blog? Using Open Graph, you can tell Facebook exactly what image to use whenever your blog posts are shared.

Using Open Graph

Open Graph itself is quite easy to use. You’ll want to add the coding below into the HEAD area of your page. If you aren’t use to HTML, you’ll need someone to do it for you. Otherwise, anywhere in between the head tags will work.

<meta property="og:title" content="" />
<meta property="og:type" content="" />
<meta property="og:url" content="" />
<meta property="og:image" content="" />
<meta property="og:site_name" content="" />
<meta property="og:description" content="" />

The image property is the fourth one down, but since you’re using open graph, you should use (minimum) the whole list. There are other options as well so I added a link to Open Graph’s website below.

For each of the content= areas above, add the appropriate information – ie, title = title of your blog post; url = your url; site_name = name of your website/blog. The hardest one is probably the type one. If you’re adding this on a blog, it will most likely be article. Otherwise, here is a short list of some popular types:

Businesses

  • bar
  • company
  • cafe
  • hotel
  • restaurant

People

  • actor
  • athlete
  • author
  • director
  • musician
  • politician
  • public_figure

Places

  • city
  • country
  • landmark
  • state_province

Products and Entertainment

  • album
  • book
  • drink
  • food
  • game
  • product
  • song
  • movie
  • tv_show

Websites

  • blog
  • website
  • article

Want to know more about Open Graph? Check out their website.

Make Facebook Update The Info

Once you’ve done the work, there’s nothing more frustrating then Facebook not “seeing” what you did. So to force Facebook to re-log your website, go to¬†https://developers.facebook.com/tools/debug/.

Type your URL in the Debugger, and watch as Facebook finds and relogs your website. Also, since this is a debugger, if you did anything wrong it will let you know.

Images

For images to be used by Facebook, they must be at least 200 pixels by 200 pixels. Any smaller, and Facebook will replace them with another image. BUT note that when I debugged my site, it said the image was too small (it wasn’t) and then when I shared the post, it brought up the correct image.

Meh.

Comments