¡Hola y hola querido lector! Ya estoy de nuevo por aquí una semana más para hablarte sobre las meta etiquetas Open Graph.
¿Qué no te suenan de nada?
Pues tranquil@ querido lector, ya que en el post de hoy te voy a enseñar todo sobre este protocolo que te ayudará, entre otras cosas, a mejorar tu presencia en redes sociales y a tu SEO de forma indirecta.
¡Al lío!
¿Qué es Open Graph? Definición y significado
Open Graph (también escrito opengraph o abreviado como meta og) es un protocolo desarrollado inicialmente por Facebook que permite a cualquier página web controlar cómo se muestra su contenido cuando es compartido en redes sociales: qué título aparece, qué imagen se muestra y qué descripción acompaña al enlace.
El significado de Open Graph hace referencia precisamente a eso: «abrir el grafo» de información de una página web para que las plataformas sociales puedan leerla e interpretarla de forma estructurada.
Antes de su aparición, cuando enlazabas un artículo desde una red social, esta cogía un título, una descripción e imagen aleatoria a su antojo. Tras la aparición del Open Graph Protocol fue el propio webmaster quien empezó a controlar qué título, descripción e imagen se mostraba en el feed de cada red social.
Hoy en día, todas las grandes redes sociales (Facebook, Instagram, LinkedIn, Twitter/X, Pinterest) leen las etiquetas Open Graph para generar la vista previa del contenido compartido. Además, todos los plugins SEO populares incorporan la personalización de estas meta etiquetas en sus funciones.
- Más tráfico, más ventas, menos gasto.
- Genera clientes nuevos desde Google gratis.
- Resultados visibles en solo 6 meses.
¿Para qué sirven las etiquetas Open Graph y por qué son importantes para el SEO?
Las etiquetas Open Graph son importantes para la imagen de marca de tu página web y, por lo tanto, para tu SEO de forma indirecta.
Gracias al og SEO (el uso estratégico de las etiquetas Open Graph en tu estrategia de posicionamiento) conseguirás:
- Controlar exactamente cómo se muestra tu página web cuando se comparte en redes sociales.
- Mejorar el CTR (porcentaje de clics) de los enlaces compartidos en Facebook, Instagram, LinkedIn y otras plataformas.
- Construir una imagen de marca coherente y profesional en todas las redes sociales.
- Aumentar el tráfico social hacia tu página web.
Tipos de meta etiquetas Open Graph que existen
El Open Graph Protocol fue desarrollado inicialmente por Facebook y sus etiquetas fueron adoptadas posteriormente por LinkedIn, Instagram y otras redes sociales. Twitter/X propuso sus propias etiquetas equivalentes, conocidas como Twitter Cards.
og:title
Esta meta etiqueta indica el título que se mostrará en el feed de la red social cuando se comparta tu URL.
<meta property="og:title" content="Guía sobre las etiquetas Open Graph"/>
og:description
Indica la descripción que verá el usuario en el feed. Se recomienda incluir un CTA que anime a hacer clic.
<meta property="og:description" content="Descubre cómo ven los usuarios tu página web cuando la comparten en sus redes sociales gracias a Open Graph."/>
og:url
Indica la URL enlazada desde la red social.
<meta property="og:url" content="url" />
og:image (Open Graph Image)
La og:image es una de las etiquetas más importantes. Indica a la red social qué imagen debe mostrar en el feed cuando se comparte la URL. Si la dejas vacía, la red social escogerá una imagen aleatoria de tu página web.
<meta property="og:image" content="urldelaimagen.jpg" />
Para que la imagen Open Graph se muestre correctamente en todas las plataformas, se recomienda utilizarla con unas dimensiones de 1200 x 630 píxeles.
og:video
Se utiliza cuando la URL contiene un vídeo concreto que quieres destacar.
<meta property="og:video" content="urldelvideo.swf" />
og:type
El og:type indica a la red social de qué tipo de contenido se trata: artículo, vídeo, perfil, etc.
<meta property="og:type" content="article" />
og:site_name
Especifica el nombre de marca de tu página web en la red social.
<meta property="og:site_name" content="Borja" />
Por otro lado, Twitter/X propuso sus propias meta etiquetas equivalentes, las Twitter Cards, con etiquetas exclusivas:
- «Photo» para las imágenes.
- «Player» para los vídeos.
- «Summary» para todo lo demás.
- Más tráfico, más ventas, menos gasto.
- Genera clientes nuevos desde Google gratis.
- Resultados visibles en solo 6 meses.
Open Graph en Instagram: cómo funciona
Una duda frecuente es si el Open Graph funciona en Instagram. La respuesta es que Instagram sí lee las etiquetas Open Graph de tu página web, pero con matices.
Instagram utiliza las etiquetas Open Graph principalmente cuando se comparte un enlace en las Stories o en el feed a través de stickers de enlace. En ese caso, Instagram lee la og:image, og:title y og:description para generar la vista previa del contenido.
Sin embargo, Instagram tiene sus propias restricciones en cuanto a cómo muestra los enlaces (especialmente en el feed orgánico, donde los enlaces no son clicables), por lo que el impacto del Open Graph en Instagram es mayor en Stories y en perfiles de empresa.
Para optimizar el Open Graph para Instagram, asegúrate de que:
- La og:image tiene unas dimensiones óptimas (mínimo 1200 x 630 px).
- El og:title es atractivo y conciso.
- La og:description incluye un mensaje claro y una llamada a la acción.
Open Graph en Facebook: cómo funciona
Facebook fue el creador del Open Graph Protocol y sigue siendo la plataforma donde más importancia tienen estas etiquetas. Cuando alguien comparte un enlace en Facebook, la plataforma lee las etiquetas Open Graph de tu página web para generar la vista previa del post.
Si las etiquetas no están correctamente configuradas, Facebook puede mostrar información incorrecta, una imagen poco atractiva o ninguna imagen en absoluto.
Para verificar cómo se verá tu página web en Facebook, utiliza el Facebook Debugger que te explico más abajo.
- Más tráfico, más ventas, menos gasto.
- Genera clientes nuevos desde Google gratis.
- Resultados visibles en solo 6 meses.
Herramientas de prueba de etiquetas Open Graph
Una vez hayas implementado las etiquetas Open Graph en tu página web, será el momento de comprobar que funcionan correctamente:
Twitter Card Validator
La herramienta Twitter Card Validator te ayuda a comprobar que tus meta etiquetas se visualizan bien en Twitter/X.
Facebook Debugger
El Facebook Debugger te permite ver el aspecto que tendrá tu post cuando se comparta en Facebook y detectar posibles errores en las etiquetas Open Graph.
Google Structured Data Testing Tool
La Google Structured Data Testing Tool te ayuda a ver qué marcado están leyendo los rastreadores de tu página web, aunque está más orientada al marcado schema que al Open Graph.
Rich Pins Validator (Pinterest)
Pinterest cuenta con su propia herramienta de validación: Rich Pins Validator, que te muestra cómo se verán tus posts en esa plataforma.
LinkedIn Post Inspector
El LinkedIn Post Inspector te permite comprobar los metadatos que LinkedIn leerá de tu página web.
Cómo configurar Open Graph en WordPress
La gran mayoría de plugins SEO para WordPress cuentan con su propia sección Open Graph donde puedes editar tus fragmentos enriquecidos para redes sociales.
En Yoast SEO, accede al editor de una página o entrada, abre la sección Yoast SEO y pulsa sobre la pestaña «Social» para indicar la imagen, título y descripción que se verá en Facebook y Twitter/X.
En Rank Math, el proceso es idéntico: abre la sección Rank Math SEO en el editor y pulsa sobre la pestaña «Social».
Preguntas frecuentes sobre Open Graph
¿Qué es Open Graph?
¿Open Graph afecta al SEO?
¿Open Graph funciona en Instagram?
¿Cómo se configura el Open Graph en WordPress?
Conclusiones
Como has visto a lo largo del post, el marcado Open Graph es muy similar al marcado de datos estructurados schema de Google, solo que orientado a redes sociales.
Gracias a este marcado podrás controlar la imagen de tu marca en Facebook, Instagram, LinkedIn, Twitter/X y Pinterest, consiguiendo un mayor número de clics hacia tu página web desde las redes sociales.
No dejes de configurar estas etiquetas si tu negocio online tiene presencia en redes sociales.
¿Conocías este tipo de marcado? ¿Qué te ha parecido?
Cuéntamelo en los comentarios y nos vemos en dos semanas.
¡Hasta entonces!
