Guía para principiantes sobre cómo añadir Twitter Cards en WordPress

Mejorar tu sitio WordPress con Twitter Cards puede mejorar significativamente tu presencia en los medios sociales y la participación de los usuarios. Las Twitter Cards proporcionan imágenes y descripciones que aparecen en X (antes Twitter) cuando alguien comparte su contenido.

En WPBeginner, utilizamos esta característica para controlar la apariencia de nuestros tweets y potenciar la interacción con el usuario. El uso de Twitter Cards (o X Cards) también garantiza que recibamos los agradecimientos por nuestro contenido.

En este artículo, te mostraremos cómo añadir Twitter Cards en WordPress, para que tus tweets destaquen.

¿Por qué utilizar Twitter Cards en WordPress?

Las Twitter Cards te permiten añadir un título, un resumen, una imagen y un archivo de vídeo o audio a tu tuit. De esta forma, es más probable que consigas más clics y retweets.

Puedes ver un ejemplo en vivo yendo a nuestra página WPBeginner en X.

La mayor ventaja de tener Twitter Cards es que aumentan el número de personas que siguen tus cuentas X a través de la atribución de contenido. A menudo la gente tuitea tus enlaces sin darte los agradecimientos / reconocimientos / acreditaciones adecuados.

Por ejemplo, supongamos que @syedbalkhi retuitea una entrada de @wpbeginner sin atribución, y otras personas retuitean a @syedbalkhi. Entonces es más probable que los usuarios que vean esos retweets sigan a @syedbalkhi que a @wpbeginner.

A menudo, los seleccionadores de contenido hacen esto para mantener la longitud de los tweets corta y asegurar los retweets de sus propios tweets.

Con las Twitter Cards, este problema está resuelto porque obtienes agradecimientos / reconocimientos / acreditaciones para tu sitio web WordPress por cada tweet que menciona tu artículo.

Ahora que ya conoces las ventajas de las Twitter Cards, vamos a ver cómo implementarlas en WordPress. Cubriremos dos métodos y te mostraremos cómo probar y validar tus Twitter Cards:

Método 1: Usar el plugin AIOSEO para añadir Twitter Cards (Recomendado)

La forma más sencilla de añadir Twitter Cards a tu sitio web es utilizando el plugin All in One SEO (AIOSEO) para WordPress. Es el mejor plugin SEO para WordPress y lo utilizan más de 3 millones de sitios web.

En primer lugar, tendrás que instalar y activar el plugin AIOSEO. Para más detalles, sigue nuestro tutorial paso a paso sobre cómo instalar un plugin de WordPress.

Puedes utilizar la versión gratuita de AIOSEO, ya que ofrece una característica para establecer Twitter Cards en tu sitio web WordPress.

Una vez que el plugin esté activado, vaya a su área de administrador de WordPress y navegue hasta All in One SEO ” Redes Sociales. A continuación, haga clic en la pestaña “X (Twitter)” y asegúrese de que la opción “Activar X Card” está activada / activa.

Una vez activadas / activas las Twitter Cards, puedes cambiar su apariencia utilizando diferentes ajustes.

AIOSEO le permite seleccionar el tipo de tarjeta por defecto para su contenido. El plugin establecerá ‘Resumen’ como el tipo de tarjeta por defecto, que muestra el título, resumen, y la imagen en miniatura de su contenido.

Sin embargo, puedes cambiarlo a “Resumen con imagen grande” en el menú desplegable, y Twitter mostrará tu tuit con una imagen grande.

A continuación, debe seleccionar la Fuente de imagen predeterminada de la entrada. Es la imagen que quieres mostrar en tus Twitter Cards.

Hay diferentes opciones para elegir utilizando el menú desplegable. Por ejemplo, puede subir o seleccionar una imagen por defecto que aparecerá en la tarjeta X (Twitter) o seleccionar la imagen destacada, la imagen adjunta, la primera imagen del contenido, etc.

A continuación, añada una Imagen X por defecto de la entrada, que se utilizará como copia de seguridad en caso de que su contenido no tenga imagen.

Por ejemplo, si la fuente de la imagen de su entrada es una imagen destacada, pero a la entrada le falta una imagen destacada, entonces X utilizará la imagen por defecto en su lugar.

Minientrada, AIOSEO ofrece más opciones para mostrar datos adicionales como el autor de la entrada y el tiempo que se tarda en leer un artículo.

También hay una opción para establecer la Fuente de imagen de término por defecto, pero necesitará AIOSEO Pro o una licencia superior para utilizar esta característica.

Ahora, si te desplazas hacia abajo, verás los ajustes de la página de inicio para Twitter. El plugin mostrará una vista previa de cómo se verá tu página de inicio en una Twitter Card.

En esta sección, puede cambiar el Tipo de tarjeta y añadir una Imagen de página de inicio.

Esto es similar a los pasos que mostramos anteriormente, pero la diferencia es que estos ajustes son para su página de inicio / página de inicio.

