# Estudio de Vista Previa SERP y Social Renderiza Google SERP (truncado por píxeles en escritorio/móvil), tarjetas X y OpenGraph con diagnósticos SEO pre-lanzamiento > Página canónica: https://elysiatools.com/es/tools/serp-social-preview-studio - **Categoría:** Development - **Palabras clave:** serp, seo, vista previa, tarjetas sociales, og, twitter ## Descripción general Introduce los metadatos de tu página y la herramienta renderiza tres objetivos reales: 1. Tarjeta SERP de Google — truncado de título en escritorio (~600px) y móvil (~920px) calculado con anchos de píxel reales de Arial (string-pixel-width), no solo conteo de caracteres. 2. Tarjeta X (Twitter) — layouts summary y summary_large_image. 3. Tarjeta OpenGraph — estilo LinkedIn/Facebook con la ratio recomendada 1.91:1. También ejecuta diagnósticos SEO pre-lanzamiento: título corto/largo, truncado por dispositivo, longitud de descripción, caracteres sin escapar, validez de la URL canónica, guiones bajos vs guiones, og:image HTTPS/válida, longitud de og:description, og:site_name, twitter:card ausente — más pistas cuando el título sugiere datos estructurados FAQ / HowTo / Product. Cómo usarlo: - Rellena lo que tengas; deja el resto vacío para ver qué falta. - Elige dispositivo: escritorio, móvil o ambos. - Usa la tabla de diagnósticos como checklist de lanzamiento. ## Entradas - **Título de página** (text): Best Running Shoes 2026 — Tested & Reviewed | RunLab - **Meta descripción** (textarea): We tested 40 running shoes for comfort, durability, and speed. See our top picks for road, trail, and racing in 2026. - **URL canónica** (text): https://example.com/best-running-shoes-2026 - **URL de imagen OpenGraph** (text): https://example.com/og/running-shoes-1200x630.jpg - **Texto alternativo OG** (textarea): Same as meta description, or a tailored social copy - **Nombre del sitio** (text): RunLab - **Tipo de tarjeta Twitter** (select) - **Dispositivo de vista previa** (select) ## Cuándo usarlo - Antes de publicar una nueva página web o artículo de blog para asegurar que el título no se corte en los resultados de Google. - Al configurar las etiquetas OpenGraph y X Cards para verificar que las imágenes y descripciones se muestren correctamente en redes sociales. - Durante auditorías SEO para corregir URLs canónicas inválidas, guiones bajos en rutas o metadatos demasiado largos o cortos. ## Cómo funciona - Introduzca el título de la página, la meta descripción, la URL canónica y el enlace de la imagen OpenGraph en los campos correspondientes. - Seleccione el tipo de tarjeta de X (summary o summary_large_image) y el dispositivo de visualización (escritorio, móvil o ambos). - Revise las vistas previas interactivas generadas con anchos de píxel reales de Arial para Google SERP y las proporciones correctas para redes sociales. - Analice la tabla de diagnósticos SEO pre-lanzamiento para identificar errores críticos como imágenes sin HTTPS o falta de etiquetas obligatorias. ## Casos de uso - Redacción de meta títulos y descripciones optimizados para evitar el truncado visual en las SERP de Google. - Control de calidad de imágenes OpenGraph para asegurar que no se recorten elementos importantes en LinkedIn o Facebook. - Auditoría rápida de URLs y etiquetas de redes sociales antes de lanzar campañas de marketing de contenidos. ## Preguntas frecuentes ### ¿Cómo calcula la herramienta el truncado del título en Google? Utiliza el ancho real en píxeles de la tipografía Arial (~600px en escritorio y ~920px en móvil) en lugar de contar caracteres de forma genérica. ### ¿Qué redes sociales son compatibles con la vista previa de OpenGraph? Renderiza el formato estándar utilizado por plataformas como Facebook y LinkedIn, aplicando la relación de aspecto recomendada de 1.91:1 para la imagen. ### ¿Qué tipos de tarjetas de X (Twitter) puedo previsualizar? Permite alternar entre el diseño de tarjeta de resumen (summary) y el de tarjeta con imagen grande (summary_large_image). ### ¿Qué diagnósticos SEO realiza la herramienta? Evalúa la longitud de títulos y descripciones, validez de la URL canónica, uso de guiones en rutas, seguridad HTTPS en og:image y sugerencias de datos estructurados. ### ¿Es necesario rellenar todos los campos para ver la vista previa? No, puede rellenar solo los campos que tenga disponibles y la herramienta le indicará qué metadatos faltan en el panel de diagnóstico. ## Herramientas relacionadas - [Tabla de Tamaños de Imágenes para Redes Sociales](https://elysiatools.com/es/tools/social-media-image-size-cheatsheet): Referencia 2026 de dimensiones de imagen para Instagram, Facebook, X, LinkedIn, YouTube, TikTok, Pinterest y WeChat, filtrable por plataforma. - [Renombrar Imágenes en Lote](https://elysiatools.com/es/tools/image-batch-rename): Renombrar múltiples archivos de imagen usando patrones, reemplazo de texto, numeración y conversión de mayúsculas. Retorna archivos renombrados como descarga ZIP. - [Núcleo de Convolución Personalizado](https://elysiatools.com/es/tools/image-custom-kernel): Aplica un núcleo de convolución personalizado definiendo tus propios valores de matriz para efectos de imagen personalizados y procesamiento - [Efecto de Relieve de Imagen](https://elysiatools.com/es/tools/image-emboss): Aplica efectos de relieve profesionales con profundidad ajustable, ángulo y dirección de iluminación para apariencia de superficie 3D - [Extensor de Imagen con Fondo Borroso](https://elysiatools.com/es/tools/image-extend-blur-background): Extiende el lienzo de la imagen con fondo borroso, perfecto para retratos, fotos de productos y presentaciones profesionales - [Extensor de Imagen con Degradado](https://elysiatools.com/es/tools/image-extend-gradient): Extiende el lienzo de la imagen con fondos degradados para efectos de diseño moderno y transiciones suaves - [Desenfoque Gaussiano](https://elysiatools.com/es/tools/image-gaussian): Aplica desenfoque gaussiano para suavizado y reducción de ruido con control preciso - [Operador Laplaciano de Imagen](https://elysiatools.com/es/tools/image-laplacian): Aplica el operador Laplaciano para detección de bordes, nitidez y mejora de imagen con diferentes variantes de núcleo ## Ejemplos - [Ejemplos de Procesamiento de Imágenes Android Java](https://elysiatools.com/es/samples/android-image-processing-java): Ejemplos de procesamiento de imágenes Android Java incluyendo lectura/escritura, escalado y conversión de formato - [Ejemplos de Procesamiento de Imágenes Android Kotlin](https://elysiatools.com/es/samples/android-image-processing-kotlin): Ejemplos de procesamiento de imágenes Android Kotlin incluyendo lectura/escritura, escalado y conversión de formato - [Ejemplos de Procesamiento de Imágenes Web Python](https://elysiatools.com/es/samples/web-image-processing-python): Ejemplos de procesamiento de imágenes Web Python usando PIL/Pillow incluyendo lectura, guardado, redimensionamiento y conversión de formato - [Ejemplos de Procesamiento de Imágenes Web Rust](https://elysiatools.com/es/samples/web-image-processing-rust): Ejemplos de procesamiento de imágenes Web Rust incluyendo lectura/escritura, escalado y conversión de formato ## Contenido relacionado - [Herramientas de conversion de formatos de imagen y exportacion animada](https://elysiatools.com/es/hubs/image-convert): Compara convertidores de imagen para JPG, PNG, GIF, AVIF, WebP, TIFF, ICO, base64 y salidas pensadas para animacion en un solo hub. - [Herramientas de limpieza, acabado y preparacion por lotes de imagenes](https://elysiatools.com/es/hubs/image-utility): Reune en un solo hub herramientas para limpiar imagenes, recortar bordes, agregar margen o marco, redimensionar y comprimir por lotes, poner marcas de agua y pulir activos visuales. - [Herramientas de metadatos de imagen, EXIF y limpieza de privacidad](https://elysiatools.com/es/hubs/image-metadata): Compara visores de metadatos, inspectores EXIF/IPTC/XMP, corrección de orientación, editores de metadatos y limpieza de privacidad para publicación de imágenes. - [Herramientas de Limpieza, Redimensionado y Mejora de Imagen](https://elysiatools.com/es/hubs/image-cleanup-resize-and-detail-enhancement): Prepara imágenes con corrección de orientación, recorte, reducción de ruido, redimensionado, nitidez y conversión por lotes.