Etiquetas Open Graph: cómo configurar og:image y lograr vistas previas limpias

Por SEOgrinder · Publicado 4 de noviembre de 2026 · 11 min de lectura

Respuesta corta: Las etiquetas Open Graph son metaetiquetas del head de una página que indican a las redes sociales y a las aplicaciones de mensajería qué título, qué descripción y qué imagen mostrar cuando alguien comparte un enlace. El protocolo exige cuatro (og:title, og:type, og:image y og:url), conviene añadir og:description, y te conviene usar una imagen de al menos 1200 × 630 píxeles, de menos de 8 MB y con una dirección completa con https. Pon todas las etiquetas en el HTML que entrega tu servidor, no en un JavaScript que se ejecuta más tarde; un efecto en el posicionamiento no está demostrado, porque las etiquetas solo controlan el aspecto de un enlace compartido.

¿Qué son las etiquetas Open Graph?

Open Graph es un protocolo que permite a una página web describirse a sí misma como un objeto: con un título, un tipo, una imagen y una dirección. Según ogp.me, el protocolo lo creó originalmente Facebook. Se usa añadiendo etiquetas meta al head de la página. Cuando alguien pega tu enlace en una publicación o en un chat, la plataforma descarga la página, lee estas etiquetas y construye con ellas la tarjeta de vista previa. Sin ellas, la plataforma tiene que adivinar qué título, qué descripción y qué imagen usar.

El protocolo fija cuatro propiedades obligatorias para cada página, más una que es opcional pero se recomienda de forma general:

Etiqueta	Qué contiene	Estado
og:title	El título del objeto tal como debe aparecer en la vista previa	Obligatoria
og:type	El tipo de objeto, por ejemplo `website` o `article`	Obligatoria
og:image	La dirección de la imagen que representa la página	Obligatoria
og:url	La dirección canónica de la página, que actúa como su identificador permanente	Obligatoria
og:description	Una descripción de una o dos frases	Opcional, recomendada de forma general

El valor de og:type importa más allá de la etiqueta en sí. Según ogp.me, el tipo que elijas puede traer consigo otras propiedades. Para article, el protocolo enumera campos como article:published_time y article:modified_time. Otras etiquetas opcionales son og:site_name (el nombre del sitio entero) y og:locale (el idioma de las etiquetas, por defecto en_US).

El HTML mínimo para las etiquetas Open Graph

Este es un conjunto completo que puedes adaptar. (El ejemplo de ogp.me añade además un atributo prefix en el elemento html; las grandes plataformas leen las etiquetas sin él.) Va dentro del elemento head, junto a tu etiqueta title normal:

<head>
  <title>Etiquetas Open Graph: cómo configurar og:image</title>
  <meta property="og:title" content="Etiquetas Open Graph: cómo configurar og:image">
  <meta property="og:type" content="article">
  <meta property="og:url" content="https://example.com/etiquetas-open-graph">
  <meta property="og:image" content="https://example.com/imagenes/etiquetas-open-graph.png">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
  <meta property="og:image:alt" content="Tarjeta de vista previa de un enlace con imagen, título y descripción">
  <meta property="og:description" content="Las cuatro etiquetas Open Graph obligatorias, las reglas de tamaño de la imagen y cómo probar la vista previa de un enlace.">
  <meta property="og:site_name" content="Ejemplo">
</head>

Algunas notas sobre los detalles:

og:url es un identificador permanente. ogp.me la define como la URL canónica del objeto. Usa la misma dirección que en tu enlace canonical, sin parámetros de seguimiento.
Escribe la dirección de la imagen completa. Todos los ejemplos de ogp.me usan una dirección completa. Una ruta relativa como /imagenes/tarjeta.png depende de cómo la resuelva cada rastreador, así que no cuentes con ello.
El ancho y el alto ayudan. La documentación de Facebook dice que con estas dos etiquetas su rastreador puede mostrar la imagen de inmediato, sin tener que descargarla y procesarla antes.
Añade og:image:alt. ogp.me indica que una página que especifica una imagen debería especificar también una descripción de lo que contiene (una descripción, no un pie de foto).

Reglas de og:image: tamaño, archivo y dirección

Facebook publica las cifras más claras, en su página sobre las imágenes en los enlaces compartidos. Son la referencia para el resto de esta sección:

El tamaño mínimo permitido es de 200 × 200 píxeles.
El archivo no debe superar los 8 MB.
Para la mejor visualización en dispositivos de alta resolución, usa al menos 1200 × 630 píxeles.
Como mínimo, usa 600 × 315 píxeles para que las publicaciones con enlace muestren una imagen grande. Las imágenes más pequeñas se muestran igualmente, pero mucho más pequeñas.
Mantén la proporción lo más cerca posible de 1,91:1 para que la imagen aparezca entera, sin recortes. 1200 × 630 da aproximadamente 1,905:1, y por eso es el tamaño habitual.
El rastreador solo acepta las codificaciones gzip y deflate, así que comprueba que tu servidor o tu CDN responda con una de ellas.

