¿Qué es Open Graph?

Obtén más información sobre el protocolo Open Graph, que te permite presentar el contenido de un sitio web de forma atractiva y eficaz.

Al diseñar y lanzar un sitio web, el rendimiento y el éxito suelen depender del número de usuarios que seas capaz de atraer a tu sitio. Sin embargo, con cada vez más páginas que dependen de las redes sociales para impulsar el tráfico, es esencial presentar el contenido de forma atractiva e informativa.

Aquí es donde entra en juego Open Graph. Desarrollado por Facebook, este protocolo ayuda a tu sitio web a llegar a más clientes permitiéndote aprovechar el poder de los metadatos dentro de una página web para crear representaciones vívidas del contenido de una página.

Al utilizar Open Graph, tu sitio se vuelve más fácil de usar al permitir que tu contenido se comparta fácilmente en múltiples plataformas.

¿Qué es exactamente Open Graph y cómo puedes integrarlo en tu sitio web?

En este artículo, examinaremos más de cerca Open Graph, y te mostraremos cómo asegurarte de que tu sitio no sólo es fácil de usar, sino también escalable. Responderemos a muchas de las preguntas más frecuentes, como:

• ¿Qué es Open Graph?
• ¿Cómo funciona Open Graph para aumentar la participación?
• ¿Cuál es la mejor forma de integrar Open Graph?
• ¿Cuáles son algunos de los posibles escollos a la hora de ponerlo en marcha? Y, ¿cuáles son sus ventajas?

Cuando entiendas qué es Open Graph y cómo funciona, podrás utilizar esta información en tu beneficio.

Antes de entrar en las ventajas de utilizar Open Graph, veamos algunos antecedentes de Open Graph.

¿Qué es Open Graph?

La mayoría de la gente piensa en la funcionalidad y la facilidad de uso para los visitantes del sitio cuando diseña un sitio web. Durante el desarrollo, la mayoría de la gente se centra en crear un sitio estéticamente agradable y fácil de navegar.

Naturalmente, esto tiene sentido, ya que el objetivo es atraer más usuarios a tu sitio.

Pero hay otro grupo importante que hay que tener en cuenta al diseñar un sitio web: los motores de búsqueda. Los motores de búsqueda están programados para rastrear los sitios web y determinar la información relevante sobre el tema, incluidos los metadatos.

Los metadatos son información colocada en la cabecera de una página web que ayuda a los motores de búsqueda a comprender el sitio web. Con este conocimiento y otros factores importantes relacionados con el SEO, tu sitio puede ganar mayor visibilidad en las clasificaciones de los motores de búsqueda.

Una de las piezas de metadatos más potentes que tienes a tu disposición son los metadatos Open Graph.

‍

‍

‍

¿Cómo funciona Open Graph?

Los metadatos Open Graph son un conjunto de datos que ayudan a los motores de búsqueda y a los sitios web de redes sociales como Facebook, Twitter, Google+ y LinkedIn a comprender de qué trata tu página. El motor de búsqueda puede utilizar estos datos para incluir tu sitio en los resultados relevantes, lo que anima a los usuarios a visitar tu página. Esto significa más tráfico y mayor compromiso.

El protocolo Open Graph surgió de la necesidad de Facebook de disponer de una forma de proporcionar más información que las etiquetas HTML, como las metaetiquetas. Necesitaban poder saber quién utilizaba el sitio, a qué contenido accedía y cómo lo utilizaba.

El protocolo Open Graph ofrece una solución a este problema permitiendo que los sitios web sean más amigables socialmente. Lo hace mediante el uso de "historias" sobre tu sitio web. Una historia es una extensión de los metadatos que permite a tu sitio compartir información sobre el tipo de contenido que estás compartiendo, así como sobre quién lo está compartiendo.

La historia se envía a las redes sociales a través de una etiqueta de metadatos. Por ejemplo, cuando compartes un enlace en Facebook, ese enlace se analiza utilizando el protocolo Open Graph y luego se comparte con tus amigos sin necesidad de acceder realmente a la página web. En esencia, comparte los puntos principales de la página sin visitarla para ver de qué trata.

