x
Tutoriales para hacerte un Experto en Joomla

A nosotros tampoco nos gusta el spam.

Twitter Cards Para Los Artículos de Joomla 3

Publicado por BIAlita en Joomla
twitter card en joomla
5.0 de 5 basado en 2 voto(s)
  / 2
PocoMucho 

Siempre buscamos formas de destacar nuestras publicaciones y con las tarjetas de Twitter tienes una gran oportunidad de hacerlo. En esta ocasión, vamos a configurar las Twitter Cards en los artículos de Joomla, aunque el artículo también te ayudará a conocer qué son y cómo funcionan sin importar en que esté desarrollado tu sitio.

 

¿Qué son las Twitter Cards?

Son los rich snippets o metadatos de Twitter y como ya mencioné, es una forma de destacar tus publicaciones en esta Red Social.

¿Has notado cuantos tweets ocurren durante el día en tu timeline? Destacarse puede volverse complicado si no optimizamos al menos los textos de cada tweet o agregamos una imagen llamativa.

Existen aproximadamente 100 millones de usuarios activos en Twitter al día (datos del 2015)

Ahora con las tarjetas de Twitter podrás presentar en cada tweet además de una imagen, información valiosa que podrá conseguir más clics y no solo RTs o FAVs. 

Tu tweet se verá como la siguiente imagen si cuentas con todos los datos solicitados.

 

Podrás ver las Twitter Cards cuando:

  • El tweet es expandido en el timeline desde la Web al dar clic en Ver Resumen
  • El tweet es expandido en el timeline desde dispositivos móviles al ver un ícono en la parte superior derecha
  • Cuando Twitter hace experimentos será posible ver la tarjeta sin expandir el tweet

 

Ventajas al usar las tarjetas de Twitter

El objetivo principal siempre será atraer tráfico a nuestro Sitio Web o App, usando las redes sociales como un medio de promoción y también para crear una comunidad.

Es por eso que Facebook, Google, Pinterest y Twitter están implementando estas nuevas formas de presentar el contenido.

Las ventajas principales serían:

  • Aumentarás tus seguidores.
  • Aumentarás las interacciones (RTs, FAVs y/o clics).
  • Obtendrás datos en tiempo real de estas interacciones e impresiones totales.
  • Si logras gran cantidad de interacciones sociales, seguro que te ayudar a posicionar orgánicamente tu artículo previamente optimizado.

 

Identifica quien contribuyó para crear el contenido publicado

Si estás familiarizado con los fragmentos enriquecidos de Google, sabes que se podía definir un Publisher y un Author. Lo mismo te pide definir Twitter.

Puedes definir un Publicador que en mi caso sería el Twitter de BIAlita (@servicios_webmx) y como Autor para este artículo sería yo (@_gretelg). Dependerá de ti cómo definir esta información.

Si comparas la imagen anterior con la siguiente, notarás la diferencia en los datos donde dice By Gretel Gutierrez @_GretelG.

Mi nombre lo toma del campo Autor en Joomla y mi twitter lo he tenido que definir directamente en el código (aunque se me ocurre poder tomarlo de los enlaces que se encuentran en las opciones de los artículos de Joomla).

 

Primeros pasos a Configurar

Todo lo que accede a nuestro Sitio Web es una persona o un robot, éstos últimos siguen las indicaciones del archivo robots.txt y es necesario asegurarnos que no se restrinja el acceso al robot de Twitter llamado Twitterbot.

Utilizando siguiente código, permites que todos los robots rastreen tu Sitio:

User-agent: *
...

 

Tipos de Twitter Cards

1. Summary Card. Es la tarjeta que vemos generalmente en Twitter. Incluye título, descripción, imagen en miniatura y la cuenta de Twitter al que se le atribuye el contenido.

<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content=“@vidtok" />
<meta name="twitter:title" content="Vidtok - Integrate Live Video Chat using WebRTC In a Few Simple Steps!" />
<meta name="twitter:description" content="Vidtok utilizes WebRTC to add high definition video and audio chats to your website or application without downloading or installing any software or plugins." />
<meta name="twitter:image" content="https://vidtok.com/wp-content/themes/enfold/images/logos/vidtok-square.png" />
<meta name="twitter:url" content="https://vidtok.com/" />

 

2. Summary Card with Large Image. Es la tarjeta que más me gusta y la que usaremos de ejemplo para los artículos de Joomla. Es igual que la anterior, pero con la diferencia que la imagen es larga.

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@marketingandweb">
<meta name="twitter:creator" content="@marketingandweb">
<meta name="twitter:title" content="Estrategia de Contenidos - Teoría de las 4 palabras clave">
<meta name="twitter:description" content="Teoría de las 4 palabras clave y cómo son los 4 pilares de tu tráfico web. 10 Consejos útiles para mejorar tu Estrategia de Contenidos.">
<meta name="twitter:image:src" content="http://cdn5.marketingandweb.es/wp-content/uploads/2015/04/palabras-clave-estrategia-de-contenidos.png">

 

