Why Aren't Images Being Displayed in Posts?

One problem many people face with sharing URLs on social networks is that you often have no control over the image and description text that accompany the URL. 

There is an easy solution to this problem: Open Graph Meta Tags

Facebook created a protocol called Open Graph that allows for web developers to turn their websites into  "graph" objects, allowing a certain level of customization over how information is carried over from a website to social network when a page is "recommended", "liked", or just generally shared. The information is set via custom META tags on the source page. 

Essentially, these tags allow you to dictate which elements (like title, image, url) the social network will pick up on when your link is shared. 

While initially created by Facebook, for Facebook, the open graph protocol is now used by other services as well.There are several META tags used to allow you to customize how your website is shared.

All Open Graph META tags are prefixed with <og:> then continued with more specific the specific property to be set.  The data relative to the property set goes within the <content> attribute:

<meta property="og:{tagName}" content=“{tagValue}”>
Using this simple META tag strategy, you can tell the social network what images, text, and more to use when sharing your webpage.  Let's review a few key META tags!

Open Graph Meta Tags

image

The image META tag directs the social network you are posting to to use the specified image when the page is shared:

<meta property="og:image" content=“http://davidwalsh.name/wp-content/themes/klass/img/facebooklogo.png”>

title

The title to accompany the URL:

<meta property="og:title" content="Facebook Open Graph META Tags”>

In most cases, this should be the article or page title.

url

The URL should be the canonical address for the given page:

<meta property="og:url" content=“http://davidwalsh.name/facebook-meta-tags">

Familiarize yourself with the canonical LINK type if you aren't aware of its purpose -- it could help your SEO out greatly!

site_name

Provides the social network the name that you would like your website to be recognized by:

<meta property="og:site_name" content="David Walsh Blog”>

type

Provides the social network the type of website that you would like your website to be categorized by:

<meta property="og:type" content=“blog”>

Feedback and Knowledge Base