Open Graph es un protocolo de metadatos que permite que una página web se muestre como una ficha enriquecida (con título, descripción e imagen) cuando alguien comparte su enlace en una red social o en una aplicación de mensajería. Se configura con unas pocas etiquetas meta dentro del <head> de cada página. Si no las defines, la plataforma decide por ti qué mostrar, y casi nunca elige bien.
En esta guía te explicamos qué es, qué etiquetas son imprescindibles, cómo elegir la imagen OG, cómo implantarlo en WordPress y cómo comprobar que funciona.
En resumen
- Open Graph son etiquetas HTML invisibles para el visitante que controlan cómo se ve tu enlace al compartirlo en redes.
- Las cuatro propiedades obligatorias son
og:title,og:type,og:imageyog:url;og:descriptiones opcional pero muy recomendable. - La imagen OG funciona bien con URL absoluta en HTTPS y un tamaño de referencia de 1200 × 630 píxeles.
- No mejora directamente tu posicionamiento en Google, pero sí la tasa de clics de lo que compartes.
- En WordPress, deja que un solo plugin o tema genere las etiquetas y revisa siempre el resultado con un depurador.
¿No sabes qué necesita mejorar tu web?
Analizamos tu web y te decimos qué conviene revisar, antes de contratar ninguna intervención.
Tabla de contenidos
- ¿Qué es Open Graph?
- Para qué sirve en una web de empresa
- Cómo funciona cuando compartes un enlace
- Las etiquetas Open Graph esenciales
- La imagen OG: la etiqueta más visible
- Cómo implementar Open Graph en WordPress
- ¿Open Graph mejora el SEO?
- Cómo comprobar y corregir la vista previa
- Nuestro punto de vista
- Si prefieres que lo revisemos nosotros
- Preguntas frecuentes
- Fuentes
¿Qué es Open Graph?
Según la especificación oficial, el protocolo Open Graph permite que cualquier página web se convierta en un objeto enriquecido dentro de un grafo social. Dicho sin tecnicismos: es una forma estándar de decirle a Facebook, LinkedIn, WhatsApp y otras plataformas «esta es la página, este es su título y esta es su imagen».
La documentación de MDN lo describe como un protocolo de metadatos creado por Facebook para ofrecer metadatos más ricos en el head del documento HTML. Según Semrush, Facebook lo introdujo en 2010. Hoy lo leen muchas más plataformas que la original.
Un ejemplo claro: sin Open Graph, un enlace a tu página de servicios puede aparecer como una URL sin más. Con Open Graph aparece con una imagen cuidada, un título claro y una frase que invita a hacer clic.
Para qué sirve en una web de empresa
Piensa en los sitios donde tu enlace viaja sin ti: una publicación en LinkedIn, un mensaje de WhatsApp a un cliente, un correo reenviado, un grupo de Slack. En todos ellos, la vista previa es lo único que la otra persona ve antes de decidir si entra.
Estos son los beneficios prácticos:
- Imagen de marca coherente. Eres tú quien decide qué imagen y qué texto acompañan a cada página.
- Más clics desde redes y mensajería. Una tarjeta con imagen y descripción se entiende mejor que una URL desnuda.
- Menos sorpresas. Evitas que la plataforma muestre un logotipo recortado, un aviso de cookies o ninguna imagen. Logicutil señala que esto ocurre cuando faltan las etiquetas.
- Profesionalidad. Una vista previa descuidada transmite lo mismo que una web descuidada. Lo desarrollamos en nuestro artículo sobre cómo el diseño web mejora la imagen de tu empresa.
Cómo funciona cuando compartes un enlace
El proceso es sencillo:
- Alguien pega tu URL en una red social o aplicación.
- La plataforma envía un rastreador que descarga el HTML de la página.
- Lee las etiquetas
og:del<head>. - Construye la tarjeta con el título, la descripción y la imagen que encuentra.
Si las etiquetas no existen, la plataforma intenta adivinar. Puede tomar el primer párrafo, una imagen cualquiera o limitarse a mostrar la URL. MDN ilustra el caso contrario: con og:image, og:description y og:title, el enlace aparece con imagen y descripción en lugar de como un enlace básico.
Un detalle sobre X (antes Twitter): puede leer Open Graph, pero con la etiqueta twitter:card eliges entre summary_large_image y summary para controlar el formato de la tarjeta.
Las etiquetas Open Graph esenciales
La especificación define cuatro propiedades requeridas: og:title (título del objeto), og:type (tipo de contenido), og:image (URL de una imagen representativa) y og:url (URL canónica, que actúa como identificador permanente). Son las mismas cuatro que Semrush destaca como las más importantes. Además, og:description, og:site_name y og:locale son opcionales y, en general, recomendables.
| Etiqueta | Qué indica | Ejemplo |
|---|---|---|
og:title |
Título que verá quien reciba el enlace | Diseño web para empresas |
og:type |
Tipo de contenido | website o article |
og:image |
Imagen de la tarjeta | https://ejemplo.es/img/portada.jpg |
og:url |
URL canónica de la página | https://ejemplo.es/servicios/ |
og:description |
Resumen breve (opcional) | Qué ofreces y a quién |
og:site_name |
Nombre de la marca (opcional) | Tu empresa |
og:locale |
Idioma (opcional) | es_ES |
Un bloque de ejemplo
<meta property="og:title" content="Diseño web para empresas">
<meta property="og:type" content="website">
<meta property="og:url" content="https://ejemplo.es/servicios/">
<meta property="og:image" content="https://ejemplo.es/img/servicios.jpg">
<meta property="og:description" content="Webs a medida que convierten visitas en clientes.">
<meta property="og:locale" content="es_ES">
Fíjate en que se usa property, no name, y que todo va dentro del <head>.
Título y descripción: dos textos distintos
No tienes por qué copiar el título SEO. El texto de una tarjeta social puede escribirse para captar atención, mientras que el title y la meta description trabajan para el resultado de búsqueda, como apunta Logicutil. Una buena regla: título corto y concreto, y una descripción de una o dos frases que expliquen el beneficio para quien hace clic.
La imagen OG: la etiqueta más visible
La imagen OG (og:image) es la que acompaña al enlace en la vista previa. La especificación indica que debe representar al objeto, no ser cualquier imagen de la página. Eso significa elegir una imagen que explique de qué trata esa URL concreta.
Tamaño, formato y URL
Las guías técnicas coinciden en varios puntos:
- Tamaño de referencia: 1200 × 630 píxeles, con proporción aproximada de 1,91:1, según Duplika.
- URL absoluta y HTTPS, accesible públicamente, como recomienda Logicutil.
- Formato JPG o PNG y peso razonable.
- Textos y logotipos lejos de los bordes, porque cada plataforma recorta de forma distinta.
- Archivo real y público. La URL debe devolver una imagen con HTTP 200, sin pedir inicio de sesión y sin estar bloqueada para rastreadores, según Duplika.
- Una imagen propia para cada página importante, siempre que sea posible.
Si no tienes diseñador a mano, unas plantillas para redes sociales editables te permiten montar imágenes con el tamaño correcto sin partir de cero.
Pesa poco, también por velocidad
Una imagen OG de varios megas no mejora la tarjeta y puede hacer que algunos rastreadores no la descarguen a tiempo. Comprímela antes de subirla. Si quieres profundizar, tenemos una guía para optimizar imágenes en WordPress sin perder calidad.
Texto alternativo de la imagen
La especificación permite añadir og:image:alt, que describe la imagen. No es un pie de foto: debe decir qué se ve, no repetir el título. También puedes indicar og:image:width y og:image:height para que la plataforma sepa el tamaño sin descargarla.
Cómo implementar Open Graph en WordPress
Hay dos caminos. El manual consiste en pegar las etiquetas en el <head>, útil para una web pequeña y estática. El habitual en WordPress es usar un plugin que las genere de forma dinámica con los datos de cada página, como describe Duplika.
Lo que más problemas da no es la falta de etiquetas, sino el exceso. Si el tema, el plugin SEO y un plugin de redes sociales generan Open Graph a la vez, aparecen duplicados y la plataforma puede quedarse con el que no quieres. La recomendación de Duplika es que un único tema o plugin se encargue de ello.
Pasos recomendados:
- Decide qué herramienta de tu web genera las etiquetas (normalmente tu plugin SEO).
- Desactiva la función social en el resto de plugins.
- Define una imagen por defecto para las páginas sin imagen destacada.
- Añade una imagen y una descripción específicas en tus páginas clave: inicio, servicios, contacto y entradas principales.
- Guarda, abre el código fuente publicado y busca
og:title,og:imageyog:url.
Si tu web es una tienda, repite el proceso para las fichas de producto: la imagen del producto es justo lo que quieres ver al compartir un enlace. Es una tarea que incluimos al montar una tienda WooCommerce a medida.
¿Open Graph mejora el SEO?
No directamente. Según Logicutil, los buscadores no posicionan páginas por sus etiquetas Open Graph. Google, además, enumera las metaetiquetas que admite y las que no reconoce se ignoran.
Entonces, ¿por qué importa? Porque el SEO no es solo aparecer en Google: también es conseguir que tu contenido se comparta, se abra y genere visitas. Una vista previa atractiva aumenta las posibilidades de que alguien entre desde una red social o un mensaje, y ese tráfico también cuenta. Para el resultado de búsqueda, lo relevante siguen siendo el title y la meta description.
En nuestro enfoque, Open Graph forma parte de la capa técnica que se prepara desde el inicio, junto con la arquitectura de la información y el SEO técnico.
Cómo comprobar y corregir la vista previa
No des por buena una configuración sin probarla. Sigue este orden:
- Revisa el código fuente publicado (no el editor) y localiza las etiquetas
og:. Comprueba que no hay duplicados. - Abre la URL de la imagen en una ventana de incógnito: debe cargar sin iniciar sesión y por HTTPS.
- Pasa la URL por un depurador. El Sharing Debugger de Meta muestra cómo se verá tu contenido en Facebook y señala errores en las etiquetas.
- Vuelve a solicitar el rastreo tras corregir. Si sigue saliendo la versión antigua, suele ser caché de la plataforma, no un fallo de tu web.
- Prueba en el canal real: envíate el enlace por WhatsApp o publícalo en un borrador de LinkedIn.
Errores frecuentes
- La imagen apunta a una ruta relativa (
/img/portada.jpg) en lugar de una URL completa. - La imagen está en HTTP o detrás de una redirección.
- El plugin de caché o de seguridad bloquea a los rastreadores.
- Todas las páginas comparten la misma imagen y el mismo texto.
og:urlapunta a una versión distinta de la URL que se comparte.
Nuestro punto de vista
En la práctica vemos que Open Graph es de esas tareas que casi todas las webs tienen a medias. El plugin está instalado, hay una imagen por defecto y nadie ha vuelto a mirar. Pasan los meses, se cambia el logotipo o se rediseña una página y la vista previa sigue mostrando lo de hace dos años.
Por eso lo tratamos como parte del lanzamiento, no como un extra: se define con la arquitectura de la información, se prueba con los canales que usa el cliente y se revisa cuando la web cambia. No pedimos que sea perfecto: pedimos que, cuando un cliente tuyo reciba tu enlace, vea tu marca bien presentada y entienda en dos segundos de qué va.
Un consejo directo: empieza por cinco páginas (inicio, tus dos servicios principales, contacto y tu artículo más compartido) antes de intentar cubrir toda la web.
— Josep
Si prefieres que lo revisemos nosotros
Si tu web ya está publicada y las vistas previas salen mal, no hace falta rehacerla. Nuestro servicio de optimización web cuesta 199 € (pago único) y la puesta al día web 159 €. Y si estás planteando una web nueva, la web corporativa WordPress parte desde 690 €, con el SEO técnico y los metadatos sociales preparados desde el principio.
También podemos encargarnos del mantenimiento posterior, para que cada cambio en la web mantenga sus etiquetas en orden. Puedes ver los planes en la página de mantenimiento.
Preguntas frecuentes
¿Qué es la imagen OG?
Es la imagen que se muestra en la vista previa cuando compartes un enlace, definida con la etiqueta og:image. Debe representar la página, usar una URL absoluta en HTTPS y tener como referencia 1200 × 630 píxeles. Cuanto más específica sea para cada página, mejor.
¿Qué es el graph de Open Graph?
El «grafo» es la red de objetos conectados que forman las plataformas sociales: personas, páginas, artículos, productos. Open Graph permite que tu página sea un objeto más de esa red, con título, tipo, imagen y URL propios, según la especificación oficial.
¿Necesito Open Graph si ya tengo SEO?
Sí, porque cubren cosas distintas. El SEO tradicional trabaja el resultado de Google; Open Graph trabaja cómo se ve tu enlace al compartirlo. No sustituye al title ni a la meta description, y no mejora el ranking por sí solo.
¿Por qué sigue saliendo la imagen antigua al compartir?
Lo más probable es la caché de la plataforma. Comprueba primero que las etiquetas nuevas están en el código publicado, y después vuelve a solicitar el rastreo con el depurador de la red social. Si aun así no cambia, revisa redirecciones y plugins de caché.
¿Qué plugin de WordPress genera Open Graph?
La mayoría de plugins SEO incluyen esta función. Lo importante es que solo uno la tenga activa, para evitar etiquetas duplicadas, y que revises el código fuente tras guardar los cambios.
Fuentes
- The Open Graph protocol
- ¿Qué hay en la cabecera? Metadatos de la página web (MDN)
- Etiquetas y protocolo Open Graph (Semrush)
- Etiquetas Open Graph: cómo controlar la vista previa (Logicutil)
- Open Graph y meta tags sociales (Duplika)
- Metaetiquetas que admite Google
- Sharing Debugger de Meta