3. Photo Card. Twitter lee la URL y busca el código para extraer una imagen centrada.

<meta name="twitter:card" content="photo" />
<meta name="twitter:site" content="@flickr" />
<meta name="twitter:title" content="Happy Easter" />
<meta name="twitter:image" content="http://farm8.staticflickr.com/7688/16429343043_c5ebd0d95c_z.jpg" />
<meta name="twitter:url" content="https://www.flickr.com/photos/michellekfamilysafe/16429343043/" />

 

4. Gallery Card. Muestra 4 imágenes y me gusta utilizarla para algunos Landing Pages o Páginas de Aterrizaje. También es efectiva para Sitios Web de Turismo.

<meta name="twitter:card" content="gallery" />
<meta name="twitter:site" content="@fodorstravel" />
<meta name="twitter:creator" content="@fodorstravel" />
<meta name="twitter:title" content="10 Under-the-Radar Attractions in the U.S.">
<meta name="twitter:description" content="Venture off the beaten path to visit some of the country's hidden attractions.">
<meta name="twitter:url" content="http://www.fodors.com/news/photos/10-under-the-radar-attractions-in-the-us" />
<meta name="twitter:image0" content="http://www.fodors.com/ee/files/slideshows/1-Rock-City-Georgia_1.jpg">
<meta name="twitter:image1" content="http://www.fodors.com/ee/files/slideshows/3-Sleeping-Bear-Dunes-Michigan_1.jpg">
<meta name="twitter:image2" content="http://www.fodors.com/ee/files/slideshows/4-Magic-Gardens-Philadelphia_1.jpg">
<meta name="twitter:image3" content="http://www.fodors.com/ee/files/slideshows/5-Lewis-and-Clark-Caverns-Montana-2.jpg">

 

5. App Card. Con el auge de las aplicaciones móviles, es una tarjeta que se debe tener para que los usuarios puedan instalarla directamente desde el tweet, así como ver sus características principales y el precio. Sólo hay que definir los App IDs y Twitter hará el resto.

<meta name="twitter:card" content="app">
<meta name="twitter:site" content=“@RankEatingWeb">
<meta name="twitter:description" content=“Do you want to find the best restaurant dishes close to you in a matter of seconds? Are you hungry and looking for an open restaurant? If so, stop wasting your time with other applications. Install...">
<meta name="twitter:app:country" content="">
<meta name="twitter:app:name:googleplay" content="">
<meta name="twitter:app:id:googleplay" content="">
<meta name="twitter:app:url:googleplay" content="">

 

6. Player Card. Son tarjetas que requieren además de validación, aprobación por parte de Twitter. Existe un proceso para su uso, como el descargar un .zip, subirlo al servidor e indicar la URL del elemento, pero debe ser https. Se puede utilizar video y audio.

Sitios como Vine, Vimeo, YouTube, etc. ya tienen implementado estas tarjetas y al subir un tweet con un enlace hacia estas aplicaciones se muestra como una Player Card.

 

7. Product Card. Es una tarjeta indispensable para todo Ecommerce. Muestra una imagen (160x160), descripción y atributos del producto (ej. color y talla).

<meta name="twitter:card" content="product">
<meta name="twitter:site" content="@BestBuyMexico">
<meta name="twitter:creator" content="@BestBuyMexico">
<meta name="twitter:domain" content="http://www.bestbuy.com.mx/">
<meta name="twitter:title" content="Refrigerador 13' Samsung silver/control">
<meta name="twitter:image" content="http://catalog.bestbuy.com.mx/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/1/0/1000177155_x1.jpg">
<meta name="twitter:label1" content="$ 9,190.00">
<meta name="twitter:data1" content="PRECIO">
<meta name="twitter:label2" content="En Stock">
<meta name="twitter:data2" content="STATUS">

Una vez que hayas marcado tu código, valídalo usando esta herramienta https://cards-dev.twitter.com/validator

 

Analizando los datos

La forma mas rápida de conocer si tu tweet ha conseguido interacciones es dar clic en este icono  desde la Web o tu dispositivo móvil, para saber cuantas veces se ha visto el tweet, cuantas personas han interactuado con él y de qué forma.

Para realizar un análisis completo, deberás entrar al Analizador o si ya estás en la Web da clic en el enlace Ver Detalles.

Twitter hace todo esto para conseguir que utilices su sistema de publicidad llamado Twitter Ads

Dentro del Analizador tenemos varias opciones para navegar. En el menú superior vemos el análisis por tweets, por seguidores, por las tarjetas de twitter y herramientas que incluye el seguimiento de conversiones si ya utilizamos Twitter Ads.