Estas son las reglas de Facebook. Otras aplicaciones y servicios de mensajería leen las mismas etiquetas, pero este artículo no documenta sus límites, así que haz pruebas en los sitios que te importen. A modo de referencia, las páginas del blog de SEOgrinder usan una imagen de vista previa de 1200 × 630 píxeles.

Hay dos condiciones más que tienen que ver con el acceso, no con el tamaño. La imagen debe ser pública: sin inicio de sesión delante y sin ninguna regla de robots.txt que bloquee la carpeta donde está. Si un rastreador no puede descargar el archivo, la vista previa se queda sin imagen, por buena que sea.

Da a cada página sus propias etiquetas Open Graph

Como og:url es el identificador permanente de un objeto, tiene que ser distinta en cada página. Lo mismo vale para el resto:

og:title debe nombrar de qué trata esta página, no el sitio entero.
og:description debe resumir esta página en una o dos frases.
og:image debe mostrar algo que encaje con la página. Ten una imagen por defecto para las páginas que no tengan una propia.
og:type también puede variar: website para una página de inicio, article para una entrada de blog o una noticia.

Sea cual sea tu stack, genera las etiquetas a partir de los datos de cada página en lugar de escribirlas a mano. Un pequeño ejemplo en Node:

const esc = (s) => String(s).replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;');

function openGraphTags(pagina) {
  return [
    ['og:title', pagina.titulo],
    ['og:type', pagina.tipo || 'website'],
    ['og:url', `https://example.com${pagina.ruta}`],
    ['og:image', pagina.imagen || 'https://example.com/imagenes/tarjeta-por-defecto.png'],
    ['og:description', pagina.descripcion],
  ].filter(([, content]) => content != null && content !== '').map(([property, content]) => `<meta property="${property}" content="${esc(content)}">`).join('\n');
}

La función esc es importante: un título con comillas cerraría el atributo antes de tiempo y rompería la etiqueta. Si usas un CMS, busca el campo que define la imagen para compartir de cada página. Lo que comprobarás al final no cambia: las etiquetas en el HTML entregado.

Las etiquetas Open Graph deben estar en el HTML entregado

Muchos sitios modernos envían un cascarón HTML casi vacío y dejan que JavaScript construya la página en el navegador. Google sabe manejarlo: según su documentación sobre JavaScript, la Búsqueda renderiza las páginas con una versión evergreen de Chromium. La misma página dice también que el renderizado en el servidor o el prerenderizado siguen siendo una buena idea, porque no todos los bots pueden ejecutar JavaScript.

Para los rastreadores de IA hay una medición: en diciembre de 2024, Vercel y MERJ comprobaron que ninguno de los principales rastreadores de IA que analizaron ejecutaba JavaScript. Es una instantánea de 2024 y desde entonces no se ha vuelto a confirmar. Para las vistas previas de enlaces, de la misma lógica se deduce una regla segura: si tus etiquetas solo aparecen después de que se ejecute un script, un rastreador que no ejecuta scripts nunca las ve. SEOgrinder señala esas páginas como «La página solo se construye en el navegador», con la nota de que muchos rastreadores de IA no ejecutan JavaScript y ven una página casi vacía.

Puedes comprobarlo en diez segundos:

curl -sL https://example.com/ | grep -io '<meta[^>]*og:[^>]*>'

Si las etiquetas aparecen, están en el HTML tal como se entrega. Si no aparece nada, pero las etiquetas se ven en las herramientas para desarrolladores del navegador, un script las añade demasiado tarde. Haz la misma prueba con «Ver código fuente» en el navegador: muestra el HTML entregado, no el estado de la página después de que se hayan ejecutado todos los scripts, que es lo que enseñan las herramientas para desarrolladores. La solución es renderizar en el servidor o generar las páginas por adelantado, de modo que el título, el texto y las etiquetas estén en la primera respuesta.

Cómo probar la vista previa de un enlace

El Sharing Debugger de Facebook muestra qué etiquetas ha leído el rastreador y los errores que haya. Pide iniciar sesión en Facebook. Según la documentación de imágenes de Facebook, pasar una URL por él también descarga los metadatos por adelantado, lo cual importa por la caché:

Facebook guarda en caché cada imagen según su dirección. Si sustituyes una imagen, usa una URL nueva para la nueva, o seguirá viéndose la antigua.
No borres la imagen antigua, porque las publicaciones existentes pueden seguir apuntando a ella.
Cambiar la imagen de una URL no actualiza la vista previa de los envíos antiguos. Esos hay que refrescarlos.
El rastreador tiene que ver una imagen al menos una vez antes de poder mostrarla. Sin la descarga previa, es posible que la primera persona que comparta un enlace no vea la imagen.

Antes de publicar, repasa esta lista:

