Las tarjetas de Twitter son una forma de tuit enriquecido, que permite mostrar información multimedia a modo de vista previa incluyendo el título, resumen, autor e imagen, lo que la hace más atractiva a la vista del usuario. En este post te enseñare a configurarla ya que de lo contrario, al colocar el link de tu web en Twitter, esta no mostrara el contenido multimedia.

Test y validador de Twitter Cards

https://cards-dev.twitter.com/validator

Código HTML para el Head:

Les dejo enlace para descargarlo, porque no me permite escribirlo aquí por los caracteres especiales. Pueden descargarlo con confianza.

https://mega.nz/#!B9MXyTwT!WnoSvRhAM4tqXLHI3eLGJu62i5iWy3mo0Mnyny_H6_8


Código puro:

<!--INICIA TAGS PARA TWITTER Cards -->

      <meta content='summary_large_image' name='twitter:card'/>

      <meta content='@Oficialdtym' name='twitter:site'/>

      <meta content='@el_george__' name='twitter:creator'/>


 <!-- SI ES LA PAGINA PRINCIPAL -->

    <b:if cond='data:blog.pageType == &quot;index&quot;'>

      <meta content='De Tecnología y más' property='og:title'/>

      <meta content='Hablamos de tecnología en un lenguaje fácil, para que todos la puedan entender.' property='og:description'/>

      <meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigSBdFkcCn0c-JGmkF7PgmMlDXc9I-FuWNg6uTT-noN0VQB6uMF1IYJ7HtNdQRJNu59QxkHAEv8Qbdi624m4El0R5pdQij6lqUGRhQGuHgajpOsTUVTLl5hDp0Ppjdlk88lGve_6AKgtAE/s1600-r/banerdtym1150x250.png' property='og:image'/>

      <meta expr:content='data:blog.homepageUrl' name='og:url'/>


<!-- SI ES UN POST DIFERENTE A LA PAGINA PRINCIPAL -->

    <b:else/>

<meta expr:content='data:blog.url' name='og:url'/>

<meta expr:content='data:blog.pageName' name='og:title'/>

<meta expr:content='data:blog.postImageUrl' name='og:image'/>


<!-- SI EL POST CONTIENE DESCRIPCION -SEARCH DESCRIPTION  -->

<b:if cond='data:blog.metaDescription'>

<meta expr:content='data:blog.metaDescription' name='og:description'/>

<!-- SI EL POST NO CONTIENE DESCRIPCION -SEARCH DESCRIPTION  -->

      <b:else/>

<meta content='Pasa a leer este artículo en De Tecnología y más. Si te gusta no olvides en darle RT.' name='og:description'/>

</b:if>

</b:if>

    <!--FIN DE TAGS PARA TWITTER Cards-->



Mas info en:

https://www.maxcf.es/crear-twitter-cards/