SEO y rendimiento web
Open Graph y metadatos para que tu enlace no se vea roto
og:title, og:image, og:description y Twitter cards: checklist para compartir landings, productos y artículos en Whatsapp, LinkedIn y X sin preview genérico.
10 min de lectura · Actualizado 2026-07-22
Lo que ven en Whatsapp y LinkedIn
Al pegar un enlace, las redes leen meta tags Open Graph (og:*) en el HTML inicial — no esperan a JavaScript en muchos casers. Sin og:image, muestran icono genérico o primera imagen random de la página.
Whatsapp y LinkedIn cachean previews agresivamente. Cambiar og:image en producción no actualiza lo que ya compartiste; necesitas debugger/scraper refresh.
Un preview roto transmite amateurismo en ventas B2B: el CTO que recibe tu propuesta por Slack ve un enlace gris sin imagen — micro-señal negativa evitable.
La auditoría SEO del Toolbox lista og:title, og:description, og:image y twitter:card ausentes o duplicados con title/description SEO.
Tags mínimos por template
og:title — puede coincidir con title SEO o ser más conversacional (≤ 60 caracteres visibles). og:description — 1–2 frases, ≤ 200 caracteres.
og:image — absoluta HTTPS, 1200×630 px recomendado (ratio 1.91:1). Peso < 300 KB JPG/WebP. og:image:width y og:image:height ayudan a render consistente.
og:url — URL canónica sin parámetros tracking. og:type — website, article, product según plantilla.
twitter:card summary_large_image + twitter:title/description/image como fallback; X usa OG pero Twitter tags dan control fino.
Implementación en Next.js y WordPress
Next.js App Router: metadata openGraph en export metadata o generateMetadata por ruta — imagen en /public o URL absoluta CDN.
WordPress: Yoast/RankMath generan OG; verifica que imagen destacada exista en cada post. Páginas sin featured image heredan logo pixelado.
Evita og:image relativa (/og/home.jpg) — scrapers externos fallan resolviendo host. Usa absoluteUrl() o SITE_URL + path.
SSR/SSG: tags deben estar en HTML first byte. Client-only React Helmet post-hydration falla en LinkedIn bot.
Imágenes OG por tipo de página
Home: brand + propuesta valor legible en imagen (texto grande, poco detalle). Servicios: iconografía + titular corto. Blog: titular artículo sobre foto relevante — no stock genérico.
Localiza OG por idioma si tienes /es /en — og:locale y alternate locale. Compartir en México vs España con mismo preview en español neutro está bien; mixed language no.
Producto e-commerce: foto producto fondo limpio, precio opcional en imagen (no confiar solo en imagen para precio dinámico).
Genera variantes OG con template Figma exportado WebP — mantén bank de assets versionado en repo.
Validación y cache busting
Pre-deploy: Facebook Sharing Debugger, LinkedIn Post Inspector, Twitter Card Validator (o opengraph.xyz agregado).
Tras cambiar imagen, fuerza rescrape o añade query ?v=2 a og:image URL temporalmente — documenta cuándo quitar query.
Monitoriza 404 en URLs og:image — roturas silenciosas cuando mueves /public/assets.
Conecta revisa metadatos sociales en rediseños y landings Next.js/WordPress como parte de auditoría SEO técnica.
Ponlo en práctica ahora
Usa las herramientas gratuitas del Toolbox para validar tu configuración en minutos.
¿Necesitas que lo resolvamos contigo?
Un ingeniero de Conecta puede aplicar esto en tu operación: servicio relacionado o conversación directa.