Todo el mundo quiere crear contenido que destaque, fomente el reconocimiento de marca y sea fácil de compartir en el mundo del marketing online.
Las etiquetas Open Graph son una forma de conseguir más visitas en las redes sociales, ya que determinan cómo aparecen las vistas previas de tus enlaces en las redes sociales. Cuando alguien comparta un enlace de tu web, verá las partes más importantes de tu página en la vista previa.
¿Qué son las etiquetas Open Graph?
En 2010, Facebook introdujo las metaetiquetas Open Graph para facilitar que se compartieran webs en la plataforma. Desde entonces, Twitter y LinkedIn las han adoptado para mejorar la experiencia de usuario.
Cuando pegas una URL en Facebook, es probable que veas una vista previa del enlace. Antes de las metaetiquetas Open Graph, no tenías control sobre cómo aparecían tus enlaces y a menudo Facebook mostraba el contenido incorrectamente.
El protocolo Open Graph ayuda a los usuarios a optimizar la vista previa de sus enlaces en las redes sociales, para que puedan mostrar siempre la información más relevante.
En las siguientes imágenes, te mostramos un ejemplo de metaetiquetas incluidas en el código de una página. Cuando alguien publica la URL de esta web en Facebook, vemos una vista previa editada del enlace:
¿Por qué son importantes las etiquetas Open Graph?
Las redes sociales son una fuente constante de tráfico y conversiones. Con la combinación adecuada de estrategia y diseño, puedes convencer a los usuarios para que hagan clic y consigan más información sobre tu marca, compren tus productos y mucho más.
Las metaetiquetas Open Graph mejoran la vista previa de los enlaces de tus páginas de forma que atraigan la atención de tu público. Este es el aspecto de un enlace sin protocolo Open Graph en Facebook:
Vamos a ver ahora la vista previa de un enlace con Open Graph. Como puedes ver, la imagen aparece más grande, el titular en negrita y la URL, simplificada.
Cómo utilizar Open Graph
Facebook enumera 17 etiquetas Open Graph en su documentación oficial, pero solo cuatro son necesarias para que la red social entienda tus páginas. Coloca las etiquetas en el <head> de tu web.
Las cuatro etiquetas más importantes son:
- OG: title para el título del artículo.
<meta property="og:title" content="Open Graph: Create Eye-Catching Social Media Snippets" />- OG: type para indicar el tipo de objeto que estás subiendo (artículo, vídeo, etc.).
<meta property="og:type" content="article" /> - OG: image para la URL de la imagen principal.
<meta property="og:image" content="https://static.semrush.com/cdn-cgi/image/width=1010/blog/uploads/media/00/7c/007.png/>- OG: URL para indicar la URL real en la que el usuario hará clic.
<meta property="og:url" content="https://semrush.com"/>Puedes utilizar otras etiquetas OG, como
OG: audio (conecta un archivo de audio a tu entrada).
OG: description (añade una breve descripción).
OG: determiner (indica la palabra que aparece antes del título en una frase).
OG: site-name (indica el sitio del que procede el objeto).
Otros tipos de Open Graph
Twitter Cards
Las Twitter Cards funcionan de forma similar a las etiquetas Open Graph, ya que puedes personalizar cómo aparecerá la vista previa de tu enlace en los tuits. Cuando pegues una URL en el cuadro de entrada de Twitter, generará automáticamente un título y una imagen principal:
Puedes seguir utilizando etiquetas Open Graph con Twitter; la plataforma solo implementa su propio sistema de etiquetas antes que Open Graph.
Sin embargo, las Twitter Cards tienen un requisito: las imágenes deben tener un tamaño de 1.024 píxeles por 512. Puedes comprobar el aspecto de tu Twitter Card con su validador de tarjetas.
Analiza el estado de tus etiquetas Open Graph
Puede serte útil revisar la implementación de Open Graph para asegurarte de que funciona. Para ello, puedes utilizar varios recursos, entre los que destacan:
Herramienta Auditoría del sitio
La herramienta Auditoría del sitio incluye más de 120 comprobaciones técnicas de SEO on-page para cada sección de tu web. Una de estas comprobaciones te indica cuántas de tus páginas auditadas tienen protocolo Open Graph.
Para empezar a utilizar la herramienta Auditoría del sitio:
- Accede a la herramienta Auditoría del sitio desde el panel de control de tu proyecto. (Si no tienes un proyecto configurado, tendrás que crearlo primero).
- Configura los ajustes de la auditoría. Puedes definir el ámbito de rastreo de la auditoría e incluir las páginas que deseas excluir. Selecciona Iniciar auditoría del sitio.
- Una vez finalizada la auditoría, utiliza el informe Marcado en la pestaña Visión general para ver cuántas páginas cuentan con el marcado Open Graph:
En el ejemplo anterior, vemos que el 99 % de las páginas tiene algún marcado. Si tu resultado es bajo, puede que merezca la pena que te plantees añadir el marcado Open Graph a tus páginas más relevantes.
Depurador de contenido compartido de Facebook
Dado que Facebook utiliza el protocolo Open Graph para determinar qué mostrar, tiene una herramienta de depuración para probar tu código Open Graph. Para utilizar la herramienta:
- Dirígete al Depurador de contenido compartido de Facebook.
- Introduce la URL de la página que quieras analizar.
- Selecciona Depurar.
Si hay algún problema con tu enlace, la herramienta devuelve un mensaje de advertencia:
Otras formas de comprobar los datos estructurados
- Validador de Twitter Cards
- Post Inspector de LinkedIn
- Prueba de resultados enriquecidos de Google
- OpenGraph para Ruby
- OpendGraph para Java
Conclusiones principales
Añadir Open Graph es una tarea sencilla que puede aportar resultados notables a tus campañas de marketing. La visualización de tu contenido en las redes sociales puede atraer a más usuarios y, finalmente, convertirlos en ventas.
Si eres nuevo trabajando con código Open Graph, hay muchas herramientas que te ayudarán a comprobar si tu implementación funciona. Prueba una herramienta de auditoría del sitio o cualquier otra funcionalidad que te ayude a revisar tus datos estructurados.