Etiquetas Open Graph: cómo controlar la vista previa de tus enlaces

En resumen: las etiquetas Open Graph indican a las redes sociales y a las apps de mensajería qué mostrar cuando se comparte tu enlace. Cada página necesita og:title, og:description, og:image y og:url, además de twitter:card para X. Usa una URL absoluta HTTPS para la imagen, de unos 1200 × 630 px, de menos de 5 MB y con lo importante cerca del centro. Genera las etiquetas en el HTML que envía tu servidor y, tras cambiarlas, actualiza la vista previa en caché de cada plataforma, porque las tarjetas antiguas se resisten a desaparecer.

La vista previa de un enlace suele ser la primera impresión de tu sitio. Un compañero pega tu página de precios en Slack, un cliente comparte un producto por WhatsApp, un socio publica tu artículo en LinkedIn. Si la página no tiene etiquetas Open Graph, cada app adivina: el texto del banner de cookies se convierte en la descripción, la imagen es un logo diminuto o no hay ninguna, y el título es el que tenga la <title> de la página.

Esta guía explica qué hace cada etiqueta, qué lee cada plataforma, los tamaños de imagen que funcionan en todas partes, por qué las vistas previas no se actualizan y cómo nuestro verificador de Open Graph gratuito encuentra las etiquetas que faltan, con una solución para cada una.

Qué es Open Graph

Según ogp.me, «The Open Graph protocol was originally created at Facebook» (el protocolo Open Graph fue creado originalmente en Facebook). Convierte una página web en un «objeto enriquecido» con título, tipo, imagen y URL que otros servicios pueden mostrar. Lo creó Facebook, pero LinkedIn, Slack y la mayoría de las apps de mensajería leen las mismas etiquetas, y X las lee como alternativa a las suyas.

Las etiquetas son elementos meta normales dentro del <head>, escritos con el atributo property:

<meta property="og:title" content="Waterproof Hiking Boots for Women">
<meta property="og:description" content="Leather boots tested on 40 km of wet trail. Sizes 36 to 43.">
<meta property="og:image" content="https://www.example.com/images/boots-share.jpg">
<meta property="og:url" content="https://www.example.com/hiking-boots/women/">
<meta property="og:type" content="website">
<meta name="twitter:card" content="summary_large_image">

Las etiquetas que importan

El protocolo define cuatro propiedades obligatorias: título, tipo, imagen y URL canónica. En la práctica, también importan unas cuantas opcionales.

Hay dos detalles de la especificación que conviene conocer. Si una etiqueta aparece dos veces, «the first tag (from top to bottom) is given preference during conflicts» (la primera etiqueta, de arriba abajo, tiene preferencia en caso de conflicto), así que la etiqueta de un tema que esté por encima de la de tu plugin gana. Y las propiedades estructuradas como og:image:width pertenecen al og:image que tienen inmediatamente encima.

Quién lee qué

Cada plataforma documenta sus propias reglas. Lo esencial:

• Facebook y las apps de Meta. La guía para webmasters de Meta enumera og:url, og:title, og:description, og:image y og:type. Las imágenes se guardan en caché por URL. El Sharing Debugger muestra lo que el rastreador extrajo y lanza una nueva extracción.
• LinkedIn. Su página de ayuda nombra cuatro etiquetas que «must exist» (deben existir): og:title, og:image, og:description y og:url. Las imágenes necesitan al menos 1200 × 627 px, una proporción de 1,91:1 y un máximo de 5 MB. Post Inspector muestra cómo ve LinkedIn una URL y actualiza su copia.
• X. X usa etiquetas twitter: y recurre a los equivalentes de Open Graph cuando faltan, así que og:title, og:description y og:image suelen bastar. twitter:card define el diseño; summary_large_image muestra una imagen ancha. X documenta una proporción de 2:1 para esa tarjeta, un mínimo de 300 × 157 px, archivos de menos de 5 MB y JPG, PNG, WebP o GIF (no SVG).
• Slack. Cuando ninguna app gestiona un dominio, Slack «crawls the URL, looks for common OpenGraph and X (formerly known as Twitter) Card metadata» (documentación de Slack).
• Google. No es una red social, pero Google incluye og:title entre las fuentes de los enlaces de título y tiene en cuenta og:site_name al elegir el nombre del sitio que aparece sobre tus resultados.

Cómo elegir la og:image

La imagen decide si una vista previa parece cuidada o rota. Los requisitos de cada plataforma difieren ligeramente, así que busca una imagen que cumpla todos:

Usa una imagen específica para cada página importante (foto de producto, ilustración del artículo) y una imagen por defecto bien diseñada para el resto. Un logo sobre un cuadrado blanco es la peor opción: la mayoría de las apps lo muestran pequeño o lo recortan mal.

Por qué las vistas previas no se actualizan

