Hoy en día es muy común compartir información de un sitio web, aplicación, o inclusive una actividad a través de tu red social de preferencia. Ya sea a Facebook, Twitter o LinkedIn; compartir artículos, canciones, vídeos o cualquier contenido digital es parte de nuestra vida cotidiana y necesario para aumentar trafico de forma orgánica. Pero ¿cómo hacen las redes sociales para detectar qué exactamente es el contenido digital que está siendo compartido? Utilizan el protocolo Open Graph para esto.
En esta lectura, repasaremos qué es el protocolo Open Graph, para qué sirve, y por qué es recomendado incluirlo en tu sitio web.
¿Qué es Open Graph?
Open Graph es un protocolo desarrollado por Facebook en el año 2010 para mejorar la integración entre sitios web y Facebook. Como menciona el sitio propio de Open Graph, el protocolo permite a sitios web ser rich objects en un grafo social. Relacionado a inteligencia artificial, rich objects son objetos que no pueden ser descritos o representados completamente, pero sobre el cual se pueden hacer afirmaciones.
¿Qué significa todo esto? El protocolo Open Graph ayuda a redes sociales como Facebook (y hoy en día a Twitter, LinkedIn y hasta WhatsApp) a desplegar contenido compartido como objetos fáciles de interpretar y desplegar para estas plataformas. En esencia, le estas dando a tu sitio web especificaciones que son detectadas primordialmente por las redes sociales y utilizadas al momento de publicar o compartir links o URLs.
¿Cómo funciona Open Graph?
Muy sencillo, en esencia lo único que tienes que hacer es asegurar que se incluya metadata básica en el código de tu sitio. Son líneas de código con el tag <meta> que se deben incluir dentro del <head> de tu sitio web. No te preocupes, si tu sitio esta construido en un CMS como WordPress, puedes utilizar un plugin para ayudarte a añadir estos tags de forma más sencilla sin tocar código.
Las cuatro propiedades requeridas para volver tu sitio en un rich object son:
- og:title – El título de tu sitio web.
- og:type – El tipo de objeto, ej.: sitio web, música, video, etc.
- og:image – El URL de una imagen que debería representar tu sitio web.
- og:url – El URL que identifica dicho objeto.
Para mostrarles un ejemplo puntual, el siguiente es el código Open Graph del sitio de BlueTide:
<!-- OpenGraph --> <meta property="og:url" content="https://bluetide.dev/"/> <meta property="og:title" content="Desarrollo y Diseño Web Panamá | BlueTide Web Consulting"/> <meta property="og:image" content="https://bluetide.dev/assets/img/socialmedia.jpg"/> <meta property="og:description" content="Servicios de desarrollo y diseño de páginas web en HTML5, WordPress, e E-Commerce. Servicios de SEO, Google AdWords, y licencias G Suite. Ubicados en Panamá. "/> <meta property="og:type" content="website"/>
Como pueden ver, tenemos una imagen dedicada para Open Graph exclusivamente también.
Si deseas más información, recomendamos que revises el sitio oficial de Open Graph.
¿Por qué incluir Open Graph en tu sitio web?
Al momento desarrollar un sitio web, es importante tener bien definido la estrategia del sitio. ¿Deseas vender, capturar leads, aumentar presencia de tu marca? Es muy probable que si uno de estos es tu objetivo, tendrás una estrategia similar: compartir contenido. Compartiendo contenido, ya sea publicaciones de un blog, vídeos, o hasta el home page de un sitio web sigue siendo una de las formas más efectivas de aumentar el trafico orgánico y relevante de tu sitio web. El protocolo Open Graph asegura que al momento de compartir un link en una red social, se despliegue el título, descripción, URL y hasta la imagen que tú definas que sea más relevante para describir o el link compartido.
Seguro has notado que cuando compartes el link de ciertos sitios web ó links de videos de YouTube en una red social, se despliega un objeto con una imagen llamativa. ¡Esto es Open Graph en acción!
Es la diferencia entre compartir un link en Facebook así:
A compartir un sitio así:
De igual forma, es la diferencia entre compartir un video por WhatsApp así:
A compartir un video así:
¿Cuál te llama más la atención?
Open Graph no solo hace que tus links se conviertan más atractivos al momento de compartir, sino que despliega la información más importante y relevante para el usuario que este por acceder a dicho link. Un usuario puede entender rápidamente de qué trata un sitio web, articulo, o video antes de hacer click en el link. Esto no solo ayuda a filtrar los usuarios que muestren interés verdadero en acceder a un link, sino que también hace que tu contenido sea universalmente entendido por multiples plataformas.
En BlueTide nos aseguramos incluir el protocolo Open Graph en todos los sitios que desarrollamos. Somos creyentes en la importancia de ser éticos y transparentes al momento de compartir información y Open Graph ayuda a darle un «pantallazo» general a usuarios antes de tener que ingresar a un link compartido.
Y sí, «Africa» por Toto es la mejor canción del mundo sin duda alguna.
