Twitter Cards, Open Graph y Social Meta Data

Esta semana, Twitter presentó un nuevo sistema denominado Twitter Cards. Son Tags que permiten a los Webmasters mejorar la divulgación de  tweets a través de Twitter. Los Twitter Cards usan estándares como las etiquetas OpenGraph, por este sistema los blogueros y propietarios de páginas web tienen la posibilidad de determinar el mensaje que sale cuando las páginas se comparten en Twitter. Al igual que los tags de Facebook. De hecho, Twitter optó por recurrir a los datos OpenGraph de Facebook cuando sus etiquetas específicas no están siendo utilizadas, tal como Google ya lo hace.

Twitter Cards

Existen 3 tipos de tarjetas de Twitter Cards: Resumen, Fotos y el Reproductor. El resumen es la tarjeta por defecto, mientras que las tarjetas de fotos y reproductor son específicamente para imágenes y videos. Aquí está el ejemplo de Twitter ofrece una tarjeta de resumen.

Exemplo de como se muestra un Twitter Card:

A partir de ahora Twitter será mas que 140 caracteres

Si, además de los tradicionales 140 caracteres Twitter ahora mostrará los Tweets expandidos, o sea con la imagen o video que se esté compartiendo. Por ello para que los twitts de nuestras páginas sean más atractivos debemos usar los Twitter Cards y añadirle una imagen o video originales.

¡Ver aquí ejemplos de Twits expandidos!

¿Como colocar los Twitter Cards en wordpress?

Los usuarios de WordPress lo tienen muy fácil ya que rápidamente apareció un Plugin de wordpress que realiza esta acción automáticamente:

Ver Plugin para wordpress en http://wordpress.org/extend/plugins/twitter-cards/

[UPDATE]

¿Como colocar los Twitter Cards en Blogspot /Blogger ?

  1. Entrar en el panel de administración de tu Blog
  2. Ir a Plantillas, luego edición de HTML
  3. Entre <head> y </head> añadir el siguiente código.
<meta name="twitter:card" value="summary">

<meta name="twitter:site" value="@TWITTER_DE_TU_WEB">

<meta name="twitter:creator" value="@TWITTER_DEL_AUTOR">

<meta name="twitter:url" value="<data:post.url/>">

<meta name="twitter:title" value="<data:post.title/>">

<meta name="twitter:description" value="<data:description/>">

Este código de Twitter Cards para Blogspot se puede mejorar, si ya lo tienes funcionando en tu blog puedes participar aportando a todos tus comentarios.

¿Como colocar los Twitter Cards otras webs ?

Para quién tiene una web con otros sistemas podrá aplicar las siguientes tags dentro de <head> y </head> dentro del html:

<meta name="twitter:card" value="summary">

<meta name="twitter:site" value="@nytimes">

<meta name="twitter:creator" value="@SarahMaslinNir">

<meta name="twitter:url" value="http://www.nytimes.com/2012/02/19/arts/music/amid-police-presence-fans-congregate-for-whitney-houstons-funeral-in-newark.html">

<meta name="twitter:title" value="Parade of Fans for Houston’s Funeral"

<meta name="twitter:description" value="NEWARK - The guest list and parade of limousines with celebrities emerging from them seemed more suited to a red carpet event in Hollywood or New York than than a gritty stretch of Sussex Avenue near the former site of the James M. Baxter Terrace public housing project here.">

<meta name="twitter:image" value="http://graphics8.nytimes.com/images/2012/02/19/us/19whitney-span/19whitney-span-articleLarge.jpg">

Ver aqui la documentación completa de como colocar los TAGS [INGLÉS]
Si necesitas ayuda para colocarlo en tu web te puedo ayudar.
Un saludo.

About Barbio

Especialista en SEO para PYMES en la província de Cádiz.
This entry was posted in Social Media Marketing. Bookmark the permalink.

2 Responses to "Twitter Cards, Open Graph y Social Meta Data"

Leave a reply