Twitter cards a fondo, lo mejor para triunfar en twitter. A mi Twitter es una red social que me gusta mirar, pero me da mucha pereza escribir o compartir cosas en ella, tanto que cuándo veo algo que me ahorra el trabajo me hacen los ojos chirivitas, este fué el caso de las tarjetas de twitter.
Hace poco comencé a ver las twitter cards y me llamaron la atención bastante, por que al contener foto, extracto del post, la posibilidad de retwittear y lo fáciles que son de compartir… tuve un flechazo y decidí implementarlas en algunos de mis blogs para probarlas como muchas cosas que al final se me olvidan, pero el otro día cascando con una amiga blogger me regañó por sen tan roñosa con el Twitter y me enseñó las publicaciones que está haciendo de su blog:
Eran preciosas Twitter cards en lugar de cuatro frases que pongo, claro viendo eso y mi twitter dije lo hago ya mismo!
Pues entre el verano y otras cosas hasta hace cuatro días no me he podido volver a poner a ello así que he realizado unos tutoriales sobre como se implementan las tarjetas de Twitter en wordpress y blogger.
El diseño tipo tarjeta es algo que a Google le encanta, no obstante si ves el layout de G+ es diseño de tarjetas, al igual que pinterest. La posibilidad de combinar, texto, foto e interacción en un pequeño script es algo muy interesante tanto para mejorar la presencia en las redes sociales como para hacer nuestro contenido mas homogéneo y fácil de compartir.
A parte el Tweet es mucho mayor en algunos casos, por tanto tiene mas impacto visual y por lo que comentan el su guía el aumento de impresiones es bastante grande, además acompañan a una herramienta de estadísticas de twitter, (lo siento me gustan mucho las estadísticas).
Paso primero vamos a la página de inicio de Twitter cards:
El la cuál nos presentan el tipo de tarjetas de twitter que hay, son 8 modelos distintos, en el caso de los blogs dependemos de la plataforma que usamos CMS y según la que sea así debemos implementarlo de una forma u otra.
Para poder instalar las Twitter cards debes aprobar el validador de twitter, pueden surgir problemas por la implementación o por la anatomía del formato de nuestras entradas:
- Necesitas que aparezca el título del post.
- En el caso de fotografías normalmente elige la primera del post, en la mayor parte de las plantillas ignora la de cabecera.
- El autor del post puede ser un usuario de Twitter distinto.
- Si vuestro blog es antiguo, quizás no funcionen como esperábamos…
- Ten picardía pon el que cumpla con los criterios.
Como poner las Twitter cards en blogger:
Voy a hacer algunos modelos de Twitter cards con su instalación en la plantilla de blogger, los mas interesantes para blogs, porque al instalarse en la template sólo podéis tener un modelo, elegir el que mas os guste:
Debes incluir el código preferiblemente debajo de esta línea:
<b:includable id=’post’ var=’post’>
En es blog BloggerHow he encontrado esta forma en la que nuestro código queda así y el resumen del post es este, os lo muestro en el validador para que veáis que funciona bien!
<meta name=”twitter:card” content=”summary”/>
<meta name=”twitter:site” content=”@hurdi1177″/>
<meta name=”twitter:creator” content=”@hurdi1177″/>
<b:if cond=’data:blog.pageType == "item"’>
<meta name=”twitter:url” expr:content=’data:blog.url’ />
<meta name=”twitter:title” expr:content=’data:blog.pageName’ />
<meta name=”twitter:description” expr:content=’data:blog.metaDescription’/> <b:else/>
<meta name=”twitter:url” expr:content=’data:blog.homepageUrl’ />
<meta name=”twitter:description” expr:content=’data:blog.metaDescription’/> </b:if> <b:if cond=’data:blog.postImageThumbnailUrl’>
<meta expr:content=’data:blog.postImageThumbnailUrl’ name=”twitter:image”/>
<meta name=”twitter:title” expr:content=’data:blog.title’ /> <b:else/>
<meta content=’URL DE TU FAVICON’ name=”twitter:image”/>
<meta expr:content=’data:blog.title’ name=’twitter:title’/> </b:if>
Otro modelo con la foto mucho mas grande es este: Summary Card with Large Image, es el que mas me gusta.
Y el código se queda así, cambiar el usuario y la dirección del blog de mi perro XD
<meta content=’@hurdi1177′ name=’twitter:site’/>
<meta content=’@hurdi1177′ name=’twitter:creator’/>
<meta content=’http://perritopunk.blogspot.com.es/’ name=’twitter:domain’/>
<b:if cond=’data:post.firstImageUrl’>
<meta content=’summary_large_image’ name=’twitter:card’/>
<meta expr:content=’data:post.firstImageUrl’ name=’twitter:image’/>
<meta expr:content=’data:post.snippet’ name=’twitter:description’/>
<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>
<meta expr:content=’data:post.title’ name=’twitter:title’/>
<b:if cond=’data:blog.pageType == "item"’>
<b:else/>
<meta content=’Para punkis y outsiders, sin sarcasmo somos borregos’ name=’twitter:description’/>
</b:if>
Instalar twitter cardas en wordpress.
En el caso de wordpress la instalación de tarjetas de twitter es mediante plugins, de momento existen tres en el mercado y gratuitos.
Jetpack, JM Twitter Cards y WordPress SEO by Yoast.
En el caso de Jetpack está integrado en la opción de compartir, además podéis personalizar el campo para compartir en el propio post lo que os da un espacio extra en el Tweet.
Es recomendable que añadas este archivo a tu instalación en el archivo functions.php
En la línea summary puedes sustituir ese nombre por otro tipo de tarjeta, por ejemplo para la imagen grande es ‘summary_large_image’, aunque con jetpack es mejor dejarlo en summary porque a veces falla.
function tweakjp_custom_twitter_site( $og_tags ) {
$og_tags['twitter:site'] = '@jeherve';
$og_tags['twitter:card'] = 'summary';
return $og_tags;
}
add_filter( 'jetpack_open_graph_tags','tweakjp_custom_twitter_site', 11 );
El plugin JM twitter cards no lo he probado porque no es compatible con algunas de mis plantillas, pero parece la manera mas sencilla de implementar las twitter cards en un blog de wordpress si tener que manejar código.
También la opción es hacerlo mediante seo by Yoast un plugin al que le dedicaré un especial entero porque es el mejor de los que existen para wordpress, bien usado y bien configurado. En este caso sólo tenemos que ir a la pestaña social, elegir twitter y seleccionar la casilla de “Añade meta datos de tarjeta de Twitter” elegimos entre los dos tipos de tarjetas y ya lo tenemos.
Muy importante, si no vamos al vaidador de tarjetas de twitter es como si no hacemos nada, debemos tener una aprobada para que comiencen a funcionar.
En este caso es la tarjeta que obtengo del plugin SEO by Yoast.
Para instalar las tarjetas de Google en WordPress.com
En realidad se instalan solas cuándo vinculas tu cuenta de twitter con tu blog, pero tienes que validar al menos una url para tener las tarjetas de twitter disponibles en tu blog.
Espero que os guste el artículo, sé que parece un poco lio pero esto se hace en unos minutos.
¿Nos vemos en twitter?
Puzzle Bobble
Karate Blazers
Puzzle De Bloques
Magical Cat Adventure