Los círculos grandes son los datos globales, muestra los Tweets que contienen un enlace a nuestro Sitio Web, publicados por cualquier persona en Twitter.

Las círculos pequeños muestran únicamente los datos de nuestra cuenta.

La métrica que yo considero importante son los clics. Si se recibieron de tu cuenta o hubo más de otros seguidores, te dará un dato importante sobre ellos, si son influyentes o no en tu nicho.

En los cambios cronológicos, vemos si tus tweets que incluyen tarjetas han mejorado o no tus impresiones y clics desde la fecha indicada. Es una forma más de medir si la inversión $$ de implementar las twitter cards te ha dado resultados.

Dentro de Analytics podrás ver las conversiones (ventas) provenientes de esos clics

Como vimos puedes utilizar diferentes tipos de Twitter cards en tu Página Web, y podrás medir también cual de ellas tiene mayor número de clics y hacer las modificaciones correspondientes. En mi ejemplo, hay un cuadro del lado derecho “Elije la mejor Card

 

"La mejor card que has implementado para lograr clics es la card gallery. Compara tu propia tasa de clics con las tasas promedio, y experimenta con cards diferentes para saber cuáles funcionarían mejor para ti"

 

Con esta interpretación podría decidir cambiar todas las tarjetas al tipo Gallery Card, pero debo esperar a tener más datos. Lo puedo medir semanal si publico muchos tweets o mensual, que en mi caso sería lo ideal.


Integración de las Twitter Cards en Joomla

Llegamos a la parte de implementación. Tus conocimientos deben ser intermedios en Joomla, es decir, debes conocer como realizar overrides y entender cómo se extraen los datos que vamos a necesitar.

Al final podrás bajar el código de ejemplo, para que lo revises con calma

Vayamos paso por paso. Si en tu plantilla ya tienes un archivo de los que mencione a continuación, sólo edítalo.

Recuerda siempre hacer un respaldo de seguridad de tu Sitio Web.

 

1. Para artículos de tu Blog, que no están anclados a un menú. Copia el archivo de: /components/com_content/views/article/tmpl/default.php a /templates/tutemplate/html/com_content/article/nombre.php

 

2. Abre el archivo nombre.php y verás que ya tienes algo de código dentro del primer <?php ... ?>

Necesitamos crear 2 variables, una para la meta descripción y otra para la twitter card.

La primer variable la podemos llamar $document y necesitarás agregar este código si es que no lo tienes:

$document = JFactory::getDocument();
$document->addCustomTag($headtag);
$metaDesc = $document->getMetaData('description’); //Obtiene la meta descripción ingresada en el articulo

 

Después usaremos la variable $twittercard para agregar el código de la tarjeta. Dentro del artículo de Joomla asegúrate de llenar el campo autor, la imagen para mostrar un artículo al completo y la metadescripción.

$twittercard .= '<meta name="twitter:card" content="summary_large_image">' ."\n";
$twittercard .= '<meta name="twitter:site" content=“@twitterEmprsa">' ."\n";
$twittercard .= '<meta name="twitter:creator" content=“@twitterAutor">' ."\n";
$twittercard .= '<meta name="twitter:title" content="'.$this->item->title.'"/>' ."\n";
$twittercard .= '<meta name="twitter:description" content="'.$metaDesc.'"/>' ."\n";
$twittercard .= '<meta name="twitter:image:src" content="'."http://www.tusitio.com/".$images->image_fulltext.'"/>' ."\n";

//agrega las etiquetas al <header> del articulo
$document->addCustomTag($twittercard);

Si ya cuentas con el marcado de Facebook (opengraph) evita duplicar la información.

3. Guardas la modificación del archivo y dentro del Gestor de Artículos seleccionas como presentación alternativa tu archivo php. En mi caso se llama mynewarticle.php

 

4. Valida tus datos con la herramienta y si no tienes errores, todos tus artículos que utilicen este archivo tendrán las Twitter card implementadas ✓

 

A cambio de una pequeña acción, podrás descargarte el código de ejemplo.


¿Qué te ha parecido el uso de las Twitter Cards? Yo lo veo un gran potencial porque en muchos nichos no se han utilizado y es un oportunidad de oro.

 

Te agradecería nos regalaras un +1 o votaras el artículo en la parte superior para seguir creando contenidos interesantes

 

Soy CEO de . Fundadora y co-administradora del grupo Joomla en México, también cuento con un Canal de YouTube sobre SEO Joomla y Wordpress que te invito visitar. Estoy certificada en Google Adwords y Google Analytics. Sígueme en mi perfil de Google + y salúdame para conocerte.

x
Tutoriales para hacerte un Experto en Joomla

A nosotros tampoco nos gusta el spam.