Twitter Cards, Open Graph and one secret to control your content sharing

Creating headlines, blurbs and introductions is seen by many as an art on its own.
When you or others are sharing your content to Twitter and Facebook, though, these sites try being smart and come up with a preview of their own for their link previews and Twitter cards.
Time to regain control and show enticing, well crafted blurbs to your social media fans and followers.
How? With the Open Graph and Twitter meta.

What are they?
Open Graph and Twitter metas are a way for you and app developers to “tell stories” to these sites, an embellished statement meaning that you can actually point them to the content you really want to show.

What do they look like?
Just like your usual meta content, with a little twist.
Here is an example of title you wish to give your content:

Facebook:
<meta property=”og:title” content=”Your title here” />

Twitter:
<meta name=”twitter:title” content=”Your title here”>

Here’s one secret
Twitter’s meta are actually compatible with Open Graph for several non-twitter-specific data.This is particularly useful to avoid repeating yourself during the integration phase, and rid your code from a couple of extra lines.
To make it easier for you, here’s a table of the most important metas:

 

Meta

Open Graph

Twitter

Use

<meta property=”og:title” content=”fill-in-the-blank” />

YES

YES

You content’s title.

<meta property=”og:type” content=”article” />

YES

YES

The type of your content.

<meta property=”og:image” content=”fill-in-the-blank” />

YES

YES

The related image you want to showcase.

<meta property=”og:url” content=”fill-in-the-blank” />

YES

YES

The URL of your content.

<meta property=”og:description” content=”fill-in-the-blank” />

YES

YES

2 sentences to describe your content.

<meta name=”twitter:card” content=”summary”>

NO

YES

140 characters to summarize your content.

<meta name=”twitter:site” content=”@fill-in-the-blank”>

NO

YES

The origin website’s Twitter name, if any.

<meta name=”twitter:creator” content=”@fill-in-the-blank”>

NO

YES

The author’s Twitter name, if any.

 

How to use them?
The only thing you need to do is to insert these meta tags between the <head> tags of your html pages.

Confusing?
You can find more information directly at the source by consulting the documentation on Twitter and Facebook.

There’s also the possibility to contact us and tell us what we can do for you!

 

Summary
Article Name
Twitter Cards, Open Graph and one secret to control your content sharing
Description
Time to regain control and show enticing, well crafted blurbs to your social media fans and followers. How? With the Open Graph and Twitter meta.
Author

Leave a Reply