You’re keen to get your company website out there for all to see. One of the easiest ways is by sharing it via your social media accounts, but when you paste your link into Facebook a really random picture appears (or, worse, no picture at all) along with a few words from your website that you can’t seem to alter.
It doesn’t present the best impression – either that your company isn’t all it’s cracked up to be, or that you don’t have the faintest clue how the 21st-century works. So here’s how to diagnose, test and fix your Facebook-sharing failings.
Get to Debugger
Handily, Facebook makes testing how your site will show up really easy – the Sharing Debugger.
Paste your full URL in the box and let’s see what’s going on.
Oh, well, that’s interesting – I haven’t even sorted my link out. How embarrassing! OK, so let’s fix it.
Facebook scrapes your website looking for information to use for the preview. If it can’t find any specific information, it will take the first content image it comes across along with the first couple of sentences from your linked page.
How to fix it
You need to tell Facebook specifically what to use using what are called “og properties” (og stands for Open Graph). These are lines of code that are placed in the head section of your website’s code. If your site is built from scratch, you will have an area in your code wrapped in tags that look like this:
<head></head> (you would see your Google Analytics code in this section as well, if you have that set up).
If you have a WordPress site, there could be a number of ways to add this code. Some themes (such as the Genesis theme that I use as a starter for my website designs) have an area where you can add code into the header area. For others you may be best to use a plugin – you can find out how to do that here.
What code do I need?
At a basic level you need four things: a title, an image, your site name and a description. Here’s an example of what that might look like:
Breaking that down, the “title” will appear as the headline of the preview; the image is obviously the preview image that appears (there are guidelines on the dimensions and file size from Facebook); the site name is the name of your website or your company name; and the description is the brief bit of text to describe what you do.
Back to the Debugger
Once you’ve edited that and added it to your head, you’ll want to test it again. Make sure you’ve cleared your website’s cache first (if it’s using a caching system). Click the “Scrape Again” button and let’s see what’s happening now.
Success! Mr Cat is open for business and anticipating your call. Better still, that version of your site link has now been stored by Facebook. When you go to your profile and paste your site’s link in there now you should see the updated version. Aces.