Twitter Cards: Cómo mostrar enlaces bonitos en Twitter

diciembre 08, 2016
¿Te has fijado que algunos tuits con enlaces muestran una imagen y una breve descripción de la página que enlazan?


Como puedes observar, es una manera mucho más bonita y llamativa de poner enlaces de tu sitio web en Twitter. Esto se conoce como Twitter Cards y muestran un resumen del enlace que pones en el tuit. Es más llamativo, más informativo y conseguirás:
  1. Más impresiones.
  2. Más clics.
  3. Más interacciones.
En la entrada de hoy te voy a mostrar cómo instalarlo en tu blog de Blogger. Es muy fácil y siguiendo los pasos puedes instalarlo en cualquier página web.

Poner Twitter Cards en Blogger


En primer lugar debes ir a la dirección de desarrolladores de Twitter: dev.twitter.com/cards/

A continuación, eliges el tipo de Twitter Card que quieres: dev.twitter.com/cards/types

Te dará un código de ejemplo, algo así:


Este código lo vas a copiar y a pegar en la plantilla de tu blog en Blogger: Plantilla > Editar HTML. Debes pegar el código después de la etiqueta <head>.

Como puedes intuir, sólo basta con sustituir algunas partes del código con tus datos y listo.

Pero vamos a personalizar las tarjetas de Twitter para que muestren los datos de la entrada y del blog dependiendo del enlace que compartamos en Twitter. Para ello vamos a utilizar unas expresiones y etiquetas especiales que existen en Blogger. Estas etiquetas guardan datos de tu blog como el título, la descripción, miniaturas y muchísimas cosas más.

Edita las líneas de tu código como sigue:


(1) La cuenta de Twitter de tu sitio web.
(2) El autor del artículo en cuestión, en mi caso es el mismo Twitter.
(3) El título. En este caso usamos una etiqueta de Blogger que guarda el título de la página.
(4) Muestra la descripción de la página. Igual que en el caso anterior, viene guardada en una etiqueta.

Para que muestre la descripción de forma correcta, debes activar las meta descripciones en tu blog. Eso está en Configuración > Preferencias para motores de búsqueda


Esto te ayudará a mejorar el SEO de tu blog, así que es muy recomendable que lo tengas activado.

Ahora vamos a la última parte del código y esta es la imagen que va a tomar para hacer la tarjeta de Twitter. Ponla justo debajo de las otras:


Aquí detectará la primera imagen del post y la mostrará.

Y ya tendrás una tarjeta de Twitter como esta:


Puedes probar cómo quedan las tarjetas en esta dirección: cards-dev.twitter.com/validator

Ahora cuando compartas tus artículos en Twitter lucirán más bonitos y llamativos. ¿Qué te parece?

Jen

Soy ingeniera técnica industrial. Me encantan los aparatos, cacharrear y pasar horas en internet. Soy autodidacta y por mi cuenta he aprendido sobre marketing digital, social media y blogging.
Twitter | Facebook | Youtube

Te puede gustar...

Tu mensaje aparecerá cuando sea aprobado ;D EmoticonEmoticon