Everyone has socially shared something on some of the best social networking sites. Google+, Facebook, and Twitter have grown to be a part of people’s daily lives.

Implementing your open graph meta tags can control what information they are sharing. Things like your title, image, and short description can be specified. All of these things can be overridden by the user. Filling out the information for them they usually don't change it.

Open Graph Meta Tags

Open Graph meta tags can populate the correct information when pages are shared. These were specifically made to help web pages share richer information with social networks.

Why even use them?

Making your information accessible gives you advantages. It makes sure the correct information is being shared. By filling in the information for the user, this makes it easy for them and will increase the number of shares. By increasing the number of share, this will increase your SEO ranking to your website.

Examples

Facebook Metadata

Google+ Metadata

Notice it has your article title, image and a small description included with it linking to the post. This is controlled by your open graph tags. Having these tags on your site will help you control what pictures and content you want people to share.

Twitter Metadata

Twitter uses these tags for their "Twitter Cards". These are the same idea as the Open Graphs, where you get an image, title and description of the article.

Facebook & Google+

Two of the three big social networks are compatible with the Open Graph meta tags. This includes Facebook and Google+. Twitter on the other hand, requires you to have their own Open Graph meta tags with a twitter attribute. This requires special implementation just for Twitter, but that is just how it is.

Open Graph Options

There are a lot of different Open Graph metadata you can choose from. The basic information that you will need to get your social sharing rolling is the title, type, image, and URL. Here is an example of one of our articles with the basic information implemented.

Notice that you need to have everything typed in lower case and the only thing you should change is the content attributes. Here is an easy copy and paste code to help you get started.

Now to get Twitter Cards going you need to specify the same options in slightly different format. Instead of type, you will use card. It’s recommended that you insert your twitter handler into the creator tag and specify the domain of your website. Here is an easy copy and paste example of our Twitter Card.

Validating Your Open Graphs

There are a couple of different tools you can use to make sure that you meta tags are implemented correctly. One place you can stop by is Facebook’s Developers Debugger. Type in your url in the box and hit Debug. If you don’t see any warnings and it looks like the image below you are ready to go with Facebook and Google+.

To get your Twitter Card going you need to get it approved, which only takes a few hours in most cases. Head over to Twitter's Card Validate Tool and click on the Validate & Apply tab. Drop your URL in and click Go. If you see a lot of green dots you are ready to apply to be approved. It should look something like this:

Advanced Open Graph Metadata

There are more tags available that specify specific elements on your website. If your website has audio and video media on it. There are specific tags that will help social places know what type of article it is.

Over at Open Graphs you can see a full documentation of how to implement these advanced meta tags. For this article, I only focused on the basics and getting your articles ready. By implementing these tags your article will be shared easily and more efficient.

If you have any questions about the basics or advanced metadata. Post your question in the comment section of this article and good luck.