“A day wasted on others is not wasted on one’s self.” - Charles Dickens, A Tale of Two Cities

What does this quote have to do with Open Graph and Twitter Card? Allow us to explain.

Open Graph is another form of Semantic Markup that is specific to Facebook, Pinterest and Google+. When someone shares content from your website to their timeline on Facebook, such as a link. Facebook takes a small snapshot of your website and uses it as a preview of the shared content. Open Graph allows you to customize this content by adding semantic tags so that the preview is more pointed and relevant to your website. Open Graph can be a powerful tool for branding your products, videos, etc. Adding Open Graph into your website can integrate your site into to the social concept allowing your customers to start conversations about your products but using the content you specify.

For example, the movie “Bob’s Beard” on Vimeo might include the following Tags:

 <meta property="og:title" content="Bob’s Beard"/>
 <meta property="og:type" content="movie"/>
 <meta property="og:url" content="https://vimeo.com/68967326"/>
 <meta property="og:site_name" content="Vimeo"/>

Twitter Cards allow you to add media experiences to Tweets that link to your web page content. By adding HTML to your webpage a users Tweet can be turned into a nice advertisement for your website. Showcasing your content in a “card” like fashion. This card is added to the tweet and can be seen by all followers of that user.

Twitter has seven different card types that can be applied to a Tweet.

  • Summary Card: This is a default Card and includes a title, description, thumbnail, and Twitter account attribution.
  • Summary Card with Large Image: Similar to a Summary Card, but allows you to feature an image.
  • Photo Card: A Tweet sized photo Card.
  • Gallery Card: A Tweet Card that highlights an album of photos.
  • App Card: Provides a profile for your application.
  • Player Card: Used for Video, Audio and media player content.
  • Product Card: Show off your products using this Tweet Card.

Using the same example above the meta information for our video card would be as follows:

<meta name="twitter:card" content="player">
<meta name="twitter:site" content="@Vimeo">
<meta name="twitter:title" content="Bob’s Beard">
<meta name="twitter:description" content="Bob chops his beard.">
<meta name="twitter:player" content="https://vimeo.com/68967326">

So what does this have to do with the quote in the beginning of the article? Because a day setting up your content for others to share, is not a waste of time, however it is a benefit to one’s self, thus, not making it a waste of time.