¿Sabes que es Open Graph? Básicamente se trata de una serie de etiquetas META que permiten especificar una amplia cantidad de datos destacables, como pudiera ser el título, descripción, imágenes, vídeos, etc., de una página web. Esta información es usada por Facebook y otras redes sociales para presentar un recurso de tu web al momento de que es compartido.
Gracias a este protocolo ayudamos a los distintos sitios de redes sociales a clasificar mejor nuestro contenido, ayudando a mejorar el proceso de compartir.
En sí, Open Graph es un protocolo que indica qué tipos de metainformación se puede especificar sobre un sitio web. Fue desarrollado por Facebook alrededor del 2010 y ha venido evolucionando como un estándar que define datos relevantes de las páginas usadas hoy por las diferentes redes sociales para identificar el contenido.
Cuando compartimos un contenido en Facebook, le damos un “me gusta” o tuiteamos un enlace en Twitter, las redes sociales usan estas metaetiquetas para sacar información básica como:
- Título del recurso compartido
- Imagen principal o imágenes destacadas
- Qué tipo de recurso es (artículo, imagen, vídeo, etc.)
- La URL donde se puede encontrar esta información.
Pero también se puede incluir información menos relevante como:
- Un archivo de vídeo relacionado con el recurso, la URL de un vídeo
- Un archivo de audio que acompañe esta información
- El idioma y región del recurso, por ejemplo es_ES.
- La descripción del contenido.
- El nombre del sitio web
Cómo es una etiqueta de Open Graph
Las metaetiquetas de Open Graph son como cualquier otra metaetiqueta que hayas venido usando. Aquí, sólo tienes que indicar en el atributo “property” el tipo de metadato que estás definiendo y en el atributo “content” el valor. En el siguiente ejemplo se muestra una etiqueta de Open Graph para definir el título de una página:
<meta property=”og:title” content=”Página que usa Open Graph” />
Todas las etiquetas de Open Graph tienen su atributo “property” similar, usando el prefijo “og:”, seguido del tipo de metadato que se va a definir: “og:title”, “og:image”, etc.
La información completa de Open Graph y todos los tipos de metadatos que incluye, los puedes consultar en su página web: http://ogp.me/
Qué utilidad representa usar Open Graph
Al usar Open Graph en nuestra página web le estamos ayudando a la red social a identificar de una mejor forma el recurso de nuestra web que está siendo compartido. Por ejemplo, con esta información, Facebook podrá saber qué imagen debe acompañar a la hora de compartir un recurso, cuál es la URL donde se encuentra la información completa, qué título usar a la hora de compartir, etc.
Nunca está de más ponerlas en nuestra página web y de esta manera aseguramos que nuestro contenido se va a compartir de la mejor forma.
Open Graph en Facebook
Usar Open Graph para Facebook es igual de sencillo que para cualquier otra red social, pero con una información adicional propia de Facebook y que no pertenece al protocolo estándar de Open Graph.
En el siguiente ejemplo te mostramos una serie de metaetiquetas de Open Graph para un sitio web que ofrece cursos avanzados de informática:
<meta property=”og:type” content=”website” /><meta property=”og:title” content=”Curso Avanzado de Python” /><meta property=”og:description” content=”Curso Avanzado de Python. Uso avanzado de Python para un dominio eficiente y organizado del lenguaje.” /><meta property=”og:image” content=”http://eit.local.com/uploads/python-avanzado-10.jpg” /><meta property=”og:image:width” content=”828″ /><meta property=”og:image:height” content=”450″ /><meta property=”og:url” content=”https://escuela.it/cursos/curso-avanzado-python” /><meta property=”og:site_name” content=”EscuelaIT” /><meta property=”fb:app_id” content=”928977633900253″ />
Si te fijas, todos los datos de las metaetiquetas tienen el mismo formato que comienza con “og:”, menos el último, que es “fb:app:id” el cual es el identificador de la aplicación de Facebook que tenga este sitio web. Facebook solicita colocar este dato, por lo que, aunque no necesites una app de Facebook, deberás crearla para que las etiquetas validen perfectamente en la red social.
También, no debes olvidar incluir las propiedades de tamaño de la imagen:
<meta property=”og:image:width” content=”828″ /><meta property=”og:image:height” content=”450″ />
Y aunque sólo las necesitas cuando tienes una imagen, te servirán para que Facebook procese más rápidamente la imagen de tu sitio web en los “compartir”.
Leer también: Borra la memoria caché de Facebook, si tus publicaciones no se visualizan bien
Buenas prácticas de Open Graph para Facebook
Facebook ofrece una guía de buenas prácticas de Open Graph para poder compartir recursos de tu sitio web de la mejor forma en https://developers.facebook.com/docs/sharing/best-practices/ y hacer que la experiencia de tus usuarios y seguidores en Facebook sea óptima.
Entre las más importantes tenemos:
- El título no debe incluir marcas comerciales ni datos irrelevantes
- La URL no debe cambiar y no debe enviar parámetros que puedan cambiar con el tiempo.
- La descripción puede ser más completa y debe ofrecer datos relevantes que animen a hacer clic.
- Las imágenes deben tener una resolución mínima de 600 píxeles, no ser siempre la misma y estar optimizadas.
- Los creadores de contenido deberán activar el “Seguir”
Leer también: Nuevo algoritmo de Facebook: 5 maneras de vencerlo
Y ya sea que tu contenido vaya a publicarse en una red social o en un sitio web usa Spidwit que te nutrirá de ideas nuevas y relevantes por medio de su contenido en el cual encontrarás artículos, imágenes y citas, agrupadas por sector y así ofrecer un contenido original y novedoso a tus usuarios.
Autore: spidwitblog
La redazione di Spidwit ti informa sulle ultime novità su social media e mondo digital.
Spidwit è uno strumento per scoprire, creare e pubblicare contenuti di qualità per le pagine social di aziende, professionisti e portali.
