¿Qué son los meta-tags?

Son líneas de código "ocultas" en el html de nuestro sitio. No se visualizan en el contenido online de un sitio, pero están.


¿Para qué sirve los meta-tags?

Los meta-tags te ayudan a que tu contenido posicione mejor y favorece su difusión dentro de las redes sociales.

¿Notaste que, al incluir desde nuestro sitio un enlace en Facebook, a veces se carga una imagen, pero otras veces sólo vemos un recuadro pobre con texto? Esto ocurre porque Facebook intenta leer los meta-tags de tu contenido… sin éxito.


Los meta-tags permiten definir tanto las imágenes como las descripciones de nuestros contenidos, muy útil cuando nosotros mismos o un lector comparte nuestro post en Facebook, Pinterest o Twitter. Saber exactamente qué Meta Tags incluir puede ser confuso. Por eso, en este post te voy a presentar los meta-tags sociales que no deberían faltar en tu contenido, y repasaremos las herramientas gratis que puedes usar para aprovecharlos con facilidad.


Generador y previsualizador de Meta Tags automáticos

En metatags.io podrás generar los Meta Tags de image, title y description o previsualizar cómo quedarán en las distintas rrss.

Open Graph

El sentido único que tienen los Open Graph Meta Tags es facilitar la integración entre una dirección compartida de nuestro sitio y una red social.

Open Graph tiene la sintaxis og:x, y dentro de la sección "head" lo verás así:

A continuación una breve descripción de qué es cada una de los distintos Meta Tags:


og:type

En este Meta Tag describes qué tipo de contenido estás compartiendo, es decir, si tu contenido es un blog, una ciudad...

  • Activities
    • activity
    • sport
  • Business
    • bar
    • company
    • cafe
    • hotel
    • restaurant
  • Organizations
    • band
    • goverment
    • non_profit
    • school
    • university
  • People
    • actor
    • athlete
    • author
    • director
    • musician
    • politician
    • public_figure
  • Places
    • city
    • country
    • landmark
    • state_providence
  • Products and Entertainment
    • album
    • book
    • drink
    • food
    • game
    • product
    • song
    • movie
    • tv_show
  • Websites
    • blog
    • website
    • article

og:title

En este Meta Tag escribes el título de tu contenido. Piensa en esto como algo similar a tu html title tag normal que el motor de búsqueda usa. Cuando crees tu og:title, mantén el número de caracteres cerca de 95 caracteres.


og:description

Esto también es similar a tu html meta description porque es utilizada par describir tu contenido. No te debe importar si es una buena keyword, sin embargo debes de incluir una descripción atractiva que te dará más clics. Tienes hasta 156 caracteres para esta tag.


og:image

Usando este Meta Tag, asegurarás que la imagen se muestre con el contenido que estás compartiendo. De esta manera, destaca entre todo el contenido basado en solo texto en las actualizaciones de status en Facebook.

Tu tráfico en Facebook es capaz de aumentar más del 100% por usar este Meta Tag.

Los requisitos de Facebook para una imagen tiene que ser al menos 5o x 50 px, pero preferentemente más grande de 200 x 200 px. La imagen no puede ser más de 5 MB.


og:url

En este Meta Tag, deberías de poner la URL de la página que estás compartiendo. Este Meta Tag puede parecer irrelevante, pero es importante porque a veces puedes tener más de una URL para el mismo contenido. Usando este Meta Tag, te asegurarás que siempre que sea compartido vayan a una URL en lugar de varias URL´s, lo cual debe ayudar a tu Facebook Edgerank.


og:site_name

Este Meta Tag le dice a Facebook el nombre de tu sitio web.


Bonus: Fb:Admins

Si tienes una página de Facebook y quieres más información en Facebook Insights, entonces debes usar este Meta Tag. Le dices a Facebook que eres el dueño del perfil, y conecta tu página de Facebook a tu sitio web.

Vista preliminar en Facebook

Una herramienta natal de Facebook, online y por supuesto gratuita, te permitirá tanto previsualizar el código como encontrar errores, de existir. Esta herramienta se denomina debugger, y la encontrarás en herramientas de desarrollador de Facebook.

Por lo demás, quizás te sirva complementar esta información con la guía de prácticas recomendadas para contenido compartido en la página de Facebook.


¡¡Recuerda!! que las imágenes deben ser png o jpg, perdí mucho tiempo con los svg


Twitter Cards

Con respecto a Twitter Cards, podemos decir que funciona de manera idéntica, pero solamente sirven para compartir en Twitter. Ninguna otra red social buscará este código en nuestro sitio, ni le sirve de ningún provecho. Pero, como dijimos, preparándonos para que nuestro contenido sea compartido en la red del pajarillo, debemos incluirlo.

Los Meta Tags Twitter Cards en tu head:


twitter:card

Sólo destacar este Meta Tag porque el resto son parecidos a los ya explicados

Este Meta Tag describe el tipo de contenido que estás compartiendo. Tienes tres opciones con Twitter: photo (para imágenes), player (para videos), summary (para todo lo demás) y summary with large image (tiene las mismas características que la card summary, pero ofrece un poco mas de espacio para una imagen y descripción). Si tú no defines tu card, Twitter lo identificará como tipo summary por defecto.


twitter:image"

Para que tu Tweet sobresalga necesitas una imagen. Tus imágenes deben ser de menos de1 MB, pero no pueden ser menores de 60 x 60 pixeles. Imágenes de mayor tamaño de 120 x 120 pixeles serán ajustadas.


Al igual que ocurre con Facebook, Twitter también provee su propia herramienta de validación online para verificar la salud de nuestro código de meta-tag. En esta dirección encontrarás el Twitter Card Validator.


¡¡Recuerda!! que las imágenes deben ser png o jpg, perdí mucho tiempo con los svg


Comparativa

FacebookTwitter
TitleEl título, titular o nombre del objeto. Un título conciso relacionado con el contenido. (Máximo 70 caracteres)
Description Una descripción corta o resumen del objeto. (Entre 2 y 4 frases) Una descripción que resuma el contenido como la presentación en un Tweet. No deberías rehusar el título como la descripción. Usa este campo para describir el propósito general del objeto. (Máximo 200 caracteres)
Image La URL de la imagen para el objeto. Al menos 600x315 pixels, pero 1200&x630 es preferible (máximo 5MB). Permancer cerca 1.91:1 de ratio para evitar el cropping. Una URL de una imagen que identifique al contenido. No uses una imagen genérica como un logo u otra imagen que aplique a varias páginas. La imagen para la tarjeta debería ser al menos 280px de ancho, y 150px de alto. Menos de 1 MB.
URL La URL desnuda de tu página. Sin variables de sesión, sin parámetros...

Servicios

Software

IoT

Digitalización

Aplicaciones móviles

Consultoría