A su vez, esto te ayuda a posicionarte mejor en las redes sociales, ya que tu enlace se comparte con más frecuencia. Y cuanta más gente comparta un sitio, más popular se hará, lo que se traduce en un mejor posicionamiento en los motores de búsqueda.

¿Cuáles son las ventajas de Open Graph?

1. Clasificación superior

Dado que Facebook y Twitter se encuentran entre los principales sitios de redes sociales, hacer que tu enlace se comparta con más frecuencia puede aumentar tu clasificación en estos sitios.

Pero, en realidad, es Google quien más se beneficia de Open Graph, ya que Open Graph está diseñado para ofrecer contenido directamente a los resultados de búsqueda sin necesidad de visitar primero un sitio web. (Recuerda: a Google no le gusta enviar a los usuarios a otros sitios).

2. Más tráfico

Cuando tu enlace se comparte en las redes sociales, los usuarios pueden ver inmediatamente de qué se trata sin necesidad de visitar primero tu sitio web.

Esto hace más probable que lo compartan con sus amigos, aumentando el tráfico a tu sitio. Y cuantas más visitas recibas a través de las redes sociales, más exposición obtendrás.

3. Mejor compromiso

Cuanto más comparta un usuario un enlace, mejor para tu sitio, ya que lo difunde activamente y proporciona tráfico.

Cuantos más clics recibas de las redes sociales, más posibilidades tendrás de convertir a ese visitante en cliente. Aunque compartir tu enlace en Facebook no hace daño, compartirlo con tus amigos puede ayudar a tu sitio web en más de un sentido.

Cómo implementar los metadatos Open Graph

Open Graph se basa en cuatro etiquetas de metadatos principales, cada una de las cuales utiliza el apelativo "og":

og:title - un título corto que describe el tipo de contenido de la página. Por ejemplo, una crítica de cine o un libro en Amazon tendrían un og:title diferente al de una receta.

og:tipo - también llamado "tipo de historia". Indica si tu sitio promociona un artículo, un producto, un evento o una persona.

og:image - una imagen que representa el contenido. Normalmente es una imagen que utilizarías en tu artículo o en tu sitio web.

og:url - indica a los motores de búsqueda y a las redes sociales cuál es la página principal de tu sitio, en lugar de los enlaces externos.

Por ejemplo, si quisiera implementar el protocolo Open Graph para mi blog de cocina, incluir etiquetas de metadatos podría tener el siguiente aspecto:

<meta property="og:title" content="Top 10 Must-Try Classic Recipes">

<meta property="og:type" content="article">

<meta property="og:url" content="/top-10-recipes/">

<meta property="og:image" content="/my-favorites-from-my-cooking-blog.jpg">

<meta property="og:description" content="A collection of Top 10 recipes from my cooking blog so you can try them too.">

Cuanto más definidas sean las etiquetas, mejor funcionará tu sitio en las redes sociales. El resultado es una historia rica en datos sobre tu sitio web que tus visitantes pueden compartir y ver fácilmente.

¿Cómo puedes utilizar las metaetiquetas?

Hay varias formas diferentes en que los sitios web de redes sociales utilizan las etiquetas de metadatos del protocolo Open Graph para ayudar a aumentar el alcance de tu contenido. Todo empieza por incluir las etiquetas adecuadas en el backend de tu sitio.

Por ejemplo, la red social Twitter extraerá la etiqueta og: title para utilizarla como vista previa de tu contenido.

Del mismo modo, Facebook extraerá las etiquetas og :title y og:description para utilizarlas como vista previa de tu contenido en su sitio.

Estas son algunas de las formas en que las distintas plataformas de redes sociales utilizan las etiquetas de metadatos Open Graph:

1. Facebook

La carne y la patata de Internet, Facebook utiliza etiquetas de metadatos para extraer automáticamente información sobre el contenido que se comparte en tu sitio web.

