Blogger to WordPress: Facebook Photos

As our conversion from Blogger to WordPress was completed, it became time to focus on some of the background tasks required when writing a post. This meant looking at ideal photo sizes, proper keyword usage and placement, re-categorizing and tagging old posts and making sure each entry was SEO-optimized. This would become very important when it came time to share on Facebook, Twitter, Pinterest, etc.

One of the most frustrating things to try to decipher was the Facebook share. Like hitting a moving target, their scraper seemed to follow no regular set of rules. Sometimes it would grab the featured photo, sometimes a random photo and other times a 150×150 ‘bug’ to use as the Facebook photo.

Don’t believe it? Here’s a couple recent examples. First is post for Sutakku, just posted a few days ago.

You’ll notice the timeline shot has the correct featured photo. But take a look at the last “Blogger to WordPress” article we wrote:

That’s definitely NOT the featured photo we chose.
There are many other examples of Facebook using the wrong photo, so what the heck is going on? Why isn’t the scraper consistent?

First, like any good blogger, we are using the Yoast WordPress SEO plugin to assist us when we write and to verify our keyword placement. Yoast also adds the Open Graph tags for the images in your post (“og:image”). These tags are supposed to tell scripts which photos you want featured when your content is shared. It is possible to have more than one image listed; the key here is images that aren’t tagged are not supposed to show up as a thumbnail option when it is shared. In Yoast you can set one image to be the only image for a Facebook share via the social tab, but we’ve found that Facebook still ignores it.

Here’s what we’ve determined after hours upon hours of testing and researching. First and foremost, it does appear that Facebook’s scraper prefers images that are either uniform in width & height (perfectly square) or images that have a width or height that is evenly divisible by 100 (eg. 900 x 434 or 1024 x 700). This is undocumented, but numerous other users have experienced the same results.

Facebook does try its best to honor the og:image tag but takes it one step further.  It always picks the largest photo from that list, regardless if it is featured or not. Our featured photo is 750px wide while post photos are 712px wide. This helps Facebook to always pick our featured photo since it is the largest. In my iTunes post I included a screenshot that was much taller than the other photos, so Facebook elected to utilize that one as their thumbnail. As I write this I see my “view source” photo just above is larger also, so I must assign a specific photo in the SEO plugin to be the one used by Facebook else it will just grab the big one.

One exception we have discovered and this occurs right after you publish your post. If you go to share it right away it is highly likely that the scraper will find not only the wrong photo but an erroneous description and URL as well. There is a way to ‘fix’ it.

Enter your URL in the debug field at Facebook’s Developer Site. This will force a re-scrape immediately of your page and generate any errors that Facebook thinks need attention. The photo usually updates within a couple seconds. It will also confirm that your “og:image” tags are set correctly. The description will update immediately and is a valuable tool if you make changes to your first paragraph or use the SEO plugin to write a custom description after publishing.

To summarize, to help chase this monkey and force Facebook to use the photo YOU want it to use, follow these rules:

• Use either square photos or photos that have at least one dimension that divides by 100 evenly.
• Use Open Graph tags either manually or by using an SEO plugin.
• Make sure your largest photo is the one you want to be your thumbnail on Facebook.

Get into the habit of testing your sharing icons right after you publish to make sure Facebook and others are submitting your information the way you want it to be seen. There is nothing worse than finding out people are sharing/pinning/tweeting something that has the wrong URL associated with it!

If anyone from Facebook’s developer program is reading this, here’s a very simple solution to most of the problems. Pinterest implemented a couple tags we can use to disallow a photo from being pinnable – the most common being the “nopin” tag.

<img src="yourimage.jpg" nopin="nopin" />

With a similar Facebook-specific tag we could tag any image on the page (ads, bugs, etc.) and prevent them from being used as thumbnails on our shares. Of course, this is too easy to implement…