The new kid on the block in web development is OpenGraph protocol for meta tags. Among other things, these tags are used by Facebook and other web services to gather information for creating informative links to your site from a url. The extensive description and instructions for using OpenGraph protocol can be found at: http://ogp.me/

Here is an example of the link box created when the url for this site was typed into an email using Yahoo mail.

Link Card

 

This concept may seem like just another tedious thing to remember, but it really only takes a few steps. If you don't add the proper <meta> tags to your site, Facebook, Yahoo or whatever other service is using this protocol will just grab whatever from your site. This could be an image that has nothing to do with your website and some odd bizarre description.

What to include on your site to create OpenGraph meta tags

The tags are put into the <head> section of your site. The og site shows these tags going in directly after the <title> tag for the page. You can have the same information for every page, or you can create unique images, descriptions and other information for each page of the site. There are a number of tags that you can put in, but there are a few that you must put in, and the others ore optional.

Required MetaData

<meta property="og:title" content="My Webpage Title" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://www.mysite.com/" />
<meta property="og:image" content="http://www.mysite.com/images/squarelogo.jpg" />

og:title put the title for your webpage as you wish to have is displayed in the link box

og:type there are specified types that you can use listed here: http://ogp.me/#types

og:url the canonical URL for the specific page for the link

og:image this will be the image that shows up in the link box. You can have multiple images, but you need to include the entire <meta property="og:image content="" /> for each image. It is best to create a square image that is at least 175px by 175px, but greater than 200px by 200px is preferred with the maximum file size of 5MB. otherwise it will come out blurry as they enlarge it.

Optional MetaData

If you have other aspects about the webpage that you want to point out, you can use these optional tags.

<meta property="og:audio" content="http://www.mysite.com/media/mysong.mp3" />
<meta property="og:video" content="http://www.mysite.com/media/mymovie.swf" />
<meta property="og:description" content="This is a brief description of my webpage" />
<meta property="og:determiner" content="the" />
<meta property="og:locale" content="en_GB" />
<meta property="og:locale-alternate" content="fr_FR" />
<meta property="og:site_name" content="MySite Name" />

What about meta data for Twitter?

Twitter has it's own set of meta data tags for when your site is added as a link in a Twitter feed. They are called Twitter Cards. You can read more about them here: https://dev.twitter.com/docs/cards