8
Jan
2015

Share Links on Facebook with an Image

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:

Property Description
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.

Example Use:








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

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.

Final Thoughts

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!

Share This:

Tags:

Comments:

View (0) Comments Post a Comment
  • Replying to Adam Konieska on Developer Guide to Sharing Links with Images and Metadata on Facebook