Guía Open Graph: qué es, para qué sirve y cómo implementarlo en tu sitio web
¿Alguna vez has compartido una página web en WhatsApp, Facebook o LinkedIn y has visto que aparece una imagen, un título y una descripción?
Ese contenido no aparece por casualidad.
Gran parte de la información que se muestra al compartir una URL puede controlarse mediante Open Graph, un conjunto de etiquetas que permite definir cómo se presenta una página cuando alguien comparte su enlace en redes sociales y aplicaciones de mensajería.
Implementarlo correctamente puede hacer que tus enlaces sean mucho más atractivos y profesionales.
En esta guía veremos qué es Open Graph, cómo funciona, qué etiquetas necesitas y cómo implementarlo en tu sitio web.
¿Qué es Open Graph?
Open Graph Protocol es un estándar creado originalmente por Facebook que permite definir información específica sobre una página web para que otras plataformas puedan interpretar su contenido.
Por ejemplo, cuando alguien comparte:
https://tusitio.com/servicios
la plataforma puede utilizar las etiquetas Open Graph para determinar:
- Qué título mostrar.
- Qué descripción utilizar.
- Qué imagen presentar.
- Qué URL considerar como principal.
- Qué tipo de contenido es.
Sin estas etiquetas, la plataforma puede intentar obtener la información automáticamente y no siempre elegirá el contenido que tú quieres mostrar.
¿Para qué sirve Open Graph?
Su principal objetivo es controlar la apariencia de tus enlaces cuando son compartidos.
Esto es especialmente importante para sitios empresariales, blogs, tiendas en línea y cualquier página que dependa de compartir contenido.
Una publicación puede pasar de verse así:
a mostrar una tarjeta mucho más atractiva:
Una presentación más cuidada puede aumentar la probabilidad de que alguien se interese en el enlace.
¿En qué plataformas funciona?
Open Graph es utilizado por numerosas plataformas para interpretar el contenido de una URL.
Entre ellas se encuentran servicios y redes como:
- Facebook.
- WhatsApp.
- LinkedIn.
- Discord.
- Slack.
- Pinterest.
La forma exacta en que cada plataforma presenta la información puede variar, pero las etiquetas Open Graph proporcionan los datos que necesitan para construir la vista previa.
Las etiquetas Open Graph más importantes
No necesitas cientos de etiquetas para comenzar.
Existen cuatro propiedades fundamentales.
og:title
Define el título que quieres mostrar cuando se comparte la página.
<meta property="og:title" content="Diseño de páginas web profesionales">
Procura que sea claro y atractivo.
No necesariamente tiene que ser idéntico al title de la página, aunque normalmente conviene mantenerlos relacionados.
og:description
Define la descripción que acompaña al título.
<meta property="og:description" content="Creamos sitios web profesionales para ayudar a tu negocio a crecer en internet.">
Utiliza una descripción breve que explique claramente qué encontrará el usuario.
og:image
Indica la imagen que debe utilizarse en la vista previa.
<meta property="og:image" content="https://tusitio.com/images/servicios-web.jpg">
Esta es una de las etiquetas más importantes visualmente.
Una imagen relevante y bien diseñada puede hacer que tu contenido destaque mucho más cuando aparece junto a otros enlaces.
og:url
Indica la URL canónica de la página.
<meta property="og:url" content="https://tusitio.com/servicios">
Esto ayuda a identificar cuál es la URL principal asociada con ese contenido.
Otras etiquetas recomendadas
Además de las anteriores, puedes utilizar otras propiedades.
og:type
Define el tipo de contenido.
<meta property="og:type" content="website">
Para artículos de blog puedes utilizar:
<meta property="og:type" content="article">
og:site_name
Indica el nombre del sitio.
<meta property="og:site_name" content="Onycode">
og:locale
Permite indicar el idioma y región del contenido.
Por ejemplo:
<meta property="og:locale" content="es_MX">
¿Cómo implementar Open Graph?
La implementación es bastante sencilla.
Las etiquetas Open Graph se colocan dentro del head de tu documento HTML.
Por ejemplo:
<head><meta charset="UTF-8"><title>Diseño de páginas web profesionales | Onycodetitle><meta name="description"content="Creamos sitios web profesionales para ayudar a tu negocio a crecer en internet."><meta property="og:title"content="Diseño de páginas web profesionales"><meta property="og:description"content="Creamos sitios web profesionales para ayudar a tu negocio a crecer en internet."><meta property="og:image"content="https://onycode.com/images/diseno-web.jpg"><meta property="og:url"content="https://onycode.com/servicios/diseno-web"><meta property="og:type"content="website"><meta property="og:site_name"content="Onycode"><meta property="og:locale"content="es_MX">head>
Con esto ya tienes una implementación básica y funcional.
¿Open Graph mejora el SEO?
Aquí hay una distinción importante.
Open Graph no es una técnica de posicionamiento SEO directo.
Las etiquetas og:title, og:description y og:image no hacen que una página suba automáticamente de posición en Google.
Su función principal es controlar la presentación del contenido cuando se comparte fuera de los resultados de búsqueda.
Sin embargo, puede contribuir indirectamente a una estrategia de marketing digital porque una mejor presentación de los enlaces puede generar más interacciones, visitas y compartidos.
Por eso conviene verlo como parte de una estrategia de SEO + distribución de contenido, no como un factor SEO independiente.
Open Graph vs meta description
Es común confundir estos dos elementos.
Meta description
<meta name="description" content="...">
Está orientada principalmente a proporcionar una descripción de la página para los motores de búsqueda.
Open Graph
<meta property="og:description" content="...">
Está orientada principalmente a controlar cómo se presenta la página cuando se comparte en plataformas compatibles.
Puedes tener ambas:
<meta name="description"content="Diseñamos páginas web profesionales para empresas."><meta property="og:description"content="Descubre nuestras soluciones de diseño y desarrollo web.">
No es necesario que sean exactamente iguales.
¿Qué tamaño debe tener la imagen Open Graph?
Para una implementación práctica, una medida muy utilizada es:
1200 × 630 píxeles
Esta proporción funciona bien para las tarjetas sociales de formato horizontal.
Procura que la imagen:
- Tenga buena resolución.
- Sea relevante para el contenido.
- No tenga demasiado texto.
- Mantenga la identidad visual de tu marca.
- Sea fácilmente reconocible en tamaños pequeños.
Open Graph en un blog
Si tienes un blog, no deberías utilizar la misma imagen, título y descripción para todas las publicaciones.
Cada artículo debería generar dinámicamente sus propios valores.
Por ejemplo:
<meta property="og:title"content="{{ $post->title }}"><meta property="og:description"content="{{ $post->excerpt }}"><meta property="og:image"content="{{ $post->image }}"><meta property="og:url"content="{{ url()->current() }}"><meta property="og:type"content="article">
Si utilizas Laravel y Blade, esto permite generar automáticamente las etiquetas correspondientes a cada publicación.
¿Y si utilizas React?
El principio es exactamente el mismo.
Las etiquetas Open Graph siguen siendo etiquetas meta dentro del documento HTML.
Sin embargo, cuando trabajas con aplicaciones React, especialmente si utilizas renderizado del lado del cliente, debes prestar atención a cómo se genera el HTML que reciben los bots de las plataformas.
En sitios donde el SEO y las vistas previas sociales son importantes, tecnologías como SSR (Server-Side Rendering) o frameworks que generen HTML en el servidor pueden facilitar este proceso.
No basta con colocar las etiquetas en un componente y asumir que todas las plataformas las interpretarán correctamente.
Errores comunes al implementar Open Graph
1. Utilizar una URL incorrecta para la imagen
Esto:
https://tusitio.com/images/post.jpg
debe ser una URL accesible públicamente.
Una ruta relativa como:
/images/post.jpg
puede causar problemas dependiendo de cómo la plataforma procese la página.
2. Utilizar una imagen demasiado pequeña
Las imágenes de baja resolución pueden generar tarjetas poco atractivas o resultados inconsistentes.
Utiliza imágenes optimizadas y con dimensiones adecuadas.
3. No actualizar la información
Si cambias el título o imagen de un artículo, algunas plataformas pueden continuar mostrando información anterior debido a sus sistemas de caché.
Por eso es importante validar nuevamente la URL después de realizar cambios.
4. Utilizar la misma imagen para todo
Si todos tus artículos utilizan exactamente la misma imagen, tus enlaces serán menos reconocibles cuando aparezcan en redes sociales.
Una imagen específica para cada artículo ayuda a diferenciar el contenido.
¿Cómo comprobar si Open Graph funciona?
Después de implementar las etiquetas, no deberías asumir que todo funciona correctamente.
Conviene comprobar qué información está leyendo cada plataforma.
Puedes revisar:
- Título.
- Descripción.
- Imagen.
- URL.
- Tipo de contenido.
También puedes inspeccionar directamente el código fuente de tu página y buscar:
og:titleog:descriptionog:imageog:url
Si las etiquetas están presentes y contienen los valores correctos, ya tienes una buena base.
Checklist de Open Graph
Antes de publicar una página, revisa:
- og:title
- og:description
- og:image
- og:url
- og:type
- og:site_name
- og:locale
- La imagen es accesible públicamente.
- La imagen tiene buena resolución.
- Cada artículo tiene información Open Graph propia.
- Probaste cómo se muestra el enlace.
Conclusión
Open Graph es una implementación relativamente sencilla que puede mejorar considerablemente la presentación de tu sitio cuando sus enlaces son compartidos.
No hará que tu página aparezca automáticamente en las primeras posiciones de Google, pero sí te permite controlar qué información utilizan muchas plataformas para generar las vistas previas de tus enlaces.
Si tienes un sitio empresarial, una tienda en línea o un blog, Open Graph debería formar parte de la configuración básica de cada página importante.
Una buena estrategia digital no termina cuando alguien encuentra tu sitio. También importa cómo se presenta tu contenido cuando otras personas lo comparten.