Las plataformas guardan la vista previa que construyeron la primera vez que se compartió una URL. Meta afirma que «Images are cached based on the URL and won't be updated unless the URL changes» (las imágenes se guardan en caché según la URL y no se actualizan a menos que la URL cambie), así que sustituir share.jpg por un archivo nuevo con el mismo nombre puede no cambiar nada. La secuencia fiable:

1. Sube la nueva imagen con un nombre de archivo nuevo (o añade un parámetro de versión a su URL).
2. Actualiza las etiquetas de la página y publícala.
3. Pasa la URL por el Sharing Debugger de Meta y por Post Inspector de LinkedIn para forzar una nueva descarga.
4. Comparte el enlace de nuevo. Las publicaciones ya hechas suelen conservar la tarjeta antigua.

Etiquetas para distintos tipos de página

Las etiquetas básicas son las mismas en todas partes, pero algunos tipos de página se benefician de más:

• Artículos y entradas de blog. Usa og:type con el valor article. El protocolo define propiedades adicionales para este tipo, como article:published_time, article:modified_time, article:author y article:section.
• Páginas de producto. Usa la foto principal del producto como og:image y pon el nombre del producto, no el de la tienda, en og:title. El precio y la disponibilidad van en los datos estructurados de Product, que tratamos en nuestra guía de marcado schema.
• La página de inicio y las páginas de categoría. Se comparten menos, pero se ven más. Una imagen por defecto diseñada con tu nombre y una frase corta sobre lo que haces funciona mejor que una foto cualquiera.
• Páginas que no deberían compartirse, como las de pago o de cuenta. No necesitan etiquetas especiales; solo asegúrate de que la imagen por defecto no apunte a nada privado.

Cómo ver lo que ve un rastreador

Antes de culpar a una plataforma, mira el HTML que recibe. Abre la página con «Ver código fuente» (no con el inspector de elementos de DevTools, que muestra la página después de ejecutar los scripts) y busca og:. La guía de Meta también indica el user agent de su rastreador, facebookexternalhit/1.1, así que puedes descargar la página como lo hace Facebook desde una terminal:

curl -s -A "facebookexternalhit/1.1 (+http://www.facebook.com/externalhit_uatext.php)" https://www.example.com/ | grep -i 'og:'

Si las etiquetas aparecen en tu navegador pero no en esta salida, las añade JavaScript o tu servidor o firewall responde de forma distinta a los bots.

Cómo funciona el verificador de Open Graph de Searvia

El verificador de Open Graph gratuito usa el mismo motor que nuestro verificador SEO de sitios web y pone tres comprobaciones en primer lugar: las etiquetas para compartir en redes sociales, la etiqueta title y la meta descripción. Introduce un dominio o la dirección de una página y:

1. Descarga esa página, siguiendo las redirecciones. Si introduces solo un dominio, se comprueba la página de inicio, así que pega la dirección de un artículo o de una página de producto para comprobar su vista previa.
2. Lee el HTML que devuelve tu servidor, sin ejecutar JavaScript, tal como lo ven la mayoría de los rastreadores de vistas previas.
3. Busca cuatro etiquetas y registra el primer valor no vacío de cada una: og:title, og:description, og:image y twitter:card.

El resultado es una tabla con una marca de verificación o una cruz y el valor exacto de cada etiqueta:

La comprobación nunca muestra un fallo y tiene baja prioridad en la puntuación global, porque la ausencia de etiquetas sociales no impide que una página se encuentre. Pero sí hace que cada vez que se comparte se vea peor, y por eso esta herramienta las muestra primero.

Las comprobaciones de título y descripción (correctas entre 30 y 60 y entre 70 y 160 caracteres) aparecen justo debajo, porque muchas apps recurren a ellas cuando faltan las etiquetas Open Graph. El informe incluye también una vista previa del resultado de Google, que usa og:site_name como nombre del sitio cuando lo defines.

Lo que el verificador no hace: no descarga la imagen para medirla, no comprueba og:url, og:type ni og:image:alt, y no descarga la página como el rastreador de cada plataforma. Usa los depuradores de cada plataforma para la revisión final.

Cómo interpretar los resultados

• Las cuatro con marca de verificación: lo básico está en su sitio. Revisa los valores y comprueba que tengan sentido: un título real, una descripción que no sea el aviso de cookies, una URL de imagen que empiece por https://.
• Falta og:image: corrígelo primero. Es la parte de la vista previa en la que más se fija la gente.
• Solo falta twitter:card: X seguirá leyendo tus etiquetas Open Graph, pero puede mostrar una tarjeta de resumen pequeña. Añade la etiqueta para obtener una imagen grande.
• Advertencias de título y descripción más abajo: afectan a Google y a las apps que recurren a ellos.

Cómo corregir cada etiqueta que falta

Falta og:title

Añade un titular escrito para personas que hacen scroll por un feed, no para un buscador. Puede coincidir con tu <title> sin el sufijo de marca:

<meta property="og:title" content="Waterproof Hiking Boots for Women">

