¿Qué es Open Graph?

The Open Graph Protocol, o “Open Graph” para abreviar, es un marcado estructural que puedes añadir a tus documentos HTML para explicar el contexto de tu contenido y tomar el control de los fragmentos que se muestran cuando tus URLs se comparten en redes sociales como Facebook, LinkedIn, Twitter, y Google+, y en apps como Slack.

Facebook Open Graph ilustrado

Aquí hay un ejemplo de cómo KLM ha tomado el control de lo que se muestra de su blog en Facebook utilizando Open Graph:

Facebook Open Graph example

¿Por qué deberías preocuparte por Open Graph?

Tener una imagen atractiva que llame la atención, y un buen título y descripción que invite a la gente a hacer clic en tu fragmento es clave cuando intentas aprovechar tu tráfico de redes sociales.

El marcado de Open Graph te permite tomar el control sobre el modo en que tus fragmentos se muestran en redes sociales.  En el SEO nos obsesiona optimizar nuestros títulos y meta descripciones para conseguir el mayor CTR posible, pero a menudo nos olvidamos de las redes sociales. Esto es una pena, ya que la batalla por la atención en las redes sociales es igual de intensa.

¿Mejora Open Graph mi posicionamiento?

No, Open Graph no mejora tu posicionamiento directamente. Sin embargo, creemos que Open Graph ayuda a motores de búsqueda a determinar el contexto de tu contenido, similar a  Schema.org. Por lo que, de alguna manera, Open Graph es beneficioso para tu rendimiento en el SEO.

Como indicamos en la sección previa, si quieres conseguir más tráfico desde redes sociales, es muy recomendable implementar Open Graph.

Después de todo, no te llevará mucho más tiempo rellenar también un título, descripción e imagen en Open Graph cuando estás trabajando con tu título y meta descripción.

¿Qué plataformas son compatibles con Open Graph?

La más obvia es Facebook, ya que fueron quienes desarrollaron Open Graph.

Open Graph también es compatible con al menos estas plataformas:

  • LinkedIn
  • Google+
  • Slack
  • Twitter

Recuerda que Twitter ha desarrollado su propia versión, llamada "Twitter Cards". Pero no si hay Twitter Cards disponibles, utilizan Open Graph para generar fragmentos para URLs.

¿Cómo implementar Open Graph?

La implementación de Open Graph se lleva acabo añadiendo el marcado de Open Graph en tus documentos HTML, en la sección de<cabecera>de tus páginas. Puedes hacerlo manualmente, o si tu sitio web utiliza un CMS, es probable que disponga de herramientas o plugins disponibles para esto. Si no, habla con tus programadores. Es muy fácil configurar una función para esto.

Hay cuatro propiedades necesarias para Open Graph:

  1. og:url
  2. og:title
  3. og:description
  4. og:image

Además hay otras dos propiedades recomendadas, que utilizamos para proporcionar más contexto sobre el contenido:

  1. og:type
  2. og:locale

Veámos un ejemplo de Open Graph

Nuestro artículo de Schema.org se ve así cuando es compartido en Facebook:

Open graph on Facebook - snippet example

Cuando quitamos el código fuente, la implementación de Open Graph se ve así:

Open Graph code snippet

og:locale

La propiedad og:locale describe el lugar al que se dirige la página. En este caso es el valor predeterminado,en_US. Se podría decir que  og:locale tiene una función similar al atributo hreflang en el SEO: dirigirse a un público determinado.

Si tienes el contenido disponible para otras localidades, puedes establecer versiones alternativas utilizando og:locale:alternate.

Ejemplo de un fragmento de código
<meta property="og:locale" content="en_US" />

Requisitos
El valor que se utiliza consiste en un  código de idioma de dos letras, una barra baja, y luego un código de país de dos letras.

¿Qué pasa si no lo defines?
Si el og:locale no está completado o definido, se utilizará el preterminado en_US.

Más información acerca de og:locale
Documentación de Facebook para los desarrolladores.

