Pasar al contenido principal

🔥 ¡Hoy! Clase gratis de Diseño web con Bootstrap 😍 Reserva tu lugar. Comienza en:

Alexys Lozada
José Luján
Manuel Rodriguez
José Luján
Luis Avilés
Álvaro Felipe
José Luján
Beto Quiroga
Jonathan MirCha
Jonathan MirCha
Álvaro Felipe
Alexys Lozada, Álvaro Felipe, Jonathan MirCha
Beto Quiroga
Alexys Lozada
Alexys Lozada
José Luján
Álvaro Felipe
Álvaro Felipe
Jonathan MirCha
Jonathan MirCha
Alexys Lozada, José Luján
Alexys Lozada, José Luján
Alexys Lozada, José Luján
Camilo Adobe
Álvaro Felipe
José Luján
Jonathan MirCha
Álvaro Felipe
Álvaro Felipe
Beto Quiroga, Alexys Lozada
Álvaro Felipe
Juan Villalvazo
Luis Avilés
Jonathan MirCha
Jonathan MirCha
Jonathan MirCha

Optimiza tu web con Twitter cards

En simples pasos puedes definir cómo se verá tu sitio web cuando lo compartan por Twitter,

Optimiza tu web con Twitter cards

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)?

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

Suscríbete al blog de EDteam

Ingresa tu correo electrónico para recibir nuestro boletín semanal