Introduction to Open Graph Markup and Why It's Important For Social Sharing

I've dissected a lot of websites that were not performing well, or produced completely unexpected results. One problem that seems to be appearing more and more is the inconsistent way that social networks are reading a web page and pulling information that you want to share. You see, you try sharing a link on Facebook, Google+, Twitter, and LinkedIn, and they will quickly spider the URL you are sharing and make suggestions for the images, descriptions, and headlines. Sometimes the suggestions are perfect, and sometimes they can't be more wrong.

Facebook is very frustrating when it provides a selection of 8 different images to share from a page, yet none of which are the actual image you really want. Questions about image sharing to Facebook are probably the type I most often receive.

Caching of Social Sharing Snippets

Left to their own devices, the social networks will read and show the page title and meta description of the web page you are sharing. It can be rather inconvenient when you want to share a page to Google+ and Facebook, only to see that the auto generated title and description are rather inappropriate. What's even worse is that those social networks will cache those snippets of information instantly, so there's no way to fix them once you've suggested a link that you might share.

Let me say that again... As soon as you copy and paste a URL into the status update field, Facebook and Google+ will spider your web page and cache the settings you have. If at that point, you realize that the settings are wrong, well, there's nothing you can easily do about it. Even if you cancel the status update an fix your page, the social networks will draw from their cached resources instead of reading your page a second time.

In order to share the best titles, descriptions, and images to social networks you'll have to plan for that ahead of time.

Planning Social Sharing Snippets

In 2010, Facebook introduced something called "Open Graph." In essence, the Open Graph is a set of meta tags that you can place in your website code that tells Facebook exactly what to display when sharing a web page. The information in the Open Graph tags does not have to match the information in your page title or meta description.

Because the normal page title and meta description appear in search results, you've probably spent a lot of time tweaking those for the best SEO performance. However, what's appropriate to appear in Google search results is rarely good for the attention grabbing effect needed when sharing to social networks.

All throughout our day our point of view shifts depending on our location, what we're doing, the last conversation with someone, and even if we laughed or cried a moment ago. Our point of view when using a search engine is completely different than our point of view when scrolling through social posts.

For example, a page explaining watch repair might have the title "Watch Repair - Totowa NJ 07512 - Perosi Jewelers," but that title would not work as a headline on Facebook. With Open Graph, you can create a more appropriately engaging page title like "What would you do if your watch broke today?"

Implementing the Open Graph

The full directions for setting up Open Graph on your website are found here.

To use it you need to add extra meta tags into the head area of your web pages. The above example would look like this in your code:


The special "og:title" meta tag will usurp the normal page title when social networks read it. The correct implementation of the Open Graph would include a way for you to edit every possible OG field for every page of your website. This is exactly like the process of editing the SEO settings for every page of your website, but like I said, from a different point of view.

While there are several potential OG fields you can use on your website, you are required to have these for:

• og:title - This is the engaging title you want to appear on social media.
  
• og:type - The types will have to be set to "website," "article," "book," "profile," or "article." There are two other more complicated types for music and video that are explained in more depth here.
  
• og:image - This is the correctly associated image that social networks should use for this page.
  
• og:url - This is the canonical URL for the web page.

Pitfalls of Open Graph Implementations

While dissecting various websites, I've often found conflicting Open Graph implementations on the same page. It seems like every content management system has their own set of plug-in and widgets for every social network. While some of these widgets are designed to be useable for all social networks, some are designed for specific networks.

One recent example I found was a plug-in designed for Pinterest. This plug-in correctly produced a set of "og:" tags that Pinterest recommends. However, what the plug-in didn't recognize, nor did the programmer setting up the website, was that there already existed a Facebook OG plug-in that created conflicting "og:" tags for the same page.

The duplicate "og:" tags created erratic results when sharing to social media. The simple solution was to delete the Pinterest plug-in.

Today's Conclusions

When it comes to content management system widgets and plug-ins, you never know how they will adversely affect your code or conflict with some other existing code. Many of the individual social media plug-ins are especially troublesome and cause the conflict I explained above.

No matter what system you are using, you should always have a programmer double check the functionality of the extra widgets you install.