OG Tags – Sharing links to facebook

Ever shared a website to facebook and the box that pops up has the wrong picture, the description is wrong or the whole thing is referring to the wrong web page completely? It’s very simple to put right with og tags in your metadata.

  1. Make a 1200 x 630 pixel image and upload it to your webspace
  2. Add the relavent metadata with og tags into the <head> section of your code (or use the Yoast wordpress plugin!)
  3. Test using facebook’s sharing debugger tool
  4. Share away!

Let me explain…

First off, WordPress. I resisted the Yoast plug-in for a long time, but it’s made my life a whole lot easier! Not only for SEO guidance, but the ease of sharing pages and posts to social media. You can easily define how you want the post to look on facebook and twitter in a very simple box.

But, enough of plug-ins. Let’s get down to the code…

OG Tags – The Open Graph Protocol

“The Open Graph protocol enables any web page to become a rich object in a social graph. For instance, this is used on Facebook to allow any web page to have the same functionality as any other object on Facebook.”

Using the OG: properties in your metadata, you can define how the page will look when it’s shared on facebook. There’s a whole host of optional properties you can use, but only 4 that are required. These are:

  • og:title – The title of the page
  • og:type – e.g website, or article
  • og:image – the path to the image you want to display
  • og:url – the url of the page

Plus, you’re going to want the description in there if you’re sharing to facebook:

  • og:description

You can find out all the information you need on OG metadata from the Open Graph protocol website, and best practices for facebook sharing here. You’ll also find the link on that page to the facebook sharing debugger tool, which is super useful for testing what your links will look like before you go ahead and share them!

Images

Facebook recommends images that are at least 1200 x 630 pixels, so that’s what I stick to. I tend to make images specifically for use in the OG tags, making sure it renders properly. If you share my latest portfolio post for example, you’ll see the following:

meta og tags | Sharing links to facebook

It’s really simple!

  1. Make your 1200 x 630 pixel image and upload it to your webspace
  2. Add the relavent metadata with og: properties into the <head> section of your code (or use the Yoast wordpress plugin!)
  3. Test using facebook’s sharing debugger tool
  4. Share away!

I hope this helps someone out there. If you need some help, please do 

Get in touch!

About the Author:

My name is Ben White. I am a freelance Web Designer, Graphic Designer, Audio Technician, and Video Editor. I studied Sound Design Technology at the University of Hertfordshire & I also write & make my own music (but you know all this already don’t you?)