Open Graph allow you to optimize for sharing on Twitter, Facebook, Google+ and Pinerest by defining exactly how titles, descriptions, images and more appear in social streams.
If you are familiar with PHP I made a guide on how to automate it.
What is Open Graph and why do you need it?
From a SEO point of view, it dont improve it per se. But experience and studies shows that the right data, including optimized images, helps content to spread, which often leads to increased links and mentions. If you decide to go with the full media tag template, it can make your Google+ page in google searches however.
How to use Open Graph
Copy and paste the template you want to use and edit the orange and green text accoringly to your website. You can remove or add any tags you find necessary, just be sure you did not remove any mandatory tags. You can check that with the validators further down this page
Minimum tag for Facebook, Google+ and Twitter
This is the absolute minimum you need for optimized sharing across Twitter, Facebook, Google+ and Pinterest. For most people this is enough. It give you the option to decide what picture and text is shown when someone share your content. As opposite to a random picture on your page and some text that might not be clse to what the page was all about.
The Standard template
This one is considered the standard template and have a few added tags. For instance it optimize your picture size and add your Twitter name. It also enable Facebook page Insights.
Full style
This is the monster! In addition to all the data contained in the standard template, the full template contains:
- Google Authorship and Publisher Markup. This data doesn't change your content appearance in Google+, but it potentially add links to your Google+ pages in search results.
- Schema.org article markup
- Twitter Summary card with large image
- Expanded Open Graph article data
To be honest I see no reason NOT to use this one if you first is going to add Open Graph. It might look like alot of stuff to edit for each page. With PHP you can get this monster pluss your webpage title and tags done by just changing 5 small PHP variables in the <head> of your webpage. You can see how I manage it at the bottom of this page. The hard part is making good pictures.
Test and validate your setup
Twitter Validation Tool
In order to get your Twitter cards working you need to validate your domain. It is basicly just copying your webpage address in the online validation tool and if no errors are found, you are golden
Facebook Debugger
Facebook dont need validation like Twitter do, but this site is greate to see simple sharing stats or errors in your tags.
Google Structured Data Testing Tool
Webmasters traditionally use the structured data testing tool to test authorship markup and preview how snippets will appear in search results, but you can also use see what other types of meta data Google is able to extract from each page.
Pinterest Rich Pins Validator
Basicly the same thing as the Twitter one. You need to be approved. Just test your URL and you are automaticly approved if it got enough data
Best practice
Image size
Every social platform has different standards for sizing. Typically, it's easier to keep it simple and choose one image size that will work for all services.
- Twitter thumbnail: 120x120px
- Twitter large image: 280x150px
- Facebook: Standards vary, but an image at least 200x200px works best. Facebook recommends large images up to 1200x630px wide.
In short, larger images offer you the most flexibility. When in doubt, test each page using the appropriate tool below to see exactly how your images will appear in snippits.
Facebook page insights
The meta property "fb:admins" requires that you enter your numeric Facebook id number, and gives you access to analytics about how your website content is shared on Facebook. If you dont know how to find yours you can read how to find your app ID here
Semi automate your Open Graph with PHP
This seem like alot of stuff to add to every single page, done it? Especially since you have to edit the same infomation several places and they are spread so its easy to miss one thing. Luckely it can be semi-automated a whole bounch using PHP. See how I implement it here
It effectivly reduce the 15Ish places you have to change information, to 5 neatly organized places to edit in your information. It even automate your Canonical Link to dynamicly update itself for every page.