Open Graph es el conjunto de etiquetas que controla cómo se ve tu producto cuando alguien comparte el enlace: la imagen, el título y la descripción que renderizan WhatsApp, las redes y varios asistentes de IA. Para una ficha de producto, los OG correctos incluyen además precio y disponibilidad. Aquí tienes el código completo, el paso a paso en WooCommerce y cómo verificar la vista previa antes de que tu cliente la vea rota.
Tabla de Contenidos
¿Qué es Open Graph y qué tiene que ver con la IA?
Nació para que los enlaces compartidos en redes mostraran una tarjeta decente en lugar de un link pelado, y terminó siendo la carta de presentación de tu web en todo el ecosistema conversacional: WhatsApp lo lee para armar la vista previa, las redes lo usan para sus tarjetas y varios asistentes y agregadores lo toman como primera lectura estructurada de la página, junto al schema.
Para una tienda peruana el caso de uso dominante es obvio: tus fichas viajan por WhatsApp todos los días (de tu vendedor al cliente, del cliente a su socio) y cada viaje renderiza la tarjeta OG. Una vista previa con foto profesional, título claro y precio es un mini anuncio gratuito en cada chat; una rota (sin imagen, con el título del dominio) es una primera impresión perdida en el canal donde más se decide la compra peruana. Es la misma lógica de legibilidad del comercio agéntico, aplicada a la capa social.
El código completo de una ficha bien etiquetada
Esto es lo que debe emitir el head de tu ficha de producto (tu plugin lo genera; tú lo verificas):
<meta property="og:type" content="product" />
<meta property="og:title" content="Taladro percutor inalámbrico 20V TX-200" />
<meta property="og:description" content="Perfora concreto, metal y madera. Dos baterías y maletín. Entrega en Lima en 24 h." />
<meta property="og:url" content="https://tienda.example/producto/taladro-tx200/" />
<meta property="og:image" content="https://tienda.example/uploads/taladro-tx200-social.webp" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:site_name" content="Tu Tienda" />
<meta property="product:price:amount" content="389.00" />
<meta property="product:price:currency" content="PEN" />
<meta property="product:availability" content="in stock" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Taladro percutor inalámbrico 20V TX-200" />
<meta name="twitter:image" content="https://tienda.example/uploads/taladro-tx200-social.webp" />Los protagonistas: og:title con el nombre comercial completo (no el SKU), og:description con el beneficio y un dato operativo (la entrega vende), og:image con la foto preparada para la proporción 1.91:1, y el trío de producto con precio, moneda y disponibilidad coherentes con la página. Lo demás es contexto que las plataformas agradecen.
Paso a paso en WooCommerce
Paso 1: Audita cómo se ve tu ficha hoy
Comparte la URL de tu producto estrella en un chat de WhatsApp contigo mismo y mira la vista previa: ¿imagen correcta, título legible, descripción con sentido? Captura el resultado como línea base. Resultado verificable: sabes exactamente qué muestra (o qué rompe) tu ficha compartida hoy.
Paso 2: Activa los OG desde tu plugin de SEO
En Rank Math, habilita los meta sociales y define la imagen social por defecto del sitio. El plugin tomará título, descripción e imagen de cada producto automáticamente. Resultado verificable: el código fuente de la ficha muestra og:title, og:description, og:image y og:url.
Sube una imagen específica para compartir (1200 por 630, producto centrado, bajo 300 KB) o verifica que la foto principal del producto rinda bien recortada a esa proporción. Resultado verificable: la imagen social de la ficha existe en la medida correcta.
Paso 4: Agrega los meta de producto
Completa el tipo product con precio y disponibilidad en formato OG (vía la configuración del plugin o un snippet en el tema hijo). Deben calcar los datos reales de WooCommerce. Resultado verificable: product:price:amount y product:availability aparecen en el código fuente con valores correctos.
Paso 5: Configura las Twitter Cards
Activa el formato de tarjeta grande (summary_large_image) en la sección social del plugin: hereda título, descripción e imagen de los OG. Resultado verificable: las etiquetas twitter:card y twitter:image presentes en la ficha.
Paso 6: Purga cachés y prueba en frío
Limpia la caché de tu web, pasa la URL por los validadores de vista previa disponibles y vuelve a compartirla en WhatsApp. Compara contra la captura del paso 1. Resultado verificable: la vista previa muestra imagen, título y descripción correctos, y el antes y después queda documentado.
¿Cómo se ve bien renderizado en WhatsApp?
La tarjeta ganadora en WhatsApp tiene cuatro elementos en armonía: la imagen grande con el producto reconocible a tamaño miniatura (por eso el fondo limpio y el producto centrado), el título que cabe sin cortarse a media palabra clave, la descripción que en una línea y media dice qué es y qué incluye, y el dominio que confirma a dónde lleva el clic. Cuando los cuatro funcionan, la tarjeta responde sola las primeras preguntas y el chat empieza más cerca del cierre.
En los asistentes de IA que muestran tarjetas o citan páginas, los mismos metadatos alimentan cómo te presentan: título y descripción OG suelen ser el rótulo visible de tu enlace en sus respuestas. Es un canal más donde la diferencia entre etiqueta cuidada y etiqueta por defecto se nota a primera vista.
¿Open Graph reemplaza al schema?
No: son capas con públicos distintos que comparten fuente. El schema Product es la declaración profunda para buscadores y agentes (con stock, envíos, devoluciones y validadores formales); los OG son la capa de presentación para plataformas sociales y vistas previas. El schema convence al algoritmo; el OG convence al humano que ve la tarjeta en su chat.
La regla de coherencia los une: ambos deben nacer de los mismos datos del producto en WooCommerce. Precio distinto entre OG, schema y página es la trifecta de la desconfianza. Con un solo plugin serio generando ambos desde la fuente real, la coherencia es gratis; es el estándar con el que salen nuestras tiendas virtuales.
Errores comunes con las vistas previas
La imagen por defecto del tema (el logo gigante) en todas las fichas: técnicamente válido, comercialmente nulo. Cada producto comparte con su propia foto.
Descripciones cortadas a media frase porque nadie las pensó para la tarjeta: escribe la meta descripción sabiendo que también será tu texto de WhatsApp.
El precio en la tarjeta desactualizado tras un cambio: los meta de producto se regeneran con el dato vivo, no se escriben a mano.
Y probar solo en escritorio: la tarjeta se consume en celular; verifica ahí, donde tu cliente la verá de verdad.
Preguntas frecuentes
¿Por qué WhatsApp sigue mostrando mi imagen vieja?
Porque cachea las vistas previas con memoria larga: corregir la etiqueta no refresca lo que WhatsApp ya guardó de esa URL. Las salidas prácticas: usa el depurador para compartir de la plataforma correspondiente para forzar la relectura donde exista, o cambia el nombre del archivo de la imagen (URL nueva, caché nuevo). Paciencia: algunas cachés simplemente expiran con días.
¿Qué medida exacta debe tener la imagen og:image?
El estándar cómodo es 1200 por 630 píxeles (proporción 1.91:1), que renderiza bien en WhatsApp y redes sin recortes traicioneros, con peso bajo los 300 KB para que la vista previa cargue al instante. Para productos, usa la foto sobre fondo limpio con el producto centrado: los recortes automáticos de cada plataforma perdonan los bordes, nunca el centro.
¿Open Graph mejora mi posicionamiento en Google?
No directamente: los OG no son señal de ranking. Su efecto es indirecto y medible en otra parte: una vista previa completa multiplica los clics cuando tu enlace circula por WhatsApp y redes, y ese tráfico (y las señales de marca que genera) sí alimenta tu ecosistema. Piénsalo como conversión de cada enlace compartido, no como SEO.
¿Necesito un plugin adicional si ya uso Rank Math?
Para la base, no: Rank Math genera OG y Twitter Cards desde los datos del producto, con imagen social configurable por ficha. Los meta específicos de producto (precio y disponibilidad en formato OG) dependen de la versión y la configuración; si tu setup no los emite, un snippet corto en el tema hijo los completa sin plugin extra.
Haz ahora el paso 1: comparte tu producto estrella en un chat contigo mismo y mira la tarjeta con ojos de cliente. Si no te provoca hacer clic, ya tienes tarea para esta semana con el código de arriba como receta. ¿Prefieres las fichas completas (OG, Twitter Cards y schema coherentes) configuradas de una vez? Pide tu propuesta en el cotizador online.
