Customize your Facebook Links with OG Meta Tags
So, let’s say that you’ve just written this awesome new article. You’ve gone ahead and posted it on your website or blog, and now you’re looking to share it with all of your Facebook fans — a simple matter of posting a link on your FB page and that’s all there is to it, right?
Well, not so fast — if you go ahead and post without due preparation, the results may not be exactly as you’d intended. The problem is, unless you tell Facebook specifically what you want it to display, it will default to your page’s existing HTML title and description meta tags. As well, if no title or description meta tags are found, it will basically just scrape what it needs from the body of the page.
In terms of thumbnail images, although you are given the option of choosing one of the image files found in the body of the page, chances are pretty good that those options will be less than suitable for your purposes.
OG Meta Tags — Basic Usage:
Facebook employs a technology known as the Open Graph Protocol — this allows you to specify the exact text and graphic to display in your link. It’s fairly easy to customize Facebook links with og: meta tags — all you have to do is add the following into the <head> section of your page. Of course, remember to substitute the content=”…” values with your own text:
<meta property="og:type" content="article" />
<meta property="og:url" content="http://www.warp7design.com/postDev/" />
<meta property="og:image" content="http://www.warp7design.com/postDev/images/OGlogo.jpg" /> &
<meta property="og:site_name" content="Warp Seven Blog" />
<meta property="og:description" content="Cool Facebook Links Using OG Meta Tags." />
Now, the resulting link will display in Facebook exactly the way you want it to — the title, description and thumbnail image are all completely under your control. The link below is to the same page, the only difference is that the Open Graph meta tags have been added:
Note that WordPress users have the option of installing Yoast’s excellent WordPress SEO Plugin, which features support for Open Graph meta data, as well as Twitter Cards.
I’ll be taking a closer look at this in the very near future, and will post my findings right here, so stay tuned!
One final note, if you’re experimenting with this you’ll probably run into a situation where your links do not appear to be changing, regardless of any tweaks you make to your code.
The reason, I’ve discovered, is that Facebook actually caches the page you submit as a link — to empty the cache, go to their debugger page, enter your URL and then hit the ‘debug’ button.
But Wait.. There's More!
Obviously, there wouldn't be any pics of puppies, kitty-cats and gerbils on the actual page — they are included here to demonstrate that if you do not use og:meta tags, Facebook will default to whatever images that it finds on your page.
Don't get me wrong, I really like puppies, kitty-cats and gerbils. If I could, I would include pictures of them on every Web page that I make. If you would like to see more puppies, kitty-cats and gerbils, why not visit www.animalshow.ca? While you're there, please feel free to make a donation!
If you accidentally stumbled upon this page and are now horribly confused, go to this here blog post — that should clarify what's going on here.