Vista previa de Open Graph
See exactly how your page will look when shared on Facebook and Twitter. Fill in your OG fields and get the correct meta tags to copy into your <head> — instantly, in the browser.
Campos Open Graph
OG Title will appear here
OG description will appear here…
Meta etiquetas generadas
<meta property="og:type" content="website" /> <meta name="twitter:card" content="summary_large_image" />
Cómo usar la herramienta de vista previa de Open Graph
Rellena los campos a la izquierda — como mínimo un título OG y una descripción OG — luego cambia entre las pestañas de Facebook y Twitter / X para ver cómo se verá la vista previa de tu enlace en cada plataforma. Una vez satisfecho, copia las meta tags generadas y pégalas dentro de la sección <head> de tu HTML.
¿Qué es el protocolo Open Graph?
Open Graph es un estándar de metadatos introducido por Facebook en 2010 y ahora compatible con prácticamente todas las redes sociales, aplicaciones de mensajería y agregadores de enlaces. Cuando alguien pega tu URL en Facebook, LinkedIn, Slack, iMessage o Twitter, esas plataformas envían un crawler para obtener tu página y leer las meta tags og:. Sin tags OG, las plataformas recurren a adivinar — a menudo eligiendo la imagen incorrecta, un encabezado truncado o ninguna descripción. Con las tags OG correctas, cada compartición de tu contenido luce pulida e intencional.
Cómo añadir estas etiquetas a tu sitio
Pega las etiquetas generadas dentro de la sección <head> de tu HTML. En Next.js, usa el export metadata incorporado — el framework escribe las etiquetas automáticamente. En WordPress, plugins como Yoast SEO o Rank Math gestionan las etiquetas OG a través de una interfaz. Para HTML estático u otros frameworks, pega directamente en la sección head de tu plantilla. Después del despliegue, usa las herramientas de limpieza de caché específicas de cada plataforma descritas en la sección de preguntas frecuentes para actualizar la vista previa.
Preguntas frecuentes
¿Qué es el protocolo Open Graph?
Open Graph (OG) es un protocolo de metadatos creado por Facebook que te permite controlar cómo aparecen tus páginas web cuando se comparten en redes sociales. Al añadir las meta tags og:title, og:description, og:image y og:type a la sección <head> de tu página, le indicas a Facebook, LinkedIn, Slack y otras plataformas exactamente qué título, descripción e imagen mostrar en las tarjetas de vista previa de enlaces — independientemente de la estructura de encabezados de la página.
¿Cuál es el tamaño de imagen recomendado para Open Graph?
Facebook y la mayoría de las plataformas recomiendan 1200×630 píxeles (aproximadamente una relación de 1,91:1) para og:image. Se muestra bien en pantallas de alta DPI sin recorte. Para las tarjetas de Twitter summary_large_image, funciona mejor una relación 16:9 (por ejemplo, 1200×675 px). Mantén las imágenes por debajo de 8 MB y usa el formato JPEG o PNG. Evita incrustar texto crítico dentro de la imagen, ya que las plataformas pueden recortarlo en viewports más pequeños.
¿Cuántos caracteres deben tener og:title y og:description?
Facebook muestra og:title hasta aproximadamente 60 caracteres y og:description hasta 155 caracteres antes de truncar. Twitter recorta og:title a alrededor de 55-70 caracteres y og:description a aproximadamente 125 caracteres en las vistas previas de tarjetas. Para estar seguro, mantén og:title por debajo de los 60 caracteres y og:description por debajo de los 120 para que ambas plataformas muestren el texto completo sin cortar a mitad de frase.
¿Las etiquetas Open Graph ayudan al SEO?
Las etiquetas Open Graph no influyen directamente en los algoritmos de ranking de Google — Google utiliza principalmente la etiqueta title y la meta description para los resultados de búsqueda. Sin embargo, las etiquetas OG benefician indirectamente el SEO al mejorar el compartido social: un og:title convincente y un og:image de alta calidad generan más clics y compartidos, lo que puede generar tráfico y conseguir backlinks naturales. Los datos OG completos también ayudan a Slack, iMessage, WhatsApp y Discord a mostrar vistas previas ricas, ampliando el alcance de tu contenido.
¿Por qué mi vista previa social sigue mostrando contenido antiguo después de actualizar mis etiquetas?
Las redes sociales almacenan en caché las vistas previas de enlaces de forma agresiva. Después de actualizar tus etiquetas OG, necesitas limpiar manualmente la caché para cada plataforma: usa el Sharing Debugger de Facebook (developers.facebook.com/tools/debug), el Card Validator de Twitter (cards-dev.twitter.com/validator) o el Post Inspector de LinkedIn (linkedin.com/post-inspector). Introduce tu URL y haz clic en 'Scrape Again' o 'Refresh'. La nueva vista previa se propagará en pocas horas para la mayoría de las plataformas.
Herramientas relacionadas
¿Quieres que tu contenido rinda en cada plataforma?
Nuestros expertos SEO pueden auditar toda tu configuración on-page — meta tags, compartición social, datos estructurados y más — y entregarte una hoja de ruta de crecimiento personalizada.
Get a Free SEO Audit