Social linking and sharing is a huge part of any modern website. Facebook had a great way to do this, but requires a few special tags and parameters to make everything display correctly. Here's how to make sure visitors to your site can share a link on Facebook with an image. I've included some developer tips to make sure your image and meta data are displayed correctly on Facebook as well.
Facebook Specific Tags
Here we'll take a look at some specific meta tags required by Facebook. Facebook uses an Open Graph API to handle the data. The OG data should be included as meta tags within the page's head tag.
Facebook Meta Tags:
|og:description||The description for the page. This is what Facebook displays when someone shares the link.|
|og:image||This is the preview image that will be displayed on Facebook timelines and messages when shared.|
|og:site_name||This is the display name of your website.|
|og:title||The title of the page. Facebook displays this when the link is shared.|
|og:url||The URL for the website.|
Testing Facebook Scrape Information
Now that you have the meta tags added to your page, you can test how Facebook processes the tags and how the output will look. Facebook provides a great developer debug tool called Facebook's Open Graph Object Debugger
Using Facebook's debugger tool, you can enter a URL and preview how Facebook will display it when shared. Facebook even includes a link to "See this in the share dialog." which allows you to preview the formatting exactly as users will see it when sharing. In fact, the title image or this post was generated from that screen.
By adding a few meta tags, you can make sure your links can be shared on Facebook, and you can control the formatting.
Have a question or comment about Open Graph API or Facebook sharing? Let me know in the comments below!