Cómo crear una tarjeta de Twitter -

Una de mis API sociales favoritas fue laAPI Open Graph adoptada por Facebook . Agregar solo unas pocas etiquetas META a cada página permitió que los enlaces a mi artículo tuvieran el estilo y la presentación que yo quería, lo que me dio un poco de control sobre cómo se presenta mi contenido en Facebook.La nueva API Twitter Cards de Twitter permite la misma idea: agregar etiquetas META a sus páginas para permitir que los enlaces a su sitio sean más informativos cuando se twittean. Implementar etiquetas META de Twitter Card en su sitio toma cinco minutos, solicitar la aprobación de Twitter toma otros cinco minutos y, a partir de ese momento, su contenido se presenta de manera mucho más profesional. ¡Empecemos!

Etiquetas META de la tarjeta de Twitter

Hay tres tipos de Twitter Cards: resumen, foto y vídeo. La Twitter Card resumida es para artículos y contenido basado en texto, mientras que las tarjetas de fotos y de video se explican por sí solas (YouTube usa el tipo de tarjeta de video, por ejemplo). Hay algunas etiquetas META que se utilizan para todos los tipos de tarjetas, luego algunas más que son específicas del tipo de tarjeta. Todos los atributos de nombre de etiqueta META tienen el prefijo twitter:.

Etiquetas META genéricas

Las etiquetas META que usarías en todos los estuches de tarjetas incluyen:

• twitter:card– El tipo de tarjeta a crear: resumen, foto o vídeo.
• twitter:url– La URL que se debe utilizar para la tarjeta. Probablemente será la misma URL que elenlace canónico de la página .
• twitter:title– El título como debería mostrarse en la Tarjeta de Twitter.
• twitter:description– Un resumen de 200 caracteres del contenido en la URL proporcionada.
• twitter:image– Una URL de imagen representativa del contenido. En muchos casos, bastará con proporcionar la URL de su logotipo.

Cada uno de estos elementos tiene su propia etiqueta META, por lo que las etiquetas META de la tarjeta de Twitter para esta página se verían así:

meta name="twitter:card" content="summary"meta name="twitter:url" content="https://davidwalsh.name/twitter-cards"meta name="twitter:title" content="Cómo crear una tarjeta de Twitter"meta name="twitter:description" content="La nueva API Twitter Cards de Twitter permite a los desarrolladores agregar etiquetas META a su sitio web, y Twitter creará contenido de tarjetas a partir de enlaces a un sitio determinado."meta name="twitter: imagen" contenido="https://davidwalsh.name/wp-content/themes/punky/images/logo.png"

Twitter también proporciona etiquetas META de atribución para el contenido, lo que brinda a los autores la oportunidad de obtener crédito dentro de TwitterCard:

• twitter:site– El nombre de usuario de Twitter utilizado por el sitio determinado, incluido el ‘@’
• twitter:creator– El nombre de usuario de Twitter del autor individual del contenido.

Utilizo el mismo identificador para el sitio y el autor, aunque podría usar mi cuenta @davidwalsh para el creador si quisiera:

meta name="twitter:site" content="@davidwalshblog"meta name="twitter:creator" content="@davidwalshblog"

These are the basic META tags you’ll want to use whenever creating Twitter Cards. Let’s have a look at the tags specific to image and video cards!

Image and Video META Tags

Media-specific cards require a bit more information about the media itself, so for image and video cards, these additional tags are useful:

• twitter:image:width – The width of the image
• twitter:image:height – The height of the image
• twitter:player – URL to the IFRAME’d player, must be HTTPS
• twitter:player:width – The width of the player IFRAME
• twitter:player:height – The height of theplayer IFRAME
• twitter:player:stream – The URL to stream as video
• twitter:player:stream:content_type – The content type of the stream

Twitter video cards are much more involved than the other card types, but well worth configuring so that users can watch their videos within their Twitter app. Sample tags could look like:

meta name="twitter:image:width" content="600"meta name="twitter:image:height" content="600"meta name="twitter:player" content="https://davidwalsh.name/video-embed/12345"meta name="twitter:player:width" content="435"meta name="twitter:player:height" content="251"meta name="twitter:player:stream" content="https://davidwalsh.name/raw-stream/12345.mp4"meta name="twitter:player:stream:content_type" content="video/mp4; codecs="avc1.42E01E1, mpa.40.2""

Twitter provides aCard Preview utility so that you can ensure your META tags are used in a valid fashion. I recommend using this utility for all card types, but especially for video card types, as they require the most information.

Now that the Twitter Card META tags are in place, the next step is applying for approval from Twitter.

Applying for Twitter Card Approval

Twitter requires that your domain be approved before they will allow Twitter Cards for your site; this is likely to combat abuses like pornography and sites promoting illegal activity. When youapply for Twitter Card approval, you provide simple information about your site, like the Twitter username associated with the domain, which cards you intend on using, and so on:

Twitter mentions the approval process can tween five and ten days, but my site was approved in two days. Once your site is approved, links to your site containing the appropriate META tags will provide Twitter clients enough information to build Twitter Cards!

Twitter and Robots.txt

If you’re running into issues with your card content not being pull correctly, ensure that your robots.txt file isn’t blocking Twitter. Twitter’s bot is aptly named Twitterbot so check your robots.txt file for incorrectly Disallow rules!

Sample Twitter Card

The following image shows a Twitter card for this site:

Al principio me molestó la idea de Twitter de una Twitter Card porque supuse que cerraría la plataforma y, hasta este punto, nadie sabe si ese será el caso. Lo que sí sé es que implementar etiquetas META de tarjetas de Twitter es increíblemente fácil y proporciona otra forma para que los propietarios de sitios o empresas comercialicen eficazmente su sitio. Las tarjetas de Twitter también son agradables para el usuario, ya que les permiten reproducir vídeos dentro de su cliente de Twitter o simplemente proporcionar una imagen asociada con un tweet determinado.

¿Quieres ver las Twitter Cards en acción? Tuitea un enlace a esta o cualquier otra publicación en el sitio, luego haz clic/toca el tweet para obtener una vista detallada.