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í:

  <meta property="og:type" content="article" />
  <meta property="og:title" content="título del post o página" />
  <meta property="og:description" content="descripción del contenido" />
  <meta property="og:image" content="link a la imagen destacada" />
  <meta property="og:url" content="enlace permanente" />
  <meta property="og:site_name" content="nombre del sitio" />
  

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.

  <meta property="fb:admins"content="tupaginadeFacebook"/>

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:

  <meta name="twitter:title" content="título del post o página">
  <meta name="twitter:card" content="summary with large image">
  <meta name="twitter:description" content="descripción del contenido">
  <meta name="twitter:image" content="link a la imagen destacada">          
  <meta name="twitter:creator" content="tu mismo">
  

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