Formato nuevo
Open Graph: cómo vestir un enlace desde redes a tu sitio
Open Graph controla cómo se ve un enlace a tu sitio en un preview: title, texto, imagen, tipo de objeto. Sin markup, una red a menudo coge un fragmento al azar o una imagen minúscula — caen clics y confianza.
Abajo: por qué importa OG, tags base, cómo comprobar y errores habituales. Trata los posts relacionados de Open Graph en la cola como si apuntaran a este como canon.
Por qué necesitas Open Graph
Cuando alguien pega una URL en un post o mensaje, la plataforma arma una tarjeta. OG dice qué imagen coger, qué title y texto mostrar, y qué URL canónica es el objeto.
El protocolo nació en el ecosistema de Facebook*, pero otras redes y servicios adoptaron las tags. Para el negocio es control de la primera impresión de un enlace al sitio — no «tráfico de la nada».
Qué controlas:
- title y description del preview
- imagen
- URL del objeto
- tipo (article, product, website)
Tags base y ejemplo
En el head de la página coloca meta con `property` y `content`. Fija `og:url` a la dirección canónica de la página. `og:type` para artículos suele ser `article`, para la homepage `website`, para un producto `product` (si soportas extensiones).
Imagen — URL absoluta. Description — 1–2 frases sin stuffing; title legible, no una hoja de keywords.
Set mínimo:
- `og:title` — titular de la tarjeta
- `og:description` — texto corto
- `og:image` — preview
- `og:url` — canon de la página
- `og:type` — tipo de objeto
- `og:locale` — p. ej. `es_ES`
Imágenes y vídeo
Los previews malos a menudo vienen de un archivo de imagen minúsculo, vertical o detrás de auth. Mantén un marco horizontal, resolución/peso suficientes y una URL estable (no un token de un solo uso).
Para vídeo OG permite propiedades extra (`og:video` y relacionadas) — útil si de verdad sirves un clip, no solo un póster. Si no, basta un `og:image` fuerte.
Chequeo de imagen:
- abre por enlace directo
- https sin mixed content
- logo/cara no recortados en los bordes
- una versión actual en la URL (sin sorpresas de CDN)
Cómo verificar el markup
View Source / DevTools: ¿están las tags og en la página correcta? Luego — debuggers oficiales de preview de las plataformas que uses (donde existan). Confirma que cargaron tu title/imagen, no un fragmento al azar.
Tras cambiar la imagen, limpia la caché de preview. Asegúrate de que el servidor no sirve HTML distinto al bot social (el cloaking no está permitido).
Checklist de verificación:
- tags en head, no en body
- un set sensato por URL
- `og:url` = canon
- el preview cuadra con el intent
- el share en móvil se sigue leyendo
Errores típicos
Path relativo en `og:image`, imagen rota, un default para cada artículo («una portada para todo el sitio»), title de un meta title atiborrado, `og:url` apuntando a la home desde páginas internas.
Conflicto con canonical: el preview muestra una URL, el canon otra — confunde a la gente y a la analítica con UTM. Alinea ambos.
A menudo mata el CTR:
- texto cortado a mitad de palabra
- watermark a través del marco
- clickbait que no cuadra con la página
- preview viejo de la caché
Práctica de despliegue
En plantillas del CMS fija campos: title/description/image para OG aparte o heredados de campos SEO. Las fichas de producto necesitan sus propios previews. Añade un check al checklist de release de contenido.
OG no sustituye contenido ni ads: hace más limpio el salto desde social. Mide CTR del post y bounce del landing — no «tags presentes» como KPI.
Para la semana:
- OG en home y 5 URLs clave
- chequeo de preview
- regla para artículos nuevos
- alinear con canon y UTM
FAQ
¿Open Graph es un factor de ranking en búsqueda?
Apenas participa de forma directa en los rankings de búsqueda. Va de CTR y reconocimiento al compartir — y a veces en messengers.
¿Dónde pones las tags?
En el `<head>` de la página: `meta property="og:…"`. En un CMS — plugin SEO o plantilla; en estático — en el layout.
¿Qué tags son obligatorias?
Mínimo: `og:title`, `og:type`, `og:image`, `og:url`. Conviene añadir `og:description` y `og:locale`.
¿En qué se diferencia OG de Twitter Card?
Misma idea de preview, distintos nombres de meta. Muchas redes leen OG; para X/Twitter a veces también añades tags de card.
¿Por qué no se actualiza el preview?
Caché social. Tras editar — debugger / limpiar caché de preview de la URL. Confirma que sirves HTML actual sin caché vieja de CDN.
¿Qué tamaño de imagen usar?
Más o menos ~1200×630 px, URL absoluta https, archivo alcanzable sin auth. No recortes texto importante en los bordes.
¿Hace falta OG en cada página?
En páginas que la gente comparte: artículos, productos, landings. En páginas utilitarias — opcional.
¿OG sustituye title y description?
No. Title/description son para la búsqueda y la pestaña; OG es para previews al compartir. Pueden compartir sentido, pero son capas distintas.
¿Al compartir sale un recorte al azar — y el preview no se actualiza?
Fijamos og:title/image/url al canon y limpiamos caché de preview — CTR del share, no magia de rankings.
Hablar del proyecto
