Better Facebook sharing with Opengraph Metadata

With Facebook as much of a force in web marketing as Google these days, it pays to factor it into your web marketing work.
(Here you can see that Facebook remains at No. 2 in Alexa’s global websites, just behind Google.com: http://www.alexa.com/topsites )

Quick Refresher:

You may remember one of the key differences between search and other channels. Search can be described as “sit-forward” style of customer engagement, while Social Media is “sit back”. Google and other search engines are “sit forward”, in that people tend to be at a desk, or at least engaged, because they are looking for something.

Sit back marketing is what you get on Facebook on the whole, and is rather like traditional TV advertising. Your targets are not actively looking for anything, but you are hoping to grab their interest with your message during their leisure time. While the principle is worth bearing in mind when planning any web marketing activities, I’m going to look here at some of the mechanics of making your Facebook “shares” work well.

To get to the point...

Probably the most central mechanism of Facebook marketing is the “share”. This involves posting a link to some of your (or others) web site content on Facebook, be it in a personal Facebook profile, business page, group, or wherever you decide is a good place to talk to your audience.

If you want to post in a group, you must navigate to that group, and find the “Share” box at the top of the page. If you want to post in a Business page, you can actually “become” that page and post as it, rather than posting as yourself. To do this (in a web browser, which is slightly different to a Facebook mobile App), go to the top right hand corner of the page. You will find an arrow in the blue top bar which drops down a list of various options, including a list of all your pages. Select one of those pages, and you can post AS it - as the page, rather then as yourself.

So having selected the right place to post in Facebook, you visit your web page, copy its URL (address) from the top bar in the browser, and paste it into the Facebook Status. Facebook being very clever picks up not only the link, but also all its details and creates a nicely formatted post, with image, title, a short description of the page, and a link to bring visitors to the page. Of course you are hoping that people are going to start sharing your great content with all their friends.

Whoops!

But there is a problem. Facebook has picked up the wrong image from your web page, the title doesn’t really say what you want, and the description that it shows is some global description of your website, with no real relevance to the specific page you are sharing. You can’t share a post like this, it looks unprofessional. So how to persuade Facebook to pick up the right content from your page and show the world that?

The answer is “Facebook Opengraph Metadata”, or information that you can add to your web page in order to let Facebook know what to share.

“What more metadata to add to the page?” you may ask, well yes unfortunately, if you want your Facebook sharing to work well and look professional you will have to do this.

What is Opengraph Metadata?

It’s a set of web page tags, defined by Facebook, so you can explain to them what your page is about. You add them to the page like Here are the main ones:

I’ll grab one page-worth of Opengraph metadata from our own website to show you:

<meta property="og:type" content="website"/>
<meta property="og:title" content="Channel Digital – effective web development and marketing"/>
<meta property="og:url" content="http://www.channeldigital.co.uk/"/>
<meta property="og:site_name" content="Channel Digital Limited"/>
<meta property="og:description" content=""/>
<meta property="fb:app_id" content="1579656798912345"/>
<meta property="og:image" content="http://www.channeldigital.com/images/logo.png"/>

So from this you may pick out that the main tags in use are: 

• og:url - the address or URL of your page
• og:title – page title
• og:description – a description of the page
• og:site_name – Your website name, (the same for all pages).
• og:image – the image you want to share with your page. You may have a default set for your web site, which will show if you haven’t specified an image for a give page.
• fb:app_id – your App ID is something you set up in your own Facebook, usually associated with your Facebook business page. It is basically an unique ID for your website, but you can also set them up if you write Apps that integrate with Facebook, and a few other cases.

To set up the fb:app_id you need to be logged into Facebook, select to post as your page, as I wrote above, and look for the “Developers” link at the foot of the page. Also try this link: https://developers.facebook.com/apps/

Here you have the opportunity to create “Apps”. One of your Apps should be for your website, it will give you an App ID to use when you set that up.

Here is some Facebook documentation which should help lead you through the process: https://developers.facebook.com/docs/opengraph/getting-started

How can you see what metadata you have?

If you view your web page that you are planning to share, and then select (right click) “view source”, you then scan through the source code looking for “og:”, and you should find your opengraph metatags, looking like those “og:” lines above, somewhere near the top of the page – if you have any.

How can you add Opengraph metadata to your website?

Adding and managing Metadata may be something that has always been done by your designer, or perhaps your SEO provider. Often lip-service is paid to adding metadata but there is no real intention to achieve a particular result, and so results can be random. Part of your web marketing efforts should include taking control of metadata and all other important aspects of your website.

Static HTML websites:

If you have a static HTML website then you may need your designer to update metadata on every page, which can be a bit slow and expensive. It is usually best instead to have a website based on a good quality CMS system, which gives you the ability to add and control your meta data, as well as every other aspect of your content. You can add and optimise pages without spending a dime, or use external teams or an in-house team to do it – that is your own business decision to make.

Here’s a page about the more popular CMS systems on the Channel website. http://www.channeldigital.co.uk/website-design-and-build/content-managed-web-sites.html

Popular CMS like Wordpress and Joomla have existing systems or plugins to help you add and update all metadata, including your Opengraph metadata.

Wordpress: 

Wordpress has a number of plugins that will add a place for you to edit your Opengraph tags. Some website owners also like to programme the tags into their website, so that site header just grabs the content of the conventional “title” and “description” and other tags, and adds a set of opengraph tags around that. This means that when you use the normal CMS features to create the normal page title and description, the opengraph metadata is created automatically with the same content. Others just find Wordpress “plugins” (add-in programmes) easier to use:

Search the Wordpress Plugins directory for “open-graph” and see which plugins have the best reviews at the moment:
https://wordpress.org/plugins/tags/open-graph 

Joomla Websites: 

Joomla website owners also have many good options:
Their extension directory has many options, simply search the Joomla Extensions directory for “opengraph”
http://extensions.joomla.org 

http://extensions.joomla.org/extensions/extension?searchall=opengraph&filter%5Btags%5D%5B%5D=&filter%5Bcore_catid%5D=&filter%5Bincludes%5D=&filter%5Bversions%5D=&filter%5Btype%5D=&filter%5Bhasdemo%5D=&filter%5Bnewupdated%5D=&filter%5Bscore%5D=&dir=DESC&limitstart=&controller=filter&view=extension&layout=list&Itemid=145&clearorders=0&clearfilters=1 

also the popular search-engine-friendly URL management tool with the easy-to-remember name “sh404SEF” has the facility to add Opengraph metatags already built in:

http://extensions.joomla.org/extension/sh404sef 

Other Types of Website

We can’t tell you about all website types, but these are the most popular platforms on the web. If you have another one you’ll have to ask the people who developed it, or of course ask Google.

Facebook thankfully provide a lot of information about how to use Opengraph metadata, here are a couple of good sources:

• https://developers.facebook.com/docs/sharing/webmasters
• http://ogp.me/

What happens if you don’t add it?

What happens if there is no Opengraph metadata on the page, is that Facebook just makes its best guess. It often does OK and comes up with a sensible title, page description etc. from your traditional “title” and “description” meta, but it doesn’t always get it right, and the Facebook share can look, well a bit unprofessional. By adding the Opengraph tags to your site you take out the guesswork, and take control of how your shares look in Facebook.

You may have added “Like this” and “Share this” buttons to your website, but if when people share it the result looks shabby, then the effort of adding the buttons seems a bit wasted.

Opengraph Tools

What other tools can you use to get your Opengraph metadata working well?

One thing that happens with Opengraph, is that when you first share a page on Facebook, Facebook records all the meta and images for the page, and keeps a record of it in a “cache”. This would be fine except if you change the meta or image in your Opengraph tags, Facebook still has the old ones saved in the cache, and can’t be bothered to go and look at your new ones. You have to persuade Facebook to empty its cache and go back to your page for the updated data, and you can do this on this Facebook debugger page:

https://developers.facebook.com/tools/debug/og/object/

If you paste your URL into this page it will show you what has been cached for the page. You can also request that Facebook re-scrapes the page, and this refreshes its cache.

Despite the existence of this debugger page, it seems to us that Facebook doesn’t always update its cache, even when you ask. However there is another way of refreshing your Facebook opengraph cache. All you have to do is change the URL that you are sharing, and Facebook will have to go and re-scrape the page. If your Sharing URL is for example: http://www.mysite.com/mypage.html you can often just add something (meaningless like this: http://www.mysite.com/mypage.html?abc. Because the new part is after the question mark it doesn’t really count, but it may be enough to persuade Facebook to go and re-scrape the page.

You must test this approach however, because sometimes the part you added to the URL: the “?abc” DOES in fact do something, so you could be sharing a broken page. Just go and see the page in a browser to be sure, and use the Facebook debugger to test what Facebook will do with your link.

Using Google Analytics:

Social Sharing is more powerful if you can understand what worked, and what didn’t. This allows you to continually refine your approach, and when you find a successful approach, do more of it. Assuming that your web site is already using Google Analytics (it should be), then you can add information to the URL to improve the reporting on it.

This Google URL Builder page helps you create a better tracking link:
https://support.google.com/analytics/answer/1033867?hl=en

If you start with the page you want to share, and paste it into the URL builder:
http://www.mysite.com/mypage.html

Select the options, I’ve created the following:

• Source: Facebook
• Medium: Social
• Content: Facebook Links
• Campaign: SharesMonth2016

Having filled these in you hit Submit”, and your tracking URL is created for you:
http://www.mysite.com/mypage.html?utm_source=facebook&utm_medium=social&utm_content=facebook-links&utm_campaign=SharesMonth2016

This link still goes to your page, but the part after the question mark makes the link send special information to Google Analytics. When you go and look at your Google Analytics reports, you can see in great detail which links were clicked on, which parts of your marketing are working, and compare both the clicks, views, and sales, from each part of your Social Media activities.

What should you Share?

So you hopefully now understand something about Facebook Opengraph Metadata – but what should you be sharing and to whom? That is a different story and we’ll write more about that over time. For now I hope you find it useful using Facebook Opengraph data tags, and understanding how they work and how you can get them added properly to your website.