Customizing the Facebook Thumbnail and Page Title When You Share a Link from Your Website

When you share a link on Facebook, it will automatically populate the page title, description, and an image from your site based on the web site address you are sharing.

What if you don’t like the way it looks and want to change something?

First, see if you can edit what you want the easy way. You can change the title and description by clicking them to make them editable and adjust the wording. If you have any images on your site, you’ll see a “Choose a Thumbnail” option. See if you have any choices. In my example I have four images to choose from.

 

How to change the thumbnail image

Sometimes, you don’t have an image available. In my case, I would really rather use my own logo for my thumbnail to help with branding, but the image wasn’t one of my choices.

What we need to do is tell Facebook we want to use a particular image when posting. This will require you to be able to add some code to your metatags on your website.

You will need:

• Access to your website’s code and ability to change the metatags
• An image file that is 200 x 200 pixels or larger uploaded to the web someplace where you can get a full path to it

All we need to do is add the following OpenGraph image tag to our website. Add the following code to the top of your webpage with the other metatags. Change the path of the content to your new image and save/upload the page.

<meta property=”og:image” content=”http://www.yourwebsite.com/images/fbthumb.png” />

Tah dah…

I did exactly what you said, but it didn’t work. I’m not seeing the new image.

I had the same problem. First, double-check your code and path to ensure they are set up correctly. I did some more research, and found out all kinds of small things that will mess you up.  Any of the following can tank your image.

• Image files must be at least 200 x 200 and saved as a jpg, gif, or png.
• Images files must be between a 1:1 – 3:1 aspect ratio. “Perfectly square” is a 1:1 aspect ratio. Three perfect squares side-by-side with no space between them is 3:1 aspect ratio.
• Facebook keeps things in cache even if your  browser doesn’t. I’ve seen Facebook hold onto a cache for over a week. Try a new page URL due to cache issues.
• Facebook doesn’t like transparent images. Keep your images flat without transparencies.
• Facebook can be bugged occasionally and stop working. Try again later.

Extras

If you think this is the coolest thing since sliced raccoons, you might want to explore the other OpenGraph tags on the Open Graph Protocol website. You can adjust your default title, url, image and a lot more.