Cómo optimizar los medios sociales con el protocolo Open Graph de Facebook

  1. Medios de comunicación social
  2. Diseño de redes sociales
  3. Cómo optimizar los medios sociales con el protocolo Open Graph de Facebook

Libro Relacionado

Por Ric Shreves, Michelle Krasniak

Facebook es el sitio de medios sociales líder en el mundo. Si desea optimizar los medios sociales, necesitará conocer el protocolo Open Graph de Facebook. El protocolo Open Graph es un estándar de marcado semántico introducido por Facebook en 2010 y ahora ampliamente aceptado. Algunas personas consideran que Open Graph compite con Schema.org, pero en realidad, los dos estándares son complementarios.

Es posible implementar tanto los microdatos de Schema.org como la marcación de Open Graph. Los estándares no entran en conflicto.

Ambos estándares tienen el mismo objetivo: describir mejor la información en una página web. Las diferencias clave se pueden resumir de esta manera:

  • Los metadatos de Open Graph describen la página como un todo.
  • Los microformatos de Schema.org describen elementos específicos de la página.

Open Graph markup contiene menos información que los microdatos de Schema.org, pero es más fácil de implementar. Para que su página web sea compatible con Open Graph, necesita añadir metadatos básicos a su página. Al igual que los metadatos tradicionales, los metadatos de Open Graph van en laetiqueta de la página web.

En el lenguaje Open Graph, una página web es un objeto Open Graph.

Open Graph tiene cuatro propiedades obligatorias:

  • og:título: El título de la página tal y como desea que aparezca en cualquier sistema que lea los datos de Open Graph, es mejor mantener la etiqueta de título con menos de 88 caracteres. Aunque puedes añadir más caracteres, Facebook sólo muestra los primeros 88.
  • og:tipo: El tipo de su objeto. Los tipos están especificados por el protocolo y son bastante numerosos. type es una propiedad interesante, ya que controla dónde aparece la parte en los intereses del usuario en Facebook. Si, por ejemplo, configura el tipo de objeto en «película» y el usuario comparte el objeto, la acción aparece como uno de los intereses del usuario debajo del título Películas en el perfil de Facebook de la persona.
  • og:imagen: La URL de la imagen que desea representar la página.image es una etiqueta importante, porque una buena imagen puede ayudar a que su contenido se extienda. Utiliza esta etiqueta para controlar lo que aparece cuando se comparte el contenido y asegúrate de que está optimizado para que encaje bien en Facebook. (Una relación de 1,9:1 es la mejor, pero manténgala por encima de 400 × 209 píxeles.) No deje esta etiqueta en blanco. Si lo haces, Facebook simplemente sacará alguna otra imagen de la página, lo que posiblemente conduzca a resultados inapropiados.
  • og:url: La URL de la página. El contenido de la etiqueta url determina a dónde va el usuario cuando hace clic en el botón Compartir.

Algunos de los elementos requeridos tienen atributos opcionales adicionales, y puede proporcionar múltiples valores para algunos de ellos si lo desea.

Las opciones incluyen

  • og:audio: Si desea que un archivo de audio acompañe al objeto, utilice esta etiqueta y especifique la URL del archivo.
  • og:descripción: Usa esta etiqueta para proporcionar una descripción de una o dos frases del objeto. Facebook muestra sólo los primeros 300 caracteres de tu descripción.
  • og:determiner: Esta etiqueta le permite especificar la palabra que precede al título del objeto en una oración – típicamente, a, an, o the.
  • og:locale: Esta etiqueta especifica el idioma de la página, es decir, el idioma de la página. Si su contenido está en inglés americano, por ejemplo, el valor de esta etiqueta sería en_us.
  • og:locale:alternativo: Si la página se ofrece en varios idiomas, puede listarlos todos usando esta etiqueta.
  • og:nombre_del_sitio: Si la página web forma parte de un sitio más grande que tiene un nombre diferente, utilice esta etiqueta para especificar el nombre del sitio.
  • og:video: Si tiene un archivo de vídeo que incluir, utilice esta etiqueta para especificar la URL del archivo.

El uso de las etiquetas es más fácil de entender con un ejemplo. En el siguiente ejemplo, puede ver cómo puede implementar la marcación de gráfico abierto para una página web sobre un libro titulado HowTo: WordPress 4:

<Propiedad meta="og:title" content="HowTo: WordPress 4"><meta property="og:type" content="book"><meta property="og:url" content="http://wordpresshowtobook.com"><meta property="og:image" content="http://wordpresshowtobook.com/ photo-200x300.png"><meta property="og:locale" content="en_us"><meta property="og:description" content="Aprende a usar WordPress con este práctico libro lleno de tutoriales de WordPress y soluciones a los problemas más comunes de WordPress CMS. Escrito por Ric Shreves y publicado por water&stone digital. Disponible ahora en Amazon.com, Google Play Store y en este sitio web. Publicado en las versiones ePub, Mobi y PDF."><meta property="og:site_name" content="WordPress How To Book">

Sus etiquetas Open Graph van en laetiqueta de la página. Tenga en cuenta que si está utilizando un sistema de gestión de contenido popular (como WordPress, Joomla! o Drupal), los plug-ins se encargarán de esta tarea por usted para que no tenga que escribir ningún código.

El resultado de implementar los metadatos de Open Graph es controlar lo que se muestra cuando alguien comparte el contenido de la página web. Si alguien comparte la página con el marcado mostrado en el código anterior, esto es lo que parece.

Ejemplo de salida para compartir en Facebook.

Si no estás seguro de haber hecho una de las marcas de Open Graph correctamente, pruébala con el práctico Open Graph Debugger de Facebook.

Aunque los metadatos de Open Graph son clave para el éxito de su contenido en Facebook, también son utilizados por otros sitios sociales importantes, como Twitter, Pinterest, LinkedIn y Google+.

¿Funciona el marcado de Open Graph? Desde luego que sí! El sitio de libros electrónicos Kobo afirma haber logrado un aumento del 50 por ciento en el tráfico de Facebook después de implementar las etiquetas Open Graph.

2

No Responses

Write a response