The Open Graph meta protocol enables any web page to become a rich object in a social graph. For example when you paste a URL into the “update status” box on Facebook you usually see some content automatically show up. There’s a thumbnail, title, URL and description. This content is pulled from meta data on the webpage. If that meta data isn’t specifically declared using this Open Graph protocol then Facebook (or LinkedIn, Google+, etc.) takes a guess.
When you don’t specify Open Graph meta the result can be less than ideal
For example MITX is a professional organization in the marketing, technology and creative industry space. They have a great event coming up that will feature one of the Pandora founders.
Its not a very friendly URL, but that’s a different topic:http://mitx.org/events/event_detail.aspx?id=a0e4cfe8-9018-4f61-9979-8ec2323a07ce
On the page there is a nice photo of Tim Westergren, the Chief Strategy Officer & Founder, Pandora. There’s a title, description etc. But you can see when you paste that URL into Facebook the results are not ideal.
The title automatically appears “MITX – Events – Event Detail” and the URL is the main site URL. There is no option for a thumbnail. Ideally you would want the Event title; or even a call to action “Meet Tim Westergren, the Chief Strategy Officer & Founder, Pandora” and in the description “Exclusive talk on April 10th at the Paypal offices in Boston…”. If the photo could be a Pandora and Paypal logo with Tim’s headshot that would help attract some eyeballs.
The combination be much more likely to get clicks, additional shares and registrations.
Keep in mind if I’m hitting the share button on my phone, via another site or app I may not be able to edit the title or anything. The better these properties are optimized the more likely shared content will reach more people.
How Open Graph meta works
So how can you make sure your content looks amazing when its shared on social networks? You just need to add some special Open Graph tags to your pages.
Basic Metadata
To turn your web pages into graph objects, you need to add basic metadata to your page. The protocol is based on RDFa which means that you’ll place additional <meta> tags in the <head> of your web page. The four required properties for every page are:
- og:title – The title of your object as it should appear within the graph, e.g., “Meet Tim Westergren, the Chief Strategy Officer & Founder, Pandora”.
- og:type – The type of your object, e.g., “event”. Depending on the type you specify, other properties may also be required.
- og:image – An image URL which should represent your object within the graph.
- og:url – The canonical URL of your object that will be used as its permanent ID in the graph, e.g., “http://www.mitx.com/event/pandora-founder-breakfast-talk-april/”.
Adding these additional tags and a custom Open Graph meta thumbnail image here’s how the MITX event would look when shared on Facebook.
The following properties are optional for any object and are generally recommended:
- og:audio – A URL to an audio file to accompany this object.
- og:description – A one to two sentence description of your object.
- og:determiner – The word that appears before this object’s title in a sentence. An enum of (a, an, the, “”, auto). If auto is chosen, the consumer of your data should chose between “a” or “an”. Default is “” (blank).
- og:locale – The locale these tags are marked up in. Of the format language_TERRITORY. Default is en_US.
- og:locale:alternate – An array of other locales this page is available in.
- og:site_name – If your object is part of a larger web site, the name which should be displayed for the overall site. e.g., “IMDb”.
- og:video – A URL to a video file that complements this object.
More Options
There’s lots more types of Open Graph meta that can be uses. Movies, books, authors, products all have properties that can be defined using the Open Graph schema – Learn more here: http://ogp.me/
You can use the Facebook debugger tool to see if your page has the required Open Graph meta tags.
For WordPress
We use a plugin for WordPress called Open Graph Metabox that allows you to set the Open Graph meta for pages and posts.
Using the Open Graph meta on your web content will also ensure the pages are displayed properly in search engine results. Of course Facebook will usually grab your regular search meta data for titles and descriptions and images from your page but why leave it up to chance. Make it really easy for people to share your content, you never know how far it can go.
No comments:
Post a Comment