Why are images not displaying in my link preview?

When sharing links on social media, we often have no control over what thumbnail image will be pulled from the page.

There is an easy fix for this problem: Open Graph Meta Tags.

The Open Graph protocol was first created by Facebook and is used by many other services today for extracting and displaying a page title, description, URL and images in a social post. This can be set via custom meta tags on the source page.

All Open Graph meta tags are prefixed with <og:> then continued with more 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