¿Qué es y para qué sirve Open Graph?

Las redes sociales son las herramientas perfectas para conseguir aumentar el tráfico de un sitio web. Es por eso por lo que es importante tener presencia en ellas y trabajar ciertas etiquetas.

Aunque las herramientas SEO son popularmente conocidas, probablemente se escuche menos hablar sobre los elementos Open Graph, pues son aparentemente invisibles de cara al público, pero son esenciales para optimizar los resultados.

¿Qué son las herramientas Open Graph?

Cuando se crea una nueva página web es importante incluir una correcta descripción sobre el negocio, elegir las imágenes más acordes al contenido y que sean atractivas y acompañar cada publicación con los mejores hashtags.

No obstante, en el campo del marketing digital hay otros factores que influyen en el flujo de visitas a un sitio web.

Las etiquetas de código son una de ellas, pues permiten controlar cómo se ve una publicación cuando otros usuarios comparten un artículo de la página web en sus perfiles de redes sociales, como Facebook o Twitter.

Cuando una persona publica en Facebook una página, la plataforma muestra un título y una imagen referente a tu artículo. Si los elementos Open Graph (etiquetas og) no se trabajan mediante etiquetas, el título y la imagen que Facebook ofrece podrían no concordar con el contenido de la página web, lo que podría perjudicar gravemente al rendimiento y al porcentaje de clics (CTR) de los contenidos.

Esto ocurre porque Facebook no sabe interpretar cuál es el título del artículo, ni tampoco el propio contenido de lo que se está compartiendo ni la imagen principal de la página. Y esto se soluciona con etiquetas de código.

De hecho, los elementos visuales son un gancho clave para conseguir participación. Estudios demuestran que contribuyen a generar más likes, shares y comentarios. Los tweets que incluyen una imagen consiguen un 150 % más de retweets. Eso sí, la elección de la imagen debe ser premeditada, pues se tiene que elegir la que encaje a la perfección con el contenido y que, además, sea llamativa. Lo mejor es que no incluyan logotipos y que no sean un recorte de otra.

La mayor parte de la gente no cambia el contenido de un tweet o de una publicación cuando la comparte en redes sociales. En consecuencia, cada vez que se realice esa acción con las citadas etiquetas, el usuario estará dando voz a tu publicación original.

¡Ey! Vende millones de euros en internet con estos pasos... 👇👇👇

Enviando sabes que aceptas nuestra política de privacidad.

Cuando se comparte un artículo de una página web, el rastreador estudia el HTML del enlace, pero si no hay etiquetas de código en él, ofrecerá el contenido que a su parecer es más importante, lo que podría perjudicar a la viralización de las publicaciones. Títulos demasiado largos, descripciones predeterminadas, imágenes mal recortadas… Son ejemplos de cómo Facebook o Twitter muestran los contenidos compartidos en sus plataformas sin las etiquetas que comentamos en este artículo.

En consecuencia, la publicación podría no conseguir apenas engagement porque no llamaría la atención en el feed de los usuarios de redes sociales. Usando etiquetas de código, la información de un sitio web se vuelve más sencilla de encontrar, y el CTR aumentaría significativamente.

Es por eso por lo que las ventajas se establecen de forma indirecta: si nuestro contenido resulta más atractivo en el feed de un usuario, aumentarán las probabilidades de que este lo vea y lo comparta en sus redes sociales. En consecuencia, las publicaciones podrán generar conversiones, lo que nos llevará a un público dispuesto a compartir nuestros contenidos.

En definitiva, estas etiquetas nos ayudan a optimizar los recursos, ahorrar tiempo y favorecer la viralidad y la atracción de nuestros contenidos.

¿Cómo se usan estas etiquetas?

Esta serie de etiquetas se añaden al código de la página web en cuestión.

Son invisibles para el visitante, pero ayudan a las redes sociales como Twitter, Google+ o Facebook a analizar los contenidos e identificar los elementos principales del artículo para que, cuando se quiera compartir, aparezcan el título, la imagen y la descripción adecuados.

Para saber si el sitio web de un usuario está utilizando etiquetas de código, debe cargarse un artículo e inspeccionar el código fuente de la página. Después, hay que buscar y comprobar que pone “og:”. De no ser así, lo más recomendable es añadir estas etiquetas.

Tipos de etiquetas og para Facebook

Para indicar a Facebook o Twitter qué contenidos tienen que mostrar para cada artículo, existen metaetiquetas diferentes. Deberemos indicar el atributo property y con content introducir el valor. Las etiquetas básicas son las siguientes:

Og:title

Indica el título del artículo. No debe ser demasiado largo, pues los títulos más cortos tienen un mejor efecto. De hecho, debe contar con un máximo de 95 caracteres. Esto sucede porque los títulos que son excesivamente largos desenganchan al lector. Además, si preferimos evitar un salto de línea, es mejor quedarse en los 50 caracteres.