Después de añadir el protocolo Open Graph, Facebook busca metaetiquetas específicas en tu página y muestra esa información a los usuarios en su feed de noticias mientras se desplazan.

2. Twitter

Cuando entras en Twitter mientras ves un enlace, automáticamente extraerá el protocolo Open Graph de tu sitio web y lo mostrará en su plataforma. Tu contenido tendrá un aspecto similar al normal, pero con más información sobre qué es la página, quién la escribió e imágenes sobre lo que intentas promocionar.

3. Pinterest

Pinterest utiliza metaetiquetas para ayudar a buscar entre los pines de un usuario, buscar pines con atributos similares y mostrar información enriquecida sobre tu sitio web. Cuando inicias sesión en Pinterest, cualquier pin que se cree o repinee automáticamente extraerá datos del protocolo Open Graph de tu sitio web.

4. LinkedIn

LinkedIn tiene en cuenta cuántas veces se ha visto tu contenido, así como quién lo compartió inicialmente y cuántas veces lo han compartido sus conexiones. Utilizar el protocolo Open Graph puede aumentar tus posibilidades de ser visto por un público más amplio en el sitio.

4. Pinterest

Fijar una imagen o un vídeo de una entrada de blog que enlace a tu sitio web es una forma estupenda de aumentar el tráfico. Esto es especialmente importante para los blogueros visuales que muestran recetas y tutoriales.

‍

‍

‍

‍

‍

Casos reales de uso de Open Graph

Cuando piensas en las metaetiquetas, es fácil imaginar todas las formas en que las plataformas de las redes sociales utilizarán este tipo de etiquetas. La forma más fácil de pensar en ellas es como una señal de punto de interés. Más concretamente, es como colocar vallas publicitarias y señales de tráfico para que la gente sepa cuál es tu sitio y qué deben buscar cuando lleguen.

Aquí tienes algunos ejemplos de usos de Open Graph que puedes añadir a tu sitio:

Vendedores de comercio electrónico:

Si quieres promocionar en tu sitio un producto que estás vendiendo activamente, es útil utilizar etiquetas Open Graph. Esto mostrará el precio de lo que estás intentando vender y permitirá a los visitantes saber dónde pueden ir si quieren hacer una compra.

Tutoriales del blog:

Para los blogueros que ofrecen tutoriales, tener acceso a los metadatos de Open Graph te permitirá promocionar la hora y la fecha en que se publicó el tutorial. Con esta información, los visitantes podrán encontrar lo que buscan sin tener que buscar en todo tu blog.

Pequeñas empresas:

Las etiquetas Open Graph son una forma excelente de que las pequeñas empresas añadan su logotipo y otra información útil a la vista previa del enlace que aparece en las redes sociales.

Utilizar el protocolo Open Graph te permitirá conseguir que más usuarios que comparten tus contenidos se interesen por saber más sobre ti y sobre cómo tus servicios pueden ayudarles.

Influenciadores:

Es habitual que los influencers incluyan su logotipo u otra información sobre sí mismos como etiquetas Open Graph.

Es una forma estupenda de ayudar a los usuarios a saber más sobre la persona que están viendo y, potencialmente, a seguirla en las redes sociales si ven algo relevante para sus intereses.

Conclusión

Utilizar el protocolo Open Graph para proporcionar metadatos detallados sobre el contenido de tu sitio web puede ayudar a aumentar las posibilidades de que tu contenido se comparta en las redes sociales.

También ayuda a los motores de búsqueda a encontrar tu contenido más fácilmente, lo que les permite indexarlo más a menudo. Utilizar etiquetas Open Graph en tu sitio web es una forma rápida y sencilla de ayudar a mejorar el éxito de cualquier entrada de blog.

Cuando aprendas a aprovechar el poder de tus metaetiquetas, podrás llegar a nuevos lectores y convertirlos en suscriptores con más eficacia que nunca. Para empezar, obtén más información sobre las distintas etiquetas Open Graph, ¡y empieza a implementarlas en tu sitio web hoy mismo!

‍