Descarga la página con curl y confirma que las cinco etiquetas están en la primera respuesta.
Abre la dirección de la imagen por sí sola. Debe cargar sin iniciar sesión, con estado 200.
Comprueba el tamaño: al menos 1200 × 630 píxeles y menos de 8 MB.
Pasa la página por el Sharing Debugger y lee los errores y las advertencias.
Repite el proceso con una página de cada tipo: la página de inicio, una entrada y un producto.

Cómo comprueba SEOgrinder las etiquetas Open Graph

Escribe en SEOgrinder la dirección de una página pública y el informe incluye una vista previa social, que muestra cómo se ve la página al compartirla. La herramienta lee tus etiquetas, descarga la imagen e informa de lo que encuentra. No necesita cuenta y no cuesta nada. Estos son los hallazgos que importan aquí:

Vista previa al compartir incompleta indica cuáles de la imagen, el título y la descripción faltan.
La imagen de vista previa no carga aparece cuando la imagen responde con un estado de error. El hallazgo nombra ese estado y señala las causas habituales: una dirección equivocada, un inicio de sesión delante del archivo o un bloqueo en el robots.txt. Según el hallazgo, los enlaces aparecen entonces en LinkedIn, WhatsApp y X sin imagen.
La imagen de vista previa es muy pequeña aparece por debajo de 600 × 315 píxeles (Facebook solo muestra entonces una miniatura pequeña) y señala aparte las imágenes por debajo del mínimo de 200 × 200.
La página solo se construye en el navegador es el hallazgo para las páginas que construyen su interfaz en el navegador.

SEOgrinder no puede mostrarte cómo dibuja la tarjeta cada red. Comprueba las etiquetas y el archivo, que es la parte que controlas tú. Para el aspecto final, usa el depurador.

Errores frecuentes

Una ruta de imagen relativa. Usa la dirección completa con https://.
Una imagen que no se puede descargar. Un inicio de sesión, una regla de firewall o una línea de robots.txt sobre la carpeta de imágenes dejan la vista previa sin imagen.
Una imagen demasiado pequeña. Por debajo de 600 × 315 píxeles se muestra pequeña; por debajo de 200 × 200 puede que no se muestre en absoluto.
Ninguna descripción. og:description es opcional en el protocolo, pero sin ella la plataforma adivina.
Las mismas etiquetas en todas las páginas. Entonces cada entrada se ve al compartirla como la página de inicio, y og:url ya no identifica nada.
Sustituir la imagen bajo la misma dirección. Facebook guarda en caché por URL, así que publica el archivo nuevo con un nombre nuevo.
Etiquetas que solo existen después de que se ejecute JavaScript. Ponlas en el HTML entregado.
Comillas sin escapar en los valores. Cierran el atributo y cortan la etiqueta.
Una dirección de seguimiento en og:url. La etiqueta debe contener la dirección canónica.

Preguntas frecuentes

¿Son las etiquetas Open Graph un factor de posicionamiento?

No hay pruebas de que lo sean. Open Graph controla cómo se ve un enlace compartido en las redes sociales y en las aplicaciones de mensajería. Nada de las fuentes usadas aquí lo relaciona con el posicionamiento.

¿Qué tamaño de og:image debo usar?

1200 × 630 píxeles, con una proporción cercana a 1,91:1 y de menos de 8 MB. Eso cumple la recomendación de Facebook y es el tamaño de la imagen de vista previa de las páginas del blog de SEOgrinder.

¿Necesito og:description?

El protocolo la presenta como opcional y recomendada de forma general. Sin ella, la plataforma tiene que adivinar una descripción a partir de tu página, así que escribe una.

¿Por qué se sigue viendo mi imagen antigua?

Facebook guarda las imágenes en caché según su dirección. Publica la imagen nueva en una URL nueva y pasa la página por el Sharing Debugger. Los envíos antiguos no se actualizan automáticamente.

¿Qué pasa con twitter:card?

Esa etiqueta no forma parte del protocolo Open Graph. La sugerencia de corrección de SEOgrinder para una vista previa incompleta propone además poner twitter:card en summary_large_image. Este artículo no trata las reglas de X, así que consúltalas en la documentación de X.

¿Puede un agente de programación añadir las etiquetas por mí?

Puede encargarse de la parte mecánica: escribir las etiquetas en tus plantillas y comprobarlas con curl. En el informe, Entregar a la IA presenta los hallazgos como un encargo de trabajo en Markdown, con una condición de objetivo verificable en cada tarea. Elegir la imagen y redactar el texto sigue siendo cosa tuya.

Tu siguiente paso

Haz el análisis gratuito de tu página de inicio y mira la vista previa social y los hallazgos enumerados arriba. Corrígelos por orden, publica una imagen nueva en una dirección nueva si tienes que sustituir una y pasa la página por el Sharing Debugger. Después vuelve a analizar para confirmar que la vista previa está completa.