{"id":1168,"date":"2015-06-09T22:38:22","date_gmt":"2015-06-10T03:38:22","guid":{"rendered":"https:\/\/e-lexia.com\/blog\/?p=1168"},"modified":"2024-11-01T11:44:45","modified_gmt":"2024-11-01T16:44:45","slug":"que-son-las-twitter-cards","status":"publish","type":"post","link":"https:\/\/e-lexia.com\/blog\/que-son-las-twitter-cards\/","title":{"rendered":"\u00bfQu\u00e9 son las Twitter Cards?"},"content":{"rendered":"<p><iframe loading=\"lazy\" width=\"100%\" height=\"110\" frameborder=\"0\" allowfullscreen=\"\" scrolling=\"no\" src=\"http:\/\/www.ivoox.com\/player_ej_5532574_2_1.html?data=lpqglJqbeI6ZmKiakp6Jd6KlmZKSmaiRdo6ZmKiakpKJe6ShkZKSmaiRaaSmhqezs9qJh5SZop6Y1dTSb83V1JDB2c7YuMbmjKjO1MnXaZS6joqkpZKuucLijKjO1NHTt4zB0NfOzsrXb7Shhpywj5k%3D&#038;\"><\/iframe><\/p>\n<h2>Una introducci\u00f3n cr\u00edtica<\/h2>\n<p>Es impresionante la cantidad de opciones que ofrece Internet para la promoci\u00f3n de marcas (personales y organizacionales), ideas, servicios y productos. Las redes sociales, los sistemas de publicidad, las t\u00e9cnicas de posicionamiento org\u00e1nico (SEO) y la blog\u00f3sfera son una peque\u00f1a muestra de ese abanico de opciones. Algunas de estas opciones son pagas; otras, gratuitas.<\/p>\n<p>Estoy profundamente convencido que hoy -como nunca antes- tenemos la oportunidad de llevar nuestros contenidos hasta donde nunca lo hemos imaginado (como dicta una de las frases de e-Lexia.com). En t\u00e9rminos sencillos, tenemos la posibilidad de ser famosos. Lo m\u00e1s espectacular es que estamos hablando de una fama que supera la far\u00e1ndula criolla.<\/p>\n<p>Imagino que no me creen\u2026 Bueno. Igual, no voy detenerme a listar personajes en l\u00ednea (reales y ficticios) que han superado en creces la popularidad de personajes de esta ciudad. Esto es tela para otra entrada. Lo que s\u00ed puedo adelantar es que el talento y la disciplina son fundamentales en ese proceso de construcci\u00f3n social.<\/p>\n<p>Pero bueno. Concentr\u00e9monos en lo que nos convoca esta entrada: Twitter Cards.<\/p>\n<p><!-- Google Adsense --><\/p>\n<div class=\"adsense\">\n  <script async src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js?client=ca-pub-7923590131153633\" crossorigin=\"anonymous\"><\/script><br \/>\n  <ins class=\"adsbygoogle\" style=\"display:block; text-align:center;\" data-ad-layout=\"in-article\" data-ad-format=\"fluid\" data-ad-client=\"ca-pub-7923590131153633\" data-ad-slot=\"5345374831\"><\/ins><br \/>\n  <script>(adsbygoogle = window.adsbygoogle || []).push({});<\/script>\n<\/div>\n<h2>Twitter Cards. Una breve definici\u00f3n<\/h2>\n<p>Espero que muchos sepan qu\u00e9 son. Estoy seguro que s\u00ed. \u00bfPor qu\u00e9? Porque las Twitter Cards son una opci\u00f3n que ofrece la red del \u201cpajarito azul\u201d desde hace un par de a\u00f1os. Ahora, si no conoces este recurso, pues aqu\u00ed esta entrada te caer\u00e1 como \u201canillo al dedo\u201d.<\/p>\n<p>Definici\u00f3n:<\/p>\n<blockquote><p>Twitter Cards son instrucciones que declara un sitio Web para anexar informaci\u00f3n enriquecida a un tuit que lo est\u00e1 enlazando. Esta informaci\u00f3n puede ser: fotograf\u00eda, video, descripci\u00f3n sobre el contenido, ubicaci\u00f3n en Internet (enlace), autor, entre otros.<\/p>\n<p>As\u00ed, cuando un tuit hace referencia a un sitio Web (una p\u00e1gina Web, para ser m\u00e1s preciso), este mensaje presenta informaci\u00f3n extra que agrega elementos de valor para el usuario y \u2013seguramente- lo persuade a realizar tr\u00e1fico al recurso.<\/p><\/blockquote>\n<p>En la siguiente imagen comprenderemos mejor lo que intento explicar:<\/p>\n<blockquote class=\"twitter-tweet\" data-lang=\"es\">\n<p lang=\"en\" dir=\"ltr\">Ense\u00f1ar, construir comunidades de aprendizaje y gestionar conocimiento es lo que disfruto hacer. Ser profesor es mi proyecto de vida<\/p>\n<p>Teaching, building learning communities and managing knowledge is what I enjoy doing. Being a teacher is my life project<a href=\"https:\/\/t.co\/dInTCD4VtG\">https:\/\/t.co\/dInTCD4VtG<\/a><\/p>\n<p>&mdash; Juan Carlos Morales S. (@Escuela Digital) <a href=\"https:\/\/twitter.com\/Escuela Digital\/status\/1005195065260756992?ref_src=twsrc%5Etfw\">8 de junio de 2018<\/a><\/p><\/blockquote>\n<p><script async src=\"https:\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script><\/p>\n<p>El tuit fue publicado desde la cuenta @Escuela Digital y hace referencia a una p\u00e1gina de e-Lexia.com.<\/p>\n<p>Le recomiendo analizar detenidamente la estructura del mensaje.<\/p>\n<h2>\u00bfQu\u00e9 informaci\u00f3n anexa la Twitter Card?<\/h2>\n<p>Continuando con el tuit de ejemplo, logramos identificar, luego de la fecha de publicaci\u00f3n:<\/p>\n<ul>\n<li>Imagen y nombre del perfil de la cuenta Twitter asociada al sitio Web<\/li>\n<li>Imagen destacada<\/li>\n<li>T\u00edtulo del contenido vinculado<\/li>\n<li>Enlace y nombre del autor del art\u00edculo enlazado<\/li>\n<li>Descripci\u00f3n del recurso que referencia el tuit<\/li>\n<li><a href=\"https:\/\/e-lexia.com\/diccionario-tic\/enlace-web\/\" rel=\"noopener\" target=\"_blank\">Enlace<\/a> a la p\u00e1gina web<\/li>\n<\/ul>\n<p>Imagine poder anexar toda esta informaci\u00f3n con los mismos 280 caracteres. A mi me parece que es una grandiosa opci\u00f3n del \u201cpajarito azul\u201d.<\/p>\n<p><!-- ASESOR COMUNICATIVO --><\/p>\n<div class=\"destacado-asesor\">\n<div class=\"destacado-asesor__imagen\">\n    <a href=\"https:\/\/e-lexia.com\/contacto.html\"><br \/>\n      <img decoding=\"async\" src=\"https:\/\/e-lexia.com\/blog\/wp-content\/uploads\/2023\/01\/asesor-comunicativo-juancadotcom.png\" alt=\"Juan Carlos Morales S., asesor en comunicaci\u00f3n digital\"><br \/>\n    <\/a>\n   <\/div>\n<div class=\"destacado-asesor__desc\">\n<h2><a href=\"https:\/\/e-lexia.com\/contacto.html\">\u00bfNecesitas asesor\u00eda en comunicaci\u00f3n digital?<\/a><\/h2>\n<p>Dise\u00f1a y optimiza tus proyectos en comunicaci\u00f3n digital, entregando una mejor experiencia a tus usuarios y potenciando el valor de tu marca.<br \/>\n      <a class=\"cta-asesor\" href=\"https:\/\/e-lexia.com\/contacto.html\">Conversemos<\/a>\n     <\/p>\n<\/p><\/div>\n<\/div>\n<h2>\u00bfCu\u00e1ntas tarjetas de Twitter existen?<\/h2>\n<p>Seg\u00fan el sitio Web <a href=\"https:\/\/dev.twitter.com\/cards\/types\" target=\"_blank\" rel=\"noopener noreferrer\">Twitter para desarrolladores<\/a> existen cuatro tipos de tarjetas:<\/p>\n<ul>\n<li><em>Summary card<\/em>: permite anexar t\u00edtulo, descripci\u00f3n, vista miniatura y una cuenta Twitter.<\/li>\n<li><em>Summary card with large image<\/em>: similar a la anterior, con la posibilidad de anexar una imagen mayor (es la tarjeta del ejemplo que anex\u00e9 p\u00e1rrafos atr\u00e1s)<\/li>\n<li><em>App card<\/em>: permite describir y vincular una aplicaci\u00f3n m\u00f3vil.<\/li>\n<li><em>Player card<\/em>: entrega contenido multimedia al tuit.<\/li>\n<\/ul>\n<p>Otros blogs describen una lista m\u00e1s extensa, pero en obedecen a las mismas cuatro opciones que acabo de compartirte.<\/p>\n<p>Miremos las diferentes tarjetas:<\/p>\n<p>Summary Card:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/e-lexia.com\/blog\/wp-content\/contenido\/2015\/twitter-card-01.jpg\" \u00a0alt=\"Twitter Card, Summary\"><\/p>\n<p>Summary card with large image:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/e-lexia.com\/blog\/wp-content\/contenido\/2015\/twitter-card-02.jpg\" alt=\"Twitter Card, Summary with large image\"><\/p>\n<p>App card:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/e-lexia.com\/blog\/wp-content\/contenido\/2015\/twitter-card-03.jpg\" alt=\"Twitter Card, App card\"><\/p>\n<p>Player card:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/e-lexia.com\/blog\/wp-content\/contenido\/2015\/twitter-card-04.jpg\" alt=\"Twitter Card, Player card\"><\/p>\n<p>Nota: las im\u00e1genes las he obtenido desde el sitio Web <a href=\"https:\/\/dev.twitter.com\/cards\/types\" target=\"_blank\" rel=\"noopener noreferrer\">Twitter para desarrolladores<\/a>.<\/p>\n<h2>\u00bfC\u00f3mo crear una Twitter Card?<\/h2>\n<p>El proceso es bastante sencillo, m\u00e1s a\u00fan cuando tienes conocimientos en HTML. Ahora, si no dominas este lenguaje de marcado pero cuentas con WordPress, es asunto es mucho m\u00e1s f\u00e1cil a\u00fan.<\/p>\n<p>Empecemos con HTML. Los pasos son:<\/p>\n<ul>\n<li>Ingresar al sitio Twitter para desarrolladores: <a href=\"https:\/\/dev.twitter.com\/cards\/overview\">https:\/\/dev.twitter.com\/cards\/overview<\/a>;<\/li>\n<li>seleccionar el tipo de tarjeta que mejor se adapte al contenido;<\/li>\n<li>copiar las l\u00edneas de c\u00f3digo que anexan como ejemplo;<\/li>\n<li>reemplazar los valores de los atributos por la informaci\u00f3n que deseas anexar en la tarjeta;<\/li>\n<li>insertar el c\u00f3digo en la p\u00e1gina(s) web (este c\u00f3digo se pega en la secci\u00f3n &lt;HEAD&gt;);<\/li>\n<li>realizar la actualizaci\u00f3n de la(s) p\u00e1gina(s); y, por \u00faltimo,<\/li>\n<li>validar el nuevo marcado con la herramienta que dispone Twitter para ello: <a href=\"https:\/\/cards-dev.twitter.com\/validator\" target=\"_blank\" rel=\"noopener noreferrer\">Cards Validator<\/a><\/li>\n<\/ul>\n<p>Ten presente que las tarjetas para multimedia y aplicaciones tienen configuraciones diferentes. La documentaci\u00f3n de Twitter ayudar\u00e1 a sacar el mejor provecho.<\/p>\n<p>Para facilitar el proceso, comparto un video donde explico c\u00f3mo crear un tarjeta Twitter de imagen destacada:<\/p>\n<div class=\"marco-yt\">\n<div class=\"video-yt\">\n<iframe loading=\"lazy\" width=\"560\" height=\"400\" src=\"https:\/\/www.youtube.com\/embed\/3ly3uQ8S5Qk\" frameborder=\"0\" allowfullscreen><\/iframe>\n<\/div>\n<\/div>\n<p class=\"youtube-video\"><img decoding=\"async\" src=\"https:\/\/e-lexia.com\/blog\/wp-content\/logo-youtube.png\">En el <a href=\"https:\/\/www.youtube.com\/@escuela-digital?sub_confirmation=1\" target=\"_blank\" rel=\"noopener\">canal YouTube \u00abEscuela Digital\u00bb<\/a> puedes encontrar m\u00e1s videos sobre el tema.<\/p>\n<h2>\u00bfC\u00f3mo conecto Twitter Card con WordPress?<\/h2>\n<p>Pues el proceso es sencillo. No hace falta tener conocimientos en HTML. Los pasos a seguir son:<\/p>\n<ul>\n<li>Ingresa a WordPress.org;<\/li>\n<li>en el directorio de <em>plugins<\/em>, busca \u201cJM Twitter Cards\u201d;<\/li>\n<li>descarga el <em>plugin<\/em> y s\u00fabelo a tu blog;<\/li>\n<li>activa la nueva adici\u00f3n desde el administrador del blog;<\/li>\n<li>configura las opciones de \u201cJM Twitter Cards\u201d, para ello lee la documentaci\u00f3n. Es sencillo.<\/li>\n<\/ul>\n<p>Bien, espero que haya sido de inter\u00e9s y agrado esta entrada. Recuerda comentarla y compartirla con tus amigos y compa\u00f1eros de trabajo.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Una introducci\u00f3n cr\u00edtica Es impresionante la cantidad de opciones que ofrece Internet para la promoci\u00f3n de marcas (personales y organizacionales), ideas, servicios y productos. Las redes sociales, los sistemas de publicidad, las t\u00e9cnicas de posicionamiento org\u00e1nico (SEO) y la blog\u00f3sfera son una peque\u00f1a muestra de ese abanico de opciones. Algunas&hellip;<\/p>\n","protected":false},"author":1,"featured_media":1572,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[47],"tags":[44,24],"class_list":["post-1168","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-socialmedia","tag-seo","tag-twitter","has-post-thumbnail-archive"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/posts\/1168","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/comments?post=1168"}],"version-history":[{"count":0,"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/posts\/1168\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/media\/1572"}],"wp:attachment":[{"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/media?parent=1168"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/categories?post=1168"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/tags?post=1168"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}