Open Graph / Twitter Card / Comprobador de vista previa social
Genera, inspecciona y previsualiza meta tags Open Graph en un solo lugar
Introduce una URL y OpenGraphy obtiene el HTML original desde el servidor, analiza Open Graph y Twitter Card, muestra tarjetas sociales y propone mejoras concretas.
Comprueba la vista previa antes de publicar
Haz que tus enlaces se vean claros, coherentes y atractivos en Facebook, LinkedIn, Slack y apps de mensajería.
Preparado para los lugares donde realmente viajan los enlaces
Captura segura, análisis preciso y vistas previas confiables
OpenGraphy no obtiene el sitio desde el navegador del usuario. El backend simula el comportamiento de un crawler y revisa DNS, redirecciones, redes privadas, HTML inicial e imágenes.
Protección SSRFCada petición valida DNS, rangos IP y redirecciones para evitar localhost, redes privadas y direcciones reservadas.
Caché de 4 horasLa metadata y los resultados se guardan temporalmente en Redis sin historial largo de URLs ni datos personales.
DiagnósticosComprueba etiquetas faltantes, imágenes relativas, tamaño de imagen, estado HTTP y longitud de título y descripción.
Haz que cada enlace compartido parezca un anuncio bien diseñado
Open Graph es el lenguaje común que usan plataformas sociales y mensajeros para leer vistas previas de páginas.
¿Qué es Open Graph?
Las etiquetas OG son metadata para crawlers. Muchas plataformas leen og:title, og:description y og:image para crear vistas previas.
Tamaño recomendado de imagen
El tamaño más seguro es 1200 x 630, con proporción aproximada 1.91:1. Las imágenes ligeras se cargan mejor en mensajería.
¿Por qué capturar desde el backend?
La mayoría de crawlers no ejecutan JavaScript ni esperan a que renderice una SPA. La captura del servidor se parece más a lo que ve el crawler real.
Etiquetas Open Graph mínimas
Empieza por título, descripción, imagen y URL canónica. Eso soluciona la mayoría de problemas de vista previa.
<meta property="og:title" content="你的頁面標題" />
<meta property="og:description" content="一段清楚、有吸引力的頁面摘要。" />
<meta property="og:image" content="https://example.com/preview.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:url" content="https://example.com/page" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="Example" />
<meta name="twitter:card" content="summary_large_image" />Cada plataforma interpreta la misma metadata de forma distinta
Facebook se apoya en og:title, og:description y og:image. Tras editar, usa Sharing Debugger para forzar una nueva captura.
X / Twitter
X puede usar metadata OG como respaldo, pero twitter:card y twitter:image hacen más fiables las tarjetas con imagen grande.
LinkedIn suele cachear la primera captura. Comprueba antes de publicar y actualiza títulos o imágenes con Post Inspector.
WhatsApp / iMessage
Las imágenes demasiado grandes fallan o se recortan con más facilidad. Comprímelas y declara ancho y alto.
Discord / Slack / Telegram
Las apps de chat prefieren metadata presente en el HTML inicial del servidor. No dependas solo de JavaScript frontend.
Pinterest / Reddit
Para ecommerce, portfolios y artículos, prepara variantes cuadradas o verticales además de la imagen panorámica.
Integración en stacks comunes
Next.js / Nuxt / Astro
Usa la API de metadata del framework o SSR/SSG para que las etiquetas OG estén en el HTML del servidor.
WordPress
Usa un plugin SEO o el hook del head del tema para emitir título, extracto, imagen destacada y enlace canónico.
Aplicaciones SPA
Si todo renderiza en el cliente, muchos crawlers no verán la metadata. Añade SSR, prerender o HTML estático para páginas compartidas.
Preguntas frecuentes
¿Open Graph afecta directamente al ranking SEO?
Normalmente no es un factor directo, pero mejora clics sociales, calidad de compartidos, tráfico, menciones y exposición de marca.
¿Por qué sigue apareciendo la imagen antigua?
Las plataformas cachean la captura. Usa Facebook Sharing Debugger o LinkedIn Post Inspector y versiona la URL de imagen si hace falta.
¿Qué pasa si no hay etiquetas OG?
La plataforma intenta adivinar desde title, meta description o la primera imagen grande. El resultado es impredecible.
¿Importan las mayúsculas en las etiquetas?
Sí. Usa nombres estándar en minúscula, como og:title, no OG:Title. Muchos crawlers son estrictos.
