After getting a shiny new website the first thing you want to do is get on Facebook and share a link with all of your followers. You may be disappointed when you type in your address and Facebook shows an ugly preview underneath your post.

I recently finished building a site for my client, Bill Thomas Performance Horses. We were excited to show off the fully redesigned site on Facebook only to be dismayed by the preview when the client went to share for the first time.

Facebook uses its ‘Open Graph’ system to generate these previews by reading Facebook Open Graph Tags. These are bits of information inserted into the site that declare how we want the preview to display within a post.

If a page doesn’t have Open Graph Tags, Facebook will try its best to generate a preview. As you can see here, it’s not a good idea to rely on that.

We can use a WordPress plugin to make the process of adding these tags much easier.

Find, install, and activate the “Open Graph for Facebook, Google+ and Twitter Card Tags” plugin. Then, navigate to the plugin’s Settings. The plugin offers a plethora of options but there’s only a couple we have to worry about.

On the Settings page for the plugin, under the General tab, you can add a featured image for the site. Please note that this image should be 1200 by 630px.

Adding this featured image will make it available as a thumbnail choice when sharing any page on the site. However, it’s best to set individual featured images for each page.

You can set a page’s featured image by navigating to the page and finding the plugins setting box on the bottom of your screen. If you can’t see the settings box, make sure that the plugin is active in your screen options tab on the top of the page.

Any type of image can be used for featured images. For example, when your homepage is being shared, it’s appropriate to have an image of the actual page. This gives users a true preview and an expectation of what they will find when visiting the site.

Designating an image for each page will prevent Facebook from grabbing a random image from your design and using it as a featured image.

Adding a description for each page will force Facebook to display that rather than using the first string of text it can find, whether it makes sense or not.

In my case, I’m using the Yoast SEO plugin. This means that the Yoast META title that I have already set will be used for the Facebook share description.

This shouldn’t be a problem because most good META titles can easily serve double-duty as a Facebook sharing description. In some cases the META description will also be used.

We can use the Facebook Sharing Debugger Tool to see how our site is being crawled and what the preview will look like. Enter the URL and click “Debug”.

The tool will show you when the last crawl was along with a preview of how it will appear in the news feed. There is also a section that shows the Open Graph Tags that Facebook was able to collect.

Our plugin has set Open Graph Tags for the description and image. But, the preview still isn’t showing correctly because the site hasn’t been crawled since we made our changes.

Next to “Time Scraped” you can click on “Scrape Again”. In this case, we successfully removed the short-code that was being displayed as the description. The preview now shows our page META title as the line of text under the image in the preview.

I found that Facebook was still having trouble displaying the correct image size for some of my blog posts even when I had the correctly sized image uploaded and designated. This problem was fixed by going into the Facebook section of the plugins settings and selecting “include image dimensions”.

Head back to Facebook for the final test. Your preview should now show the proper image and description. Share till your fingers bleed!

Proper installation of Facebook Open Graph Tags is a priority for all of my Monthly Website Management clients.