Unraveling Facebook Open Graph – Part 2

Hello again! Welcome to Part 2 of Unraveling Facebook’s Open Graph (OG). As I mentioned in my previous post about Facebook’s Open Graph, this may seem like some common sense information, but I think it’s great to show examples to really help people understand different ways that OG can currently be utilized.

In my last post, we talked about image tags, description tags, and making sure the right main link is displayed while shared.  Next we’ll go over a few more tags (books and location) as well as check back into the comments to answer some questions here.

First, let’s jump right into books.

<meta property=”og:type” content=”book”>

I wanted to jump into books  a little because I found a really good example of how Facebook pulls in books and also how the linter tool that I mentioned in my last post helps. There are multiple “og:type” properties that you can use- I showed you the content=”movie” tag previously where you can “like” a movie on IMDB and have it automatically pull into your Facebook “Arts and Entertainment” section.

The book tag is extremely important if you’re selling or sharing books on your site and want to promote yourself this on Facebook. Here’s an example:

I hopped onto Barnes and Noble to like a book, Tina Fey’s Bossypants. When I first ‘liked’ it, I noticed that it pulled in Adelle’s picture (for a CD I’m pretty sure- not even a book). It wasn’t mentioning Bossypants. HOWEVER, it did link back to the Bossypants page so I knew it wasn’t a total fluke. The og:image code on the Barnes and Noble site was showing the Tina Fey, book and yet it wasn’t populating on my Facebook page. I started getting curious as to what was going on here.

I took the Barnes and Noble URL and pulled it into the Linter Tool (mentioned in my last post) and ran it through. That also pulled an og:image tag with the Tina Fey book and not the rouge Adele picture that mine was showing.

It looks like (to me) Barnes and Noble recently edited some incorrect og tags at a product level and Facebook didn’t scrape it yet and update. I just helped that issue. The Lint Tool forces Facebook to scrape and correct any changes that were made, so immediately after I scraped this page, I reliked (is that a word?!) the book and it pulled in the appropriate cover and title.

This is a quick fix if something you “like” isn’t sharing correctly but you know the code is right on their site.

I also went onto Borders.com to check out what kind of tags they were using, and if they were different than what Barnes and Noble was doing. Looking through there, I immediately noticed that they were utilizing the og:ISBN tag, which can be used to tag the book with it’s actual ISBN number.

Facebook Open Graph is still in its infancy so this actually hasn’t populated any differently on my Facebook page, but I suspect that if/when Facebook moves in more of an all encompassing social and e-commerce type site, it might hold the ability to check out from external book stores if the ISBN is provided.

I went ahead to explore further and “liked” Rework on Borders.com.

I did notice that when it pulled in both the Barnes and Noble and Borders books into my Facebook “Books” area, the books displayed  under my “Arts and Entertainment” section and linked directly to the book’s respective pages. From a business standpoint, this is extremely helpful in helping users in my social graph find and locate books to purchase through my similar interests.

I then also manually edited my books to include “Rework” without actually liking it off of the Borders page.

You’ll notice that it’s a generic dummy page for the book and it also takes me to a generic auto-populated Facebook page.

By “liking” it on the Borders page and having it display on my profile, under “Arts and Entertainment” with a link back to Borders, I’m not only helping friends find where to purchase this book but also promoting it externally without any extra effort on my part.

It actually takes more effort to go in, edit my profile, type in “Rework” under books, only to have it point users to a Dummy page where they can’t make a purchase. This will definitely lose potential customers and should also scream out to all bookstores to make sure they’re using these tags correctly to help push users through the sales funnel when utilizing the Facebook platform.

Location

You may have noticed whens that there’s also the ability to pull in latitude and longitude when working with OG. When done appropriately, it sets the stage to allow for others to find your location directly into a Facebook places page.

Arbors by the Sea, which I also mentioned back in my other post, makes use of these tags:

og:latitude

og:longitude

og:street-address

og:locality

og:region

When looking at the Arbors page on Facebook, the places page was merged with their Facebook page. You’ll see that the latitude, longitude and address help populate a map for users to actually get directions from.

Under ‘Local Business’ it also pulls in the “Longboat Key, FL” area as a long to that location page. If you have a real, physical location it’s extremely important to be sure to add in these og: tags. They’ll help identify and drive users to your physical location through Facebook.

Pushing Equity Towards one URL

Someone in the comments on my last post brought up a really good question and I know other people have this question too. They asked if it would help search equity by tagging various items on your site but directing them with og:URL to the main page in order to push equity there as opposed to the product page.

This isn’t a very good idea when working with social and social search.

One of the key differences between social and search is that you’ll experience major drop off if you’re purposely directing users to the main homepage in a Facebook share rather than the product page. In search, users are explicitly seeking something out and clicking on a search result to find that information. If they’re taken to the homepage, they know it’s relevant and they’re likely search within the site because their original goal and intent was to search up something.

