Do you see the dreaded “Sorry Image Not Available” message when linking to your blog on Facebook? Or maybe when you link, Facebook shows a cropped section of your header image. Either way, it’s frustrating for your brand not to be presented the way you’d like, especially when you’re marketing! Today, I’m sharing an easy fix that will allow you to choose any image to use when you link to your blog on Facebook. You’ll be able to specifically control whether FB pulls your logo, header, or a profile picture.
Let’s get right to it! Before you start, you’ll need to have the image you want to use uploaded somewhere online. If you’re going to use the logo that’s already in your blog sidebar, you’re good to go.
Step 1: Open Graph Code
Log in to Blogger. Click Theme on the left sidebar.
First things first… Always remember to back up your blog template before you edit the HTML code!
Once that’s done, click Edit HTML. Click inside the html code window (very important!) and press Ctrl+F or Cmd+F to get a search box. What you’ll need to do to fix it depends a little on your template.
Search for <meta content=’logo-link’ property=’og:image’/>.
If you find it, skip to Step 2. If you didn’t find that code, you’ll have a little more work to do, but you can handle it!
Copy the following lines of code…
<!-- Open Graph --> <meta expr:content='data:blog.pageName' property='og:title'/> <meta expr:content='data:blog.canonicalUrl' property='og:url'/> <meta content='article' property='og:type'/> <meta expr:content='data:blog.title' property='og:site_name'/> <b:if cond='data:blog.postImageUrl'> <meta expr:content='data:blog.postImageUrl' property='og:image'/> <b:else/> <meta content=‘IMAGE.URL’ property='og:image'/> </b:if> <!-- End Open Graph -->
Search for <head>, which will be near the very top of your template. Paste the code above immediately beneath <head>.
Step 2: Set your Logo
In a separate window or browser tab, find the image you want to use. Right click on the image, and copy the image URL (or address, depending on your browser).
Back in your HTML editor tab, paste the URL you just copied in place of the words IMAGE.URL. Be sure to leave the apostrophes ( ‘ ) around the URL. Click Save Theme.
Step 3: Refresh Your Info on Facebook
Now the hard part is done, but Facebook only updates the image it uses for your site every now and then (and there’s no way to tell exactly when it will happen for your site next). If you’re impatient, like me, and want to see it now, you can force Facebook to update its info for your site by going to Facebook’s Open Graph Object Debugger.
Just click the link above and paste in your blog URL. Click Fetch new scrape information, and you will see what Facebook has for your site as you scroll down the page.
Don’t worry if it says there are errors that must be fixed. Sometimes things that are good for your blog are seen as errors on Facebook.
That’s it! Easy peasy. No more “Sorry Image Not Available” when you link to your blog from Facebook!