A continuación, introduzca el título y la descripción de la página de inicio que aparecerán en la Twitter Card.

Una vez hecho esto, haz clic en el botón “Guardar cambios”.

Aparte de eso, AIOSEO también te permite cambiar los ajustes de la tarjeta X (Twitter) para entradas y páginas individuales.

Para ello, edite cualquier entrada de blog o página y desplácese hasta los ajustes de AIOSEO en el editor de contenido. Ahora haga clic en la pestaña ‘Social’ y seleccione ‘X (Twitter)’.

El plugin mostrará una vista previa de la X Card de tu entrada y te dará la opción de utilizar los datos de la pestaña de Facebook. También te permite editar el título X y la descripción.

Puedes escribir un nuevo título y descripción o utilizar etiquetas inteligentes. Por ejemplo, si utilizas la etiqueta ‘+ Título de la entrada’ encima del campo Título de Twitter, AIOSEO utilizará automáticamente el título de tu entrada en la Twitter Card.

Después, desplázate hacia abajo y selecciona la Fuente de imagen para tu Twitter Card. Utiliza el menú desplegable para seleccionar la imagen que quieres mostrar para tu entrada, como una imagen destacada, una imagen adjunta, la primera imagen del contenido, etc.

Por último, puede seleccionar el tipo de Twitter Card en el menú desplegable. Por defecto, AIOSEO lo establecerá en ‘Resumen’, pero puedes cambiarlo a ‘Resumen con imagen grande’.

A continuación, actualiza o publica la entrada de tu blog. Ya has añadido correctamente Twitter Cards a tu sitio web WordPress.

Método 2: Añadir Twitter Cards en WordPress (Método del código)

Este método requiere añadir código a los archivos de tu tema o tema hijo. Simplemente abra el archivo header.php o utilice el plugin gratuito WPCode para añadir este código personalizado justo antes de la etiqueta </head>:

<?php
#twitter cards hack
if(is_single() || is_page()) {
  $twitter_url    = get_permalink();
 $twitter_title  = get_the_title();
 $twitter_desc   = get_the_excerpt();
   $twitter_thumbs = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), full );
    $twitter_thumb  = $twitter_thumbs[0];
      if(!$twitter_thumb) {
      $twitter_thumb = 'http://www.gravatar.com/avatar/8eb9ee80d39f13cbbad56da88ef3a6ee?rating=PG&size=75';
    }
  $twitter_name   = str_replace('@', '', get_the_author_meta('twitter'));
?>
<meta name="twitter:card" value="summary" />
<meta name="twitter:url" value="<?php echo $twitter_url; ?>" />
<meta name="twitter:title" value="<?php echo $twitter_title; ?>" />
<meta name="twitter:description" value="<?php echo $twitter_desc; ?>" />
<meta name="twitter:image" value="<?php echo $twitter_thumb; ?>" />
<meta name="twitter:site" value="@libdemvoice" />
<?
  if($twitter_name) {
?>
<meta name="twitter:creator" value="@<?php echo $twitter_name; ?>" />
<?
  }
}
?>

Puede cambiar el valor ‘twitter:card’ de la línea 14 por ‘summary_large_image’ si desea mostrar una tarjeta de resumen con una imagen grande.

Si no sabe cómo trabajar con PHP o tiene problemas con el método 2, utilice el método 1.

Pruebe y valide sus Twitter Cards

Antes de que los enlaces de tu sitio WordPress empiecen a mostrar Twitter Cards, primero tienes que marcarlo / comprobarlo en el validador de Twitter cards.

Sólo tienes que dirigirte a la página del Validador de tarjetas en el sitio web de los desarrolladores de Twitter. Introduce la URL de cualquier entrada de tu sitio WordPress y haz clic en el botón “Vista previa de la tarjeta”.

El validador de tarjetas ya no muestra una vista previa del tuit, pero sí un registro de si la tarjeta de Twitter se ha cargado correctamente o no.

Guías de expertos sobre el uso de Twitter con WordPress

Ahora que ya sabes cómo añadir Twitter cards a WordPress, puede que te interese ver otras guías relacionadas con el uso de Twitter con WordPress.

• Cómo tuitear automáticamente al publicar una nueva entrada en WordPress
• Cómo añadir el botón Compartir y Retwittear de Twitter en WordPress
• Cómo incrustar tweets reales en entradas de blog de WordPress
• Cómo corregir imágenes rotas de Twitter Card en WordPress
• Cómo mostrar Twitter y Facebook del autor en la página de perfil
• Los mejores plugins de Twitter para WordPress (Comparativa)
• Cómo mostrar tweets recientes en WordPress (paso a paso)
• Cómo añadir feeds de medios sociales a WordPress (paso a paso)

Esperamos que este artículo te haya ayudado a añadir Twitter Cards a WordPress. Puede que también quieras ver nuestra guía sobre cómo crear una página de destino con WordPress y nuestra selección experta de los plugins de WordPress imprescindibles para hacer crecer tu sitio web.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.