og:type

La propiedad og:type describe el tipo de contenido, en este caso article. Esta etiqueta influye en cómo se muestra tu página en Facebook. Hay muchos tipos de entre los que elegir, por ejemplo: product, book, place, profile, y video.movie. Elog:typees comparable a los tipos de Schema.

Ejemplo de código de fragmento 
<meta property="og:type" content="article" />

Requisitos
Solo se puede definir un tipo por página.

¿Qué ocurre si no lo defines?
Si no defines el og:type, se establece websitecomo predeterminado.

Más información acerca de on og:types
Documentación de Facebook para desarrolladores.

og:tit

La propiedad og:title significa Open Graph title, que establece el título de una página. El og:titlees similar a la etiqueta <title>  en el SEO.

Ejemplo de código de fragmento 
<meta property="og:title" content="Datos estructurados con Schema.org: la guía definitiva" />

Requisitos
El título de deberá incluir ninguna marca. Deberá describir el título de tu contenido. Además, recuerda lo siguiente cuando optimices tu fragmento enriquecido para Facebook:

  • Tu título no cabrá en una sola línea si ocupa más de 55–60 caracteres.
  • Tuog:descriptionno se mostrará si tu título está dividido en dos líneas.

¿Qué ocurre si no lo defines?
Las plataformas de redes sociales utilizarán tu etiqueta de  <title>en tu twitter:title como alternativa.

og:description

El og:description significa descripción Open Graph. Es una descripción corta sobre el tema de la página.

Ejemplo de código de fragmento
<meta property="og:description" content="¡Consigue más clics y sobrepasa a la competencia con Schema.org!" />

Requisitos
Cuando optimices tus fragmentos para Facebook, recuerda que la descripción no caberá en una sola línea si tiene más de 55–60 caracteres.

¿Qué pasa si no lo defines?
Las plataformas de redes sociales utilizarán tu meta descripcióno tu twitter:description como alternativa.

og:url

La propiedadog:urldescribe la versión canónica de la URL, es decir, la versión sin parámetros.

Ejemplo de código de fragmento:
<meta property="og:url" content="/academia/schema-org-introduccion/" />

Requisitos
Es esencial que definas la versión canónica de tu URL aquí, ya que los Me gusta y Compartir se atribuyen a esta versión en lugar de a la canónica.

¿Qué pasa si no lo defines?
Tu implementación de Open Graph no pasará la validación, ya que se necesita esta propiedad.

og:site_name

La propiedadog:site_name describe el nombre del sitio web , pero ya no es una propiedad compatible.

Ejemplo de código de fragmento 
<meta property="og:site_name" content=Auditoría SEO y seguimiento de contenido a tiempo real" />

article:section

La propiedad article:section es una propiedad deog:type, qué describe a qué parte de tu sitio web pertenece la página. En nuestro caso, el  article:sectiones la categoría donde se encuentran nuestros artículos de Academia.

Ejemplo de código de fragento:
<meta property="article:section" content="Datos estructurados" />

Requisitos
Ninguno.

¿Qué pasa si no lo defines?
Las plataformas de redes sociales no serán capaces de entender a qué sección de tu sitio web pertenece la página.

Más información acerca de article:section
Documentación de Facebook para desarrolladores.

og:image

La propiedad og:image define la imagen que se debería mostrar en tu fragmento. Ten cuidado a la hora de elegir las imágenes porque el tamaño, la calidad y las dimensiones son importantes.

Ejemplo de código de fragmento:

<meta property="og:image" content="https://www.contentkingapp.com/wp-content/uploads/2018/06/Cont[email protected]" />