Falta og:description

Escribe una o dos frases con un detalle concreto. Reutilizar tu meta descripción es válido:

<meta property="og:description" content="Leather boots tested on 40 km of wet trail. Sizes 36 to 43, free returns.">

Falta og:image

1. Crea una imagen de 1200 × 630 px (JPG, PNG o WebP) con el sujeto centrado.
2. Súbela a un lugar público y copia su URL HTTPS completa.
3. Añade la etiqueta de imagen, junto con las dimensiones y el texto alternativo:

<meta property="og:image" content="https://www.example.com/og/boots-share.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="A pair of brown leather hiking boots on a wet rock">

1. Abre la URL de la imagen en una ventana privada del navegador para confirmar que carga sin iniciar sesión.

Falta twitter:card

<meta name="twitter:card" content="summary_large_image">

Fíjate en el atributo name: por convención, las etiquetas de Twitter usan name y las de Open Graph usan property.

Ajustes por plataforma

Tras cualquier cambio, vuelve a ejecutar el verificador y después los depuradores de las plataformas.

Errores comunes

• URLs de imagen relativas. /images/share.jpg funciona en un navegador, pero no para los rastreadores que esperan una URL completa. Usa siempre https://….
• Etiquetas inyectadas con JavaScript. Las aplicaciones de una sola página que definen las etiquetas en el navegador suelen mostrar vistas previas vacías. Genera las etiquetas en el servidor o en la compilación. Google también aconseja evitar el JavaScript que modifica las metaetiquetas.
• La imagen está bloqueada. Un muro de inicio de sesión, una regla de protección contra bots o una línea de robots.txt pueden impedir que el rastreador obtenga la imagen. LinkedIn señala que un sitio «may be blocking us from pulling the image» (puede estar impidiéndonos obtener la imagen).
• Una sola imagen para todas las páginas. Funciona, pero un producto o artículo compartido con su propia imagen recibe más atención.
• Etiquetas duplicadas. Un tema y un plugin que imprimen ambos og:image: gana la primera, que puede no ser la correcta. Mira el código fuente y busca og:image.
• Sustituir una imagen bajo la misma URL. Las cachés conservan la antigua. Usa un nombre de archivo nuevo.
• SVG o archivos enormes. X no los admite y son lentos para todos.

Ejemplo práctico (hipotético)

Lo siguiente es un ejemplo hipotético, no datos reales. Fernway, una app de gestión de proyectos inventada, nota que los enlaces a su sitio en Slack muestran solo un recuadro gris y el texto «We use cookies to improve your experience.»

El verificador de Open Graph muestra og:title y og:description presentes, pero faltan og:image y twitter:card. El valor de la descripción resulta ser el texto del banner de cookies: un plugin genera og:description a partir del primer párrafo del HTML, y el banner va primero.

Las correcciones: un og:description redactado a mano en la plantilla de la página, una imagen de 1200 × 630 px con la vista de tablero del producto y el sujeto centrado, og:image:width, og:image:height y og:image:alt, y twitter:card con el valor summary_large_image. Una segunda ejecución del verificador sale correcta. Después el equipo pasa la URL por el Sharing Debugger y Post Inspector y vuelve a publicar el enlace en Slack, donde aparece la nueva tarjeta.

Una lista de verificación de 15 minutos

1. Ejecuta el verificador de Open Graph en tu dominio.
2. Añade las etiquetas que falten entre og:title, og:description, og:image y twitter:card.
3. Añade og:url, og:image:width, og:image:height y og:image:alt mientras estás en la plantilla.
4. Asegúrate de que la imagen mida 1200 × 630 px, pese menos de 5 MB, sea pública y se sirva por HTTPS.
5. Genera las etiquetas en el HTML del servidor, no en JavaScript del lado del cliente.
6. Actualiza las vistas previas en caché en los depuradores de las plataformas y vuelve a compartir.

Cómo Searvia mantiene en forma tus vistas previas y tus resultados

El verificador de Open Graph gratuito comprueba una página, tu página de inicio o cualquier dirección que introduzcas, en unos 20 segundos, sin registro, y el mismo informe cubre las otras 37 comprobaciones de nuestra auditoría web. Las vistas previas son solo una parte de cómo aparecen tus páginas; los títulos, las descripciones y las canonical se tratan en nuestra guía de metaetiquetas, y el verificador de metaetiquetas muestra tu vista previa en Google.

Para todo el sitio, una cuenta gratuita de Searvia añade una auditoría del sitio semanal que rastrea cada página y señala títulos y descripciones que faltan o están duplicados, de modo que el texto al que recurren las apps se mantiene correcto. Para un título o una descripción débiles, Write with AI en la auditoría sugiere opciones listas para usar (1 crédito), y la auditoría se ejecuta de nuevo cada semana, así que una actualización de un tema o plugin que rompa tus títulos o descripciones aparecerá en el siguiente informe.