Añdir Twitter Cards en Blogger: mejora los enlaces compartidos

Share:
¿Te has fijado que algunos tuits con enlaces muestran una imagen y una breve descripción de la página que enlazan? Algo como la imagen de abajo:


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/

Allí encontrarás información y códigos de ejemplo como este:


Te lo voy a explicar para que no sufras.

En primer lugar tienes que elegir qué tipo de tarjeta de Twitter quieres para tus enlaces:

  1. summary: muestra un resumen junto a una imagen cuadrada.
  2. summary_large_image: muestra un resumen bajo una imagen más grande (es como la del ejemplo al principio del tutorial).

La primera línea de nuestro código será el tipo de tarjeta, elegiremos para el ejemplo summary_large_image

<meta content='summary_large_image' name='twitter:card'/>

La siguiente parte del código contiene datos del autor de la web (sus cuentas de Twitter, normalmente):

<meta content='@username' name='twitter:site'/>
<meta content='@username' name='twitter:creator'/> 

Y la última parte del código son lo referente al título de la página, la descripción y la imagen que usa:

<meta content='Título de la página web' name='twitter:title'/>
<meta content='Descripción de la página web' name='twitter:description'/>
<meta content='Imagen_página_web.jpg' name='twitter:image'/>

Todas las partes del código las 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, tienes que sustituir partes del código para que muestre los datos de tu blog.

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

A continuación te dejo el código entero. No olvides cambiar el @username por tu usuario de Twitter. 😉

Además, he añadido un par de tags interesantes que también te ayudarán en el SEO y que son útiles para Twitter:

<meta content='summary_large_image' name='twitter:card'/>
<meta content='@username' name='twitter:site'/>
<meta content='@username' name='twitter:creator'/>
<meta expr:content='data:blog.pageName' name='twitter:title'/>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<meta expr:content='data:blog.homepageUrl' name='twitter:domain'/>
<meta expr:content='data:blog.postImageUrl' name='twitter:image'/>

Cómo solucionar el problema de imágenes con Twitter Cards en Blogger

Existe un problema con Blogger al compartir algunas páginas de Blogger y es que no muestra la imagen. Justo pasa con las páginas estáticas (las que van con la dirección /p/).

Esto es porque la miniatura de esas páginas no las guarda en data:blog.postImageUrl, sino en otra variable.

Si te pasa este error, sustituye la última línea de nuestro código:

<meta expr:content='data:blog.postImageUrl' name='twitter:image'/>

Por esto:

<b:if cond='data:blog.postImageUrl'>
      <meta content='summary_large_image' name='twitter:card'/>
      <meta expr:content='data:blog.postImageUrl' name='twitter:image'/>
    <b:else/>
      <meta content='summary' name='twitter:card'/>
      <b:if cond='data:blog.postImageThumbnailUrl'>
        <meta expr:content='data:blog.postImageThumbnailUrl' name='twitter:image'/> 
      </b:if>
    </b:if>

¡Y solucionado!

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

No hay comentarios

Tu mensaje aparecerá cuando sea aprobado ;D