Twitter Cards. Fotos de tu web en tus tweets

//Twitter Cards. Fotos de tu web en tus tweets

Twitter Cards. Fotos de tu web en tus tweets

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 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. 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:

twitter-cards¿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: https://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 &quot;Quiero que mi empresa salga en Google&quot; 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.

formulario-twitter-cards

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_AGENT’], ‘Twitterbot’)) { ?>

<!– Inicio Twitter cards –>

AQUÍ VA EL CÓDIGO DE LAS CARDS

<!– Fin Twitter cards –>

<? }


¿Te ha sido útil este artículo?
[Total: 0 Average: 0]

Quizás también te interese:

Por | 2018-02-04T20:16:27+00:00 diciembre 4th, 2012|Redes Sociales|2 Comentarios

About the autor:

Licenciado en Publicidad y Online marketer. Especialista en SEO y SEM. Certificados Adwords búsqueda avanzada, Display, Shopping, Mobile y Vídeo. Creador del blog "Cosas sobre Marketing Online" www.josegalan.es. Siempre aprendiendo.

2 Comentarios

  1. Fernando - Agencia Social Media 10 diciembre, 2012 en 16:04 - Responder

    No sabía ni que existían los Tweets extendidos!! Muchas Gracias por tu post. Lo llevaré a cabo!

    Saludos

    fernando

    • Jose 10 diciembre, 2012 en 16:05 - Responder

      Hola Fernando creo que mucha gente lo desconoce y queda bastante bien en TW.

      Gracias por comentar.

Deje su comentario