Customize your Facebook Links with OG Meta Tags

fbLinksBNR

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?

WITHOUT OG Meta Tags

Open Graph Meta Tags Example 1 - Without OG: Meta Tags

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:title" content="Dave's Tremendously Awesome New Article" />
<meta property="og:type" content="article" />
<meta property="og:url" content="http://www.mysite.com/" />
<meta property="og:image" content= "http://www.mysite.com/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:

WITH OG Meta Tags

Open Graph Meta Tags Example 2 - With OG: Meta Tags

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.