Open Graph: la vista previa de tu web en redes

Por qué importa

Sin estas etiquetas, cada plataforma improvisa: coge una imagen cualquiera de la página (a veces un icono, a veces ninguna), el primer texto que encuentra o solo la dirección. Un enlace con una buena imagen y un título claro transmite confianza y se entiende antes de abrirlo.

No son un factor de posicionamiento conocido en Google, pero sí deciden cómo se ve tu marca cada vez que un cliente comparte un producto con un amigo o tú publicas en redes. Es un arreglo que se hace una vez en la plantilla y se aplica a todas las páginas.

Cómo lo comprueba Posiciona

Buscamos en la página las cuatro etiquetas básicas del protocolo, escritas como <meta property="og:…">: og:title, og:description, og:image y og:type. Cada una presente suma 25 puntos, así que con las cuatro la puntuación es 100 y sin ninguna, 0. Te indicamos cuáles faltan. No comprobamos que la imagen cargue ni su tamaño: para eso, usa las herramientas de vista previa de los pasos.

En la nota de SEO esta comprobación cuenta como “recomendable” (peso 2 de 5).

Cómo solucionarlo

Añade en el <head> de cada página og:title, og:description, og:image y og:type, y también og:url con la URL canónica de la página.
El título y la descripción pueden ser los mismos que ve Google o una versión más cercana, pensada para redes. Evita textos genéricos repetidos en todas las páginas.
Para og:image, usa una URL completa (con https://) de una imagen de 1200 × 630 píxeles, proporción 1,91:1, que es la medida más extendida para las tarjetas grandes. Deja lo importante en el centro, porque algunas aplicaciones recortan la imagen.
Usa og:type con website en la portada y las páginas generales, article en los artículos y product en las fichas de producto si tu plataforma lo genera.
Comprueba el resultado con el Sharing Debugger de Meta y el Post Inspector de LinkedIn. Sirven también para que esas redes actualicen una vista previa que tenían guardada con datos antiguos.

Etiquetas Open Graph de una ficha de productoHTML

<meta property="og:title" content="Zapatillas de trail para mujer">
<meta property="og:description" content="Ligeras, con agarre en barro y envío gratis en 24 h.">
<meta property="og:image" content="https://www.tiendamontana.com/img/trail-mujer-1200x630.jpg">
<meta property="og:type" content="product">
<meta property="og:url" content="https://www.tiendamontana.com/products/zapatillas-trail-mujer">

En WordPress

Yoast SEO y Rank Math generan las etiquetas Open Graph de todas las páginas. En la pestaña de redes sociales de su caja puedes poner, en cada página, un título, una descripción y una imagen específicos para compartir.
Configura en los ajustes del plugin una imagen por defecto para las páginas sin imagen destacada. Si otro plugin (de redes sociales, por ejemplo) también añade Open Graph, desactiva esa función en uno de los dos para no duplicar etiquetas.

En Shopify

La mayoría de los temas de Shopify generan Open Graph solos, con el nombre, la descripción y la imagen principal de cada producto o colección. Suele estar en un snippet con “meta” en el nombre (en Dawn, meta-tags.liquid) que se incluye desde theme.liquid.
La imagen que se usa al compartir la página de inicio y las páginas sin foto propia se configura en Tienda online → Preferencias, en el apartado de la imagen para compartir en redes sociales.
Para que cada producto se vea bien al compartirlo, pon como primera imagen la más representativa, con el producto centrado.

Preguntas frecuentes

¿Por qué Facebook o WhatsApp siguen mostrando la imagen antigua?

Las plataformas guardan la vista previa de cada enlace durante un tiempo. En Facebook y LinkedIn puedes forzar la actualización pegando la URL en el Sharing Debugger de Meta o en el Post Inspector de LinkedIn. En WhatsApp no hay una herramienta equivalente; añadir un parámetro a la URL, como ?v=2, suele hacer que se genere una vista previa nueva.

¿Open Graph ayuda al SEO?

No es un factor de posicionamiento conocido en Google. Su efecto es indirecto: un enlace que se entiende y lleva una buena imagen invita más a abrirlo cuando se comparte en redes o por mensajería. Además, Google puede usar og:title como una de las fuentes para generar el título de un resultado, así que conviene que sea coherente con tu etiqueta title.