Requisitos
Cuando se trata de og:image, ten en cuenta los siguientes requisitos:

  • Si quieres mostrar una imagen de gran tamaño en tu fragmento, asegúrate de que tiene al menos 600 x 315 píxeles, pero preferiblemente entre 1,200 y 630 píxeles para pantallas con una gran densidad de píxeles (como las pantallas de Apple Retina).
  • Si defines una imagen menor que 600 x 315, en tu fragmento también aparecerá una imagen más pequeña.
  • El tamaño mínimo absoluto es de 200 x 200 píxeles. Imágenes más pequeñas no pasarán la validación.
  • El tamaño máximo de archivo soportado es de 8 MB por imagen.
  • Para asegurarte de que tu imagen no será recortada, cíñete a un ratio de 1.91:1.

¿Qué pasa si no lo defines?
Tu implementación de Open Graph no será validada, y las plataformas de redes sociales buscarán una imagen para mostrar en tu página. Es muy probable que esto no quede...bonito, ya que hemos visto que hay una requisitos muy estrictos para las imagen.

Campos extra alternativos og:image
Hay campos adicionales y opcionales para og:image que pueden proporcionar más información acerca de la imagen:

  • og:image:url:como alternativa a og:image
  • og:image:widthy og:image:height: especifica las dimensiones de la imagen, lo que permite que se cargue correctamente cuando es compartida por primera vez.
  • og:image:type: te permite definir el tipo de imagen. Valores soportados:
    • image/jpeg
    • image/gif
    • image/png

og:image:secure_url

El og:image:secure_url define la versión HTTPS de og:image.

Ejemplo de código de fragmeto:

<meta property="og:image:secure_url" content="https://www.contentkingapp.com/wp-content/uploads/2018/06/[email protected]" />

Requisitos
La URL de la imagen tiene que mostrarse en HTTPS.

¿Qué pasa si no lo defines?
No está claro qué pasa en este caso.

Otras propiedades de Open Graph

Hay muchas más propiedades de Open Graph disponibles. A continuación algunas de las que merece la pena mencionar:

Valida tu implemetación de Open Graph con un checker

Puedes utilizar Facebook’s Open Graph debugger para validar tu implementación de Open Graph.

Sin embargo, esta herramienta solo te permite comprobar las URL una por una, por lo que merece la pena tener un herramienta que te permita analizar un gran número de páginas a la vez. Aquí es donde ContentKing entra en juego: te permite revisar tu implementación de Open Graph en toda tu web, y en tiempo real:

Contentking - issues open graph

Las mejores prácticas para Open Graph

Recuerda las siguiente prácticas cuando trabajes con Open Graph:

  1. Asegúrate de definir al menos todas las propiedades requeridas en Open Graph, e idealmente también las recomendadas.
  2. Mantén tu og:title por debajo de 55–60 caracteres.
  3. Mantén tu og:description por debajo de 60–65 caracteres.
  4. Paraog:image, utiliza imágenes de buena calidad con unas dimensiones de al menos 1,200 x 630 píxeles, a la vez que mantienes el tamaño del archivo por debajo de los 8 MB.
  5. Cuando prepares el marcado de Open Graph para una página, siempre pásalo por  the Open Graph debugger para ver una vista previa de tu fragmento, y para asegurarte de que toda la información ha sido cumplimentada.  Otra ventaja adicional es que podrás utilizar pre-cache en tu fragmento, de forma que ya se mostrará correctamente la primera vez que sea compartido..
  6. Si has cometido algún error, lo has corregido, y quieres que Facebook genere un nuevo fragmento: dirígete a Open Graph debugger y haz clic en “Fetch new scrape information”. Esto refrescará el caché. Sin embargo, no actualizará la imagen de forma automática, para esto necesitarás definir una nueva og:image y entonces solicitar “Fetch new scrape information.”
  7. Utiliza og:image:width y og:image:height para permitir a Facebook, etc. cargar la imagen correctamente una vez haya sido compartida por primera vez.

Comenzar tus 14 días de prueba gratuita

Comience en tan solo 20 segundos

Ponga un nombre de dominio válido, por favor (www.ejemplo.es).
  • No se requiere ninguna tarjeta de crêdito
  • No hay que instalar nada
  • Sin compromiso