Las redes sociales juegan un papel fundamental en la estrategia de un sitio web porque, aunque no influyen directamente en el SEO, pueden generar mucho tráfico y posicionamiento de la marca (branding). En el caso de Twitter, cuando alguien incluye un link de tu web en un tuit, ¿no te gustaría que automáticamente se muestre así (y no solo una url)?
#EDblog La terminal de Postgres (psql) tiene algunas limitaciones y con los siguientes consejos trabajarás mucho mejor. https://t.co/bDC226yrkH
— EDteam (@EDteamLat) 14 de julio de 2018
Es una excelente manera de reforzar tu marca y es muy fácil de implementar en tu web, solo hay que agregar un poco de código.
Tipo de Twitter card
Lo primero es indicar el tipo de card. Existen cuatro tipos: summary, summary\_large\_image, app y player. Para una web o blog usa cualquiera de las dos primeras, en EDteam usamos summary\_large\_image Agrega el siguiente código dentro de <head></head> en tu web:
<meta name="twitter:card" content="summary_large_image">
Para indicar los datos al Twitter Card (título, imagen, descripción) usaremos otras etiquetas <meta> Ten presente que todas usan el formato twitter:\$&value\$&
Agregar datos de la empresa y del autor
En primer lugar agrega los datos de la cuenta de la empresa en Twitter, eso le indica a Twitter la autoridad del sitio.
<meta name="twitter:site" content="@EDteamlat">
También puedes agregar la cuenta del autor del contenido. Esto puede ser útil si es un blog con varios autores.
<meta name="twitter:creator" content="@alvarofelipe">
Agregar datos adicionales
Los siguientes datos son muy fáciles de comprender:
<!--url de la página-->
<meta name="twitter:url" content="https://ed.team/blog">
<!--Título de la página-->
<meta name="twitter:title" content="Optimiza tu web con Twitter cards">
<!--Descripción de la página-->
<meta name="twitter:description" content="Con poco código puedes personalizar como Twitter muestra tu página al compartirla">
<!--Imagen para compartir-->
<meta name="twitter:image" content="https://ed.team/images/blog/twitter-cards.jpg">
Twitter cards y Open Graph
Así como Twitter, Facebook tiene su propio protocolo llamado Open Graph. Según la documentación de Twitter, las Twitter Cards pueden leer Open Graph para no tener que agregar más código. Por ejemplo, podemos omitir el bloque de código anterior si ya tenemos lo siguiente en Open Graph:
<meta property="og:url" content="https://ed.team/blog">
<meta property="og:title" content="Optimiza tu web con Twitter cards">
<meta property="og:description" content="Con poco código puedes personalizar como Twitter muestra tu página al compartirla">
<meta property="og:image" content="https://ed.team/images/blog/twitter-cards.jpg">
Así que con el siguiente código tenemos optimizada nuestra web para ser compartida tanto en Facebook como en Twitter:
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@EDteamlat">
<meta name="twitter:creator" content="@alvarofelipe">
<meta property="og:url" content="https://ed.team/blog">
<meta property="og:title" content="Optimiza tu web con Twitter cards">
<meta property="og:description" content="Con poco código puedes personalizar como Twitter muestra tu página al compartirla">
<meta property="og:image" content="https://ed.team/images/blog/twitter-cards.jpg">
Consideraciones a tener en cuenta
El código para las Twitter cards debe ser diferente para cada página de tu sitio. No basta ponerla en la página principal y ya. Si usas un gestor de contenidos como WordPress puedes usar este plugin, y si usas Drupal, este módulo. Si haces un desarrollo a medida asegúrate de imprimir en el head del HTML los valores dinámicos que correspondan.
Validar Twitter Card
¿Ya implementaste Twitter Card y quieres ver si funciona correctamente? No se te vaya a ocurrir ponerte a mandar tuits a lo loco, eso no le hace bien a la imagen de tu marca. Twitter cuenta con un validador para que hagas todas tus pruebas.
Twitter card validator: https://cards-dev.twitter.com/validator Documentación: https://developer.twitter.com/en/docs/tweets/optimize-with-cards/guides/getting-started