Mis mejores utilidades, ahora en tu móvil.
Accede a todas mis herramientas y proyectos de forma rápida, optimizada y en un solo lugar.
ejemplo.com
Tu título aparecerá aquí
La vista previa de tu meta descripción aparecerá aquí mientras escribes.
Simulador SERP y Contador de Píxeles SEO
Previsualiza fragmentos de búsqueda estilo Google en tiempo real, mide la anchura en píxeles del título y la meta descripción, y ve exactamente dónde se truncará tu texto.
Modo de vista previa
Ancho del título 0 px / 580 px
Correcto
Ancho de la descripción 0 px / 920 px
Correcto
Vista previa estilo Google
Zoom 100%
Estudio de Utilidades
¿Quieres tener esta utilidad en tu web?
Personaliza colores y modo oscuro para WordPress, Notion o tu propio sitio.
Preguntas Frecuentes
¿Por qué contar píxeles en vez de caracteres para los títulos SEO?
Las tarjetas de resultados de Google están limitadas por el ancho visual. Un título con muchas letras estrechas puede albergar más caracteres que uno con letras anchas, mayúsculas o glifos de aspecto grueso. La medición en píxeles ofrece una vista previa más fiel del resultado visible.
¿Predice esto exactamente cómo truncará Google mi fragmento?
No. Google puede reescribir los enlaces de título y los fragmentos, y la representación puede variar según la consulta, el dispositivo, el idioma y los experimentos. La herramienta está diseñada como una guía visual práctica para redactar metadatos con menos probabilidades de ser cortados.
¿Qué límites de píxeles usa el simulador?
El límite predeterminado del título en escritorio es de 580 px, el del título en móvil es de 600 px y el de la meta descripción es de 920 px. Son objetivos de redacción, no límites oficiales de Google.
¿Por qué la vista previa añade puntos suspensivos?
Cuando el texto medido supera el ancho de píxeles disponible, el simulador trunca la cadena en el último carácter que cabe y añade tres puntos, imitando el comportamiento práctico que los equipos SEO necesitan para detectar pérdida de significado.
# Deja de adivinar cómo se verá tu resultado en Google
Un title tag puede parecer perfecto en una hoja de cálculo y aun así fallar en el resultado de búsqueda. Google no reserva espacio por número de caracteres; renderiza el texto dentro de una tarjeta visual. Eso significa que GameBob | Estudio de Desarrollo Indie y otro título con la misma cantidad de caracteres pueden ocupar anchos muy diferentes según las letras, mayúsculas, puntuación y espaciado.La regla que realmente ayuda
Escribe el fragmento para que la promesa importante sobreviva a los puntos suspensivos. Pon el tipo de página, la intención de búsqueda y la razón más fuerte para hacer clic antes del límite de píxeles. Los nombres de marca son útiles, pero no deben desplazar el beneficio principal fuera de la vista.# Qué mide el contador de píxeles
| Elemento | Qué importa | Cómo usar el resultado |
|---|---|---|
| Etiqueta title | Ancho renderizado en píxeles, no el número de caracteres | Mantén la palabra clave principal y la promesa de clic visibles antes del truncamiento. |
| URL visible | Confianza visual y claridad del tema | Usa una ruta legible que refuerce hacia dónde lleva el resultado. |
| Meta descripción | Un área de fragmento más amplia con comportamiento dependiente de la consulta | Pon el beneficio al principio porque Google puede acortarla o reescribirla. |
| Modo dispositivo | Las tarjetas de escritorio y móvil pueden sentirse diferentes | Revisa ambas antes de publicar metadatos de páginas importantes. |
# Por qué los límites de caracteres son un mal hábito SEO
El consejo tradicional de "mantén los títulos por debajo de 60 caracteres" es cómodo, pero oculta el problema real. Letras anchas como la W y la M, palabras en mayúsculas, separadores, números y nombres de marca largos consumen espacios diferentes. La medición en píxeles hace visible el compromiso de inmediato: puedes ver si una frase se gana su sitio o le roba espacio a un mensaje más fuerte.# Un flujo de trabajo práctico para mejores fragmentos
- Empieza por la intención: describe lo que obtiene el usuario, no solo cómo se llama la página.
- Prueba el título completo: pégalo en el simulador y observa la barra antes de publicar.
- Quita las palabras débiles: si la barra se vuelve roja, elimina relleno antes de recortar términos valiosos.
- Revisa los puntos suspensivos: si la vista previa truncada pierde sentido, reescribe el título en vez de aceptar el corte.
- Repite para la descripción: asegúrate de que la primera frase transmita la propuesta de valor por sí sola.
Cuando la barra se vuelve roja
Una barra roja no es un aviso de penalización. Significa que el texto actual es más ancho que el objetivo visual seleccionado, por lo que el simulador lo trunca con puntos. Trátalo como una señal editorial: decide si las palabras ocultas son prescindibles o si el fragmento necesita una estructura más afilada.
# Límites, reescrituras y expectativas realistas
Ningún simulador puede saber qué fragmento exacto mostrará Google. Google puede reescribir los enlaces de título, poner en negrita los términos de la consulta, elegir texto de la página en lugar de la meta descripción o mostrar fragmentos distintos para diferentes búsquedas. Esta herramienta funciona mejor como un paso rápido de redacción y control de calidad: detecta desbordamientos visuales evidentes antes de que la página llegue a producción.Mejor uso de este simulador SERP
Usa la barra de píxeles para detectar desbordamientos visuales antes de publicar metadatos.
Mantén la intención de búsqueda principal y la promesa de clic visibles antes de cualquier elipsis.
Obtén metadatos de URLs que permitan CORS y edita el resultado manualmente cuando sea necesario.
Considera la vista previa como una guía de redacción, ya que Google puede reescribir fragmentos según la consulta.
Referencias Bibliográficas
- [1] Google Search Central: Control your snippets in search results
https://developers.google.com/search/docs/appearance/snippet
- [2] Google Search Central: Influencing title links in search results
https://developers.google.com/search/docs/appearance/title-link
- [3] Google Search Central: Create good titles and snippets in search results
https://developers.google.com/search/docs/appearance/title-link#best-practices
Más utilidades de Desarrollo Web
Calculadora de Aspect Ratio a Píxeles. Proporciones Online
Calcula nuevas resoluciones de imagen, vídeo y diseño web y mantén la proporción exacta para no deformar gráficos. Soporta formatos 16:9, 4:3, 21:9 y customizados.
usar herramienta
Calculadora de Tiempo en Datos Impacto de la Velocidad Web
Descubre cuánto tiempo de vida pierden tus usuarios esperando a que tu web cargue en conexiones 3G, 4G y 5G. Calcula el impacto real del peso de tu sitio.
usar herramienta
Conversor de Color RGB HEX y HSL
Convierte colores entre RGB, HEX y HSL al instante. Genera armonías complementarias y analiza el contraste WCAG. Herramienta 100% client-side y privada.
usar herramienta
Conversor de Excel y CSV a Tabla HTML Generador de Código
Convierte tus datos de Excel o CSV a tablas HTML semánticas y limpias al instante. Herramienta gratuita para desarrolladores y creadores de contenido.
usar herramienta
Generador de Expresiones Cron Online. Traductor y Visualizador
Herramienta visual gratuita para generar expresiones Cron de Linux. Traduce * * * * * a lenguaje humano y visualiza las próximas 5 ejecuciones en tiempo real.
usar herramienta
Calculadora de Especificidad CSS Online. Visualizador de Peso
Calcula la especificidad y peso exacto de cualquier selector CSS. Herramienta visual para entender qué regla CSS gana la cascada y evitar el uso de !important.
usar herramienta
Convertidor de CSS Externo a Inline HTML. Inliner para Emails
Transforma tus hojas de estilo y clases CSS a estilos incrustados en línea automáticamente en tu HTML. Ideal para newsletters, emails transaccionales y maquetación web segura.
usar herramienta
Eliminador de CSS Duplicado Online. Unifica y Limpia Estilos
Herramienta gratuita para limpiar y purgar código CSS duplicado. Unifica selectores redundantes, respeta la cascada y reduce el tamaño de tus archivos al instante.
usar herramienta
Generador de Security.txt RFC 9116
Crea tu archivo security.txt profesional para facilitar el reporte de vulnerabilidades y cumplir con los estándares internacionales de seguridad web.
usar herramienta
Generador de Hashes de Seguridad Online
Calcula hashes MD5, SHA-1, SHA-256 y SHA-512 al instante. Herramienta de seguridad gratuita, privada y ultra rápida para desarrolladores. 100% Client-Side.
usar herramienta
Inspector de Certificados SSL/TLS Online Ver PEM y CRT
Analiza archivos de certificados SSL (.pem, .crt, .der) localmente. Consulta fechas de expiración, emisores, sujetos y huellas digitales SHA-256 sin que tus datos salgan del navegador.
usar herramienta
Formateador y Validador JSON Online Gratuito
Herramienta online gratuita para formatear, validar y reparar código JSON. Formatea y embellece JSON. Detecta errores de sintaxis y mejora la lectura del código
usar herramienta
Visualizador de Códigos de Teclado Online. KeyCode Inspector
Herramienta online gratuita para ver en tiempo real el event.key, event.code, event.which y location de cualquier tecla de tu teclado. Genera snippets de código JavaScript listos para usar.
usar herramienta
Calculadora de Costes de LLMs. Estimador de Precios de APIs de IA
Herramienta online gratuita para estimar el coste de llamadas a APIs de modelos de lenguaje. Compara GPT-4o, Claude, Gemini, Llama y más con precios reales por millón de tokens.
usar herramienta
Generador de Mockups para App Store. iPhone y Google Pixel
Crea presentaciones profesionales para la App Store y Google Play. Mockups de iPhone y Pixel con fondos personalizados, layouts panorámicos y exportación masiva en alta resolución.
usar herramienta
Escalador de Tipografía Musical. Calculadora de Escala Modular
Herramienta online gratuita para crear jerarquías visuales armónicas con escalas modulares basadas en proporciones musicales. Genera variables CSS listas para tu diseño web.
usar herramienta
Generador de Imágenes Placeholder. Mockups Rápidos Online
Crea imágenes de relleno personalizadas para tus diseños web. Ajusta resolución, fondo, texto y exporta en PNG, WebP o JPEG en milisegundos.
usar herramienta
Biblioteca de Prompts de IA
Organiza, etiqueta y guarda tus prompts de ChatGPT, Midjourney y Claude de forma privada. Tu propio banco de prompts en localStorage.
usar herramienta
Calculadora de Legibilidad Visual WCAG y APCA
Comprueba el contraste real de tus diseños con APCA (WCAG 3.0). Analiza cómo influye el grosor de la fuente y el tamaño en la lectura real. De ratios simples a legibilidad perceptual.
usar herramienta
Saneador de SVG Online
Optimiza y limpia SVGs exportados desde Figma, Adobe Illustrator o Inkscape. Elimina metadatos, atributos innecesarios y grupos vacíos para obtener un SVG listo para producción.
usar herramienta
Convertidor de SVG a CSS y Data URI. Optimización Web
Transforma tus iconos y vectores SVG en código CSS (Background o Mask) o Data URI comprimido. Optimiza el rendimiento de tu web eliminando peticiones HTTP externas.
usar herramienta
Limpiador de Tracking de URL: Eliminar UTM, FBCLID y GCLID
Elimina automáticamente parámetros de rastreo y publicidad de tus URLs. Comparte enlaces limpios y protege tu privacidad digital al instante.
usar herramienta
Codificador y Decodificador de URLs Online
Convierte caracteres especiales de cualquier enlace a formato seguro (Percent-Encoding) o devuélvelos a su estado original legible al instante de forma local.
usar herramienta
Generador de Parámetros UTM para Google Analytics
Crea enlaces de seguimiento precisos para tus campañas de marketing digital. Optimizado para Google Analytics y otras herramientas de analítica.
usar herramienta
Decodificador JWT, Parser e Inspector de Claims
Pega un JSON Web Token, decodifica su cabecera y payload al instante, inspecciona claims registrados, detecta tokens expirados y copia JSON limpio para depurar flujos de autenticación.
usar herramienta
Generador Visual de Layouts CSS Grid y Flexbox
Diseña layouts responsive arrastrando bloques visuales, redimensionando el contenedor, ajustando controles de alineación y usando presets - luego copia CSS nativo limpio al instante.
usar herramienta
CSS Box Shadow Generator
Diseña sombras CSS por capas visualmente con previsualización en vivo, sliders, selectores de color y presets. Copia CSS nativo limpio al instante.
usar herramienta
Promociona esta web
La mesa de propaganda interna de jjlmoya.es en español y GameBob.dev a nivel internacional. Convierte capturas de tus propias páginas en imágenes para redes antes de que Bob decida que el feed da vergüenza.
usar herramienta