Por otra parte, debemos esforzarnos en conseguir un título llamativo que llegue al público objetivo de las redes sociales y así aumentar el CTR de los artículos compartidos. Los contenidos con un título en interrogante se comparten más que los que no se formulan con pregunta.

Cómo se vería en la práctica: <meta property=”og:title” content=”Titulo del artículo” />

Og:type

Indica el tipo contenido que se está compartiendo. Por ejemplo, si se trata de un artículo, de un vídeo o de una receta. Además, dependiendo del tipo se requerirán unas propiedades u otras.

😎 Por cierto, ¿Sabes que podemos posicionar tu web o tienda y atraer contactos? Click aquí para saber más >>

Cómo se vería en la práctica: <meta property=”og:type” content=”article” />

Og:image

Esta etiqueta sirve para especificar la URL de la imagen que se quiere utilizar. Es importante acompañar el contenido de una imagen. Esto hace que los artículos destaquen frente a las publicaciones que solo contienen texto.

Por otra parte, es igual de importante introducir las propiedades del tamaño de la imagen que queremos que se muestre, puesto que si queremos que aparezca, debemos especificar cómo para evitar recortes innecesarios.

Cómo se vería en la práctica: <meta property=”og:image” content=”http://www.tupaginaweb.com/wp-content/uploads/imagendestacada.jpg” />

<meta property=”og:image:width” content=”624″ /> <meta property=”og:image:height” content=”278″ />

Og:url

Esta etiqueta puede parecer irrelevante, pero también forma parte del marketing digital porque a veces un mismo contenido puede tener varias URL. De esta forma, debe utilizarse esta etiqueta para una URL que no contenga ningún ID o parámetro de sesión. Así garantizamos que todos los recursos compartidos pertenezcan a una URL en vez de mediante varias URL.

Cómo se vería en la práctica: <meta property=”og:url” content=”http://www.tupaginaweb.com/nombredelarticulo” />

Og:descripción

Por último, no debemos olvidarnos de incluir una buena descripción. Aunque no es esencial, esta etiqueta aporta a los usuarios de las redes sociales más información sobre nuestra página o artículo y aumentará el CTR. Lo más recomendable es describir el contenido en dos oraciones que aporten información relevante.

Cómo se vería en la práctica: <meta property=”og:description” content=”Do you want tons of traffic and links? All you’ve got to do is “create great content” – but for content to be great, it needs to stick.”/>

Metaetiquetas opcionales

Por otra parte, existen etiquetas de código opcionales de las que también podemos hacer uso y que facilitan aún más la configuración del contenido que se comparte. Son las siguentes:

– og:audio – Se trata de una URL de un archivo de audio que acompaña al contenido principal.

– og:video – Consiste en una URL que dirige a un video que acompaña al contenido principal.

– og:locale – Se trata de la configuración regional en la que están marcadas estas etiquetas. El valor predeterminado es en US (Estados Unidos).

– og:locale:alternate – Esta página está disponible en una variedad de otras configuraciones regionales.

– og:site_name – El nombre que debe mostrarse para todo el sitio si el contenido es parte de un sitio web más grande. Por ejemplo, “IMDb”.

Cómo añadir este código a tu página web

WordPress es una de las principales herramientas para la creación de páginas webs, por eso goza de gran popularidad. En WordPress no es necesario aplicar cambios directamente en el código para agregar las etiquetas og, ya que existen plugins que se encargan de llevar a cabo esta función automáticamente.

Por ejemplo, WordPress SEO by Yoast es uno de los plugins más conocidos para generar estas metaetiquetas.

Cuando hayamos añadido las etiquetas al código de nuestro sitio web, lo más recomendable es comprobar que todo funciona tal y como queríamos. Para ello, nos dirigiremos a la página de desarrolladores de Facebook que verifica las etiquetas og e introducermos una URL de un artículo de nuestra web.

A continuación, aparecerá la información que está leyendo Facebook y que mostrará cuando se comparta la publicación. Para hacer la prueba, es mejor hacerlo con un artículo nuevo, puesto que si una publicación ya había sido compartida con anterioridad, posiblemente la página muestre el contenido que tenga almacenado en caché.

Conclusión

En conclusión, las etiquetas Open Graph son tan importantes como el propio contenido que publicamos, por lo que trabajar en ellas es esencial. ¡Tratar de ponerlas en práctica para optimizar nuestro sitio web y que nuestras publicaciones se viralicen es un must!

¿Sabes que hacemos software cloud a medida?

➝ Click para saber más sobre software cloud a medida
0/5 (0 Reviews)

¡Envía a quien quieras!