Cómo utilizar las etiquetas Open Graph para mejorar la difusión en Redes Sociales

Después de la introducción a Open Graph que hicimos recientemente, vamos a profundizar un poco más en el uso de Open Graph desde un punto de vista práctico, destacando las buenas prácticas que nos permitirán sacarles el máximo partido y algunos recursos de cara a su uso principalmente en Facebook, aunque al ser un estándar se pueden aplicar fácilmente en otras Redes Sociales, como Twitter y Pinterest.

Uso de Open Graph para Facebook

Al utilizar Open Graph en Facebook conviene que tengamos en cuenta estos cuatro puntos:

  1. No podremos incorporar en el título marcas comerciales de terceros ni la URL de la página.
  2. La imagen deberá tener una resolución de un mínimo de 600 píxeles.
  3. En la descripción podemos poner datos relevantes y que animen a pinchar en el enlace.
  4. El enlace no deberá cambiar ni enviar parámetros que puedan modificarse con el tiempo.

Además de estas cuatro, que son las más importantes recomendaciones que debemos tener en cuenta, tenemos que ser lo más transparentes y claros posibles respecto al contenido que hay en la página. En este enlace del sitio para desarrolladores de Facebook podemos ver más consejos y buenas prácticas.

El depurador de etiquetas

La herramienta que podemos utilizar para sacarle más rendimiento a Open Graph es Open Graph Debugger, que permite analizar el código de la página y mostrar su contenido tal y como lo vería Facebook. Es tan sencillo como copiar el enlace que queremos depurar y pegarlo en el formulario que tiene la herramienta, a continuación, presionar el botón Depurar y Facebook nos mostrará un previo de cómo quedaría el enlace al ser compartido en nuestra Red Social.

Como ejemplo, veamos cómo el depurador muestra una vista previa con su imagen correspondiente.

Al actualizar las etiquetas y posteriormente al ejecutar el depurador, veremos que en ocasiones no nos actualiza la información. La razón es porque Facebook tiene su propia caché, que agiliza los recursos que comparten los usuarios y ahorran transferencia de datos. Si queremos resetear esa caché, podremos hacerlo desde Open Graph Debugger, dándole al botón Extraer de nuevo.

En el caso de querer aplicarlo en diferentes URL a la vez, debemos usar la pestaña que pone Invalidador de lote.

Podremos añadir hasta 50 URL separadas por comas y nos informará si existen errores en las etiquetas o si la página no ha sido nunca rastreada.

Si lo que deseamos es eliminar la caché, nuestra recomendación es hacerlo de uno en uno en todos los enlaces, accediendo al texto Ver detalles, y finalmente pulsando en el botón Volver a extraer. Esto eliminará la caché y volverá a extraer los datos de la página.

¿Y en otras Redes Sociales?

Open Graph se ha convertido en un estándar para incluir metadatos en diferentes Redes Sociales y aunque pertenecía casi en exclusiva para Facebook, otras como Twitter o Pinterest lo están usando. Algo que se agradecer para  no tener que llenar las cabecera con formatos diferentes de cada Red Social. No obstante, tienen algunas cosas específicas para cada una:

    • Por ejemplo, para Facebook contamos con la META del application id:
      <meta property="fb:app_id" content="928977633900253" />
    • Para Twitter, si queremos especificar qué modelo de tarjeta, podemos usar:
      <meta name="twitter:card" content="summary_large_image">

En la zona de desarrolladores de Twitter  encontrás más información sobre cómo utilizar Open Graph en esta Red Social.  Y también en su equivalente en Pinterest.