It’s extremely easy for users to pass over things that aren’t working correctly on Facebook- mainly because they weren’t purposely seeking it out.

Social sharing works with the power of suggestion.

When they see it, and get an inkling to share and check it out, they expect it to work perfectly without a hitch. Otherwise they might get uninterested.

Why do people socially share?

• Social sharing is quick and easy
• Users often trust products/services/recommendations from others in their social graph over ‘customized’ search results
• Instant gratification factor of clicking what a friend has shared and being instantly taken to the page
• People aren’t necessarily using social to “search” for things; at the moment it’s more of an opportunist arena where external sites can optimize and get their product in the minds of the person’s social graph.

Why do we bother optimizing with og: tags?

We want to allow our consumer’s social graph to click and instantly be brought to the product/article/page that we’re sharing without any potential extra clicks on their part. The more clicks to find something shared on Facebook, the easier they could drop off from actually getting to the product/article page.

Take this scenario:

• We find a book that we absolutely want to share and “like” because others in our social graph may have the same interest in it. Personal recommendation.
• We use og:description so that our friends can quickly skim and read more about said book.
• Our friends can check out an image of the cover that gets pulled in when set with og:image.
• Friends can also see that book showing up under our “arts and entertainment” section when looking through our information.
• They click this from my profile information and they’re taken to the product.
• This can ultimately result in a sale for the book company because of how easy it was to view, locate and click.

We also have to consider how far a person, who sees an item “liked” on someone else’s page, will go to find that actual item. Social media and social sharing taps into that “instant gratification” factor. Let’s use the Tine Fey example above. If I saw the Tina Fey book pop up on my friends page, and it had the Adele picture, I may ignore that. But as soon as I click that link, I’m expecting it to direct me to the page for that book.

If it takes me to the Barnes and Noble homepage instead of the product level page, I’m likely to leave and not search any further. That would be the drop off point for potential customers.

Best practices with images:

Another person in the comments brought up a good question about images. They had asked how to choose an appropriate og:image to use and also how to prioritize images when Facebook pulls in multiple from your page.

First I’ll talk about choosing an appropriate image. As you can see in the Book example above, choosing the correct og:image is extremely important for sharing on Facebook. It’s the first thing a user will look at, and also the first thing that can cause confusion.

When choosing an og:image, I recommend making sure that the image you’re choosing can be viewed easily in the image box. Make sure it’s not an overly complicated or busy image and that there isn’t any small text on it. Make sure that the image is highly relevant to what is being shared. If it’s a book- then make sure it’s the book cover that’s being shared. If it’s a business, the logo is best. If it’s FOR a business but at the product level, make sure you’re sharing the actual product image.

For instance; I liked this song on Grooveshark (awesome song, by the way). When I liked it, it pulled in the album cover for the artist.

Now let’s say that Grooveshark decided to pull in its company logo instead of pulling in an image at a ‘product’ level. This is what happens:

Not as effective right?

One thing I’ve been looking in to and hypothesizing about is actually the second part of this question.  For multiple images (when not designated by an og:image tag) it looks like it starts pulling the biggest images first by width (excluding the RESIZED image. This is using the actual image size pre-resizing). I experimented on a couple of sites and that seemed to be the most predominant practice that Facebook exhibited. It tended to skip over the small ones initially, but then mixed them in the further into the thumbnails it went. It seems like an average mix of both- but larger ones are predominantly first. I’ll be looking further into this.

I would avoid pulling in multiple pictures and recommend only using the best and most appropriate images. There are exceptions however. If you’re a car brand you may want users to be able to choose from different car colors for the particular model that they’re sharing on Facebook. In this case, you can try something like that. If you want to have multiple pictures and you haven’t assigned an og:image tag yet, you can actually hide images in the body of your post. They won’t be visible to the user, however Facebook will still scan this code and populate these pictures.

<body>


<img src="http://bluecar.jpg" width="41" height="41" border="0" alt="image description" style="visibility:hidden" /><br/>

<img src="http://redcar.jpg" width="41" height="41" border="0" alt="image description" style="visibility:hidden" /><br/>

</body>

With the code up above, you should be able to have hidden images within your post/page and have Facebook grab these and pull it in. I haven’t experimented with prioritizing these yet as I mainly stick to one image, but perhaps that will be something I’ll include in my part 3 post. Yeah, I said it. There’s a part 3. :)

I hope the above information helped to shed more light on why and how to properly optimize your site for Open Graph. When optimized correctly for sharing, it can really help drive conversions and sales- and at the same time you can lose out on both when you have mistakes and errors.

I hope you join me for my next post.

———-

If you’re interested in keeping up with us or have questions about the social media space, follow BlueGlass on Twitter or Like us on Facebook.  If you’re interested in just knowing more about US,  follow our BlueGlass Tumblr.