Desde hace unos días veréis en algunos tweets cuando navegáis vía web, la opción de “Ver resumen” en la que si pinchamos nos va a aparecer en la mayoría de las ocasiones, un pequeño resumen del enlace que hemos compartido y una foto del mismo. Esta entrada la he creado a partir de una buenísima explicación que hicieron en su blog los chicos de “Mis Appis por tus Cookies“, por cierto muy recomendable y que te sugiero seguir.
Esta opción va a aparecer en el contenido que compartamos de nuestro site o blog por Twitter si tenemos las etiquetas correspondientes implementadas en el código fuente de nuestra web. En este enlace en inglés la red de microblogging nos dice los pasos a seguir. Cuando enviemos un tweet con el código de las twitter cards implementado, nos va a aparecer en la versión web de Twitter, una opción llamada “Ver resumen” y al pinchar ese enlace, nuestro tweet se va a expandir quedando de esta manera:
¿Qué hago si quiero que mis tweets salgan así?
- Lo primero de todo es introducir en el código fuente de nuestra web, entre las etiquetas <head></head> las siguientes etiquetas:
<meta name=”twitter:card” content=”summary”>
<meta name=”twitter:site” content=”user de Twitter de la web @X”>
<meta name=”twitter:creator” content=”user de Twitter del creador @X>
<meta name=’twitter:image’ content=’ejemplo: http://www.josegalan.es/wp-content/uploads/2012/11/quiero-que-mi-empresa-salga-287×300.jpg’>
<meta name=”twitter:description” content=”descripción de la url. Ejemplo: Reseña del libro "Quiero que mi empresa salga en Google" 3 edición de @sicodeandres.”>
¿Cómo hacemos esto? Bien a mano o si usamos WordPress, con el Plugin de SEO Yoast, en el apartado social, hay una sección que directamente añade a cada post los meta datos para las Twitters Cards solamente indicando nuestro user de Twitter. También tenemos otro plugin específico para blogs de un autor, llamado”Twitter cards“ que va a preparar de forma automática las etiquetas para que tengamos los llamados “tweets extendidos”.
Para saber si estos plugins han hecho bien su trabajo, debemos irnos a un post, ver el código fuente y comprobar si tenemos entre las etiquetas <head></head> los códigos antes descritos.
Una vez hemos verificado esto, podemos probar con la herramienta de Twitter de previsualización de las Twitter cards, si el código que hemos incluido es correcto, solo tenemos que loguearnos con nuestra cuenta de la red social y muy importante, en la url que queremos previsualizar, incluir una página de un post, no la de la home, si vemos que aparece un resumen y la foto del post, nuestro código es correcto, si no, la herramienta nos va a indicar que está fallando.
Último paso y no menos importante, tenemos que comunicar a Twitter que nuestra web ya está preparada para los tweets extendidos, solo tenemos que completar este formulario:
Y en unas tres semanas aproximadamente, nos responderán al correo que hemos indicado, diciéndonos que nuestra cuenta ya está lista haciendo más visuales nuestros contenidos en esta red.
¿Os animáis a tener las Twitter Cards?
Actualización 2.0.
Nuestro amigo Gorka Goikoetxea del blog Enganchado a internet nos hace la siguiente valiosa aportación:
Yo le doy un uso alternativo a las Twitter Cards. En vez de mostrar el resumen del post, hago una presentación del blog. Me parece adecuado para blogs jóvenes.
El código de las Cards no valida bien con W3C con su penalización SEO (mayor o menor) correspondiente.
Hay un truco que oculta el código y sólo lo muestra al motor de Twitter. No lo verás en el código fuente pero funcionará en la herramienta de previsualización y por supuesto en tus tweets.
Solo hay que introducir este código:
<? if (stristr($_SERVER['HTTP_USER_
<!– Inicio Twitter cards –>
AQUÍ VA EL CÓDIGO DE LAS CARDS
<!– Fin Twitter cards –>
<? }
No sabía ni que existían los Tweets extendidos!! Muchas Gracias por tu post. Lo llevaré a cabo!
Saludos
fernando
Twitter: _josegalan
10 diciembre, 2012 at 16:05 #
Hola Fernando creo que mucha gente lo desconoce y queda bastante bien en TW.
Gracias por comentar.