spacex

When we share a link on facebook, twitter, linkedin or any other social media site, an image is automatically assigned to the link based on the images that are available in the website. Apart from the title of the article and the short description that’s shown below the title, the quality and relevance of the display image plays a huge role in whether people decide to click a link or not. Researchers have found that colored visuals increase people’s willingness to read a piece of content by 80%.

Now that we know that the image is important, how do we ensure that the image that is displayed in facebook and other social media sites is the one that we want? I’ll explain how to do it in websites done with PHP and WordPress.

Display Image for websites done with PHP.

The code shown below is the basic code for displaying an image. This code has to be included in the header and pointed to the correct location of the image. This will ensure that the right image is displayed when the website link is shared, rather than facebook or other social media sites randomly assigning an image (from that page) to the link

See below for an actual sample

Display Image for websites done with WordPress

For websites made with WordPress, it’s quite simple. Make sure that you’ve uploaded a featured image while making a page or a post. If you’ve uploaded an image there, then this is the image that will be shown when sharing on social media. For those who don’t know what a featured image is – from the dashboard, go into the edit screen of the post/page you want to work with. On the right hand side there should be a box showing “Featured Image”.

featured_image

There are a few plugins out there that can be used to achieve this. But uploading a featured image removes the need for using a plugin in most cases.

General tips on the image

It is better to upload a large image with 800px width or higher to get a bigger display image when the link is shared. If the image size is small, then only a thumbnail size image will be displayed.

Here is a screen shot from a link I shared that had a small featured image.

small display image

Once I changed the featured image to a bigger one, the image is displayed as show below. Generally if you have an attractive image and it is pops up prominently in peoples timeline, there is a higher chance of a person clicking that link.

Large Display Image

Open Graph Debugger – Facebook

To check if the image for your link will be displayed correctly, you can go to https://developers.facebook.com/tools/debug/ and enter your link and run some diagnostics. This is a great tool to check what image/how the image will be displayed when the link is shared in facebook. Here is a screen shot from the link to one of the posts from my website. Though this is a facebook debugger, once you’ve made the required changes, most of the social media sites like twitter, linkedin etc, will use the same image.

open_graph_debugger_facebook

Was this article useful? If you have any comments or suggestions, please contact me using the form below.