Vista previa del snippet en las SERP de Google
Mira cómo pueden verse tu título y tu meta description en los resultados de Google. Mide el ancho en píxeles con la API canvas y recorta como Google, a unos 600 px.
¿Qué es Vista previa SERP?
La vista previa SERP muestra un resultado de búsqueda al estilo de Google a partir del título, la URL y la meta description de tu página. En lugar de contar caracteres, mide el ancho real del texto en píxeles y lo corta con " ..." donde lo harían los resultados de escritorio de Google, para que veas si las palabras importantes siguen visibles.
Cómo usar Vista previa SERP
- Introduce el título de la página; el ancho en píxeles y el número de caracteres aparecen junto a la etiqueta.
- Introduce la URL de la página para ver la URL mostrada en forma de ruta de navegación.
- Introduce la meta description.
- Revisa la vista previa y los avisos sobre título o descripción recortados.
Ejemplo
How to Make Cold Brew Coffee at Home: A Complete Step-by-Step Guide for Beginners (81 characters)
The title measures about 780 px, wider than 600 px, so it is shown cut off with " ..." after the last whole word that fits.
Cuándo usar Vista previa SERP
Úsala al redactar títulos y descripciones para mantener el mensaje clave en la parte visible. Google a menudo reescribe los títulos y elige su propio texto de snippet, y los resultados en móvil usan otros anchos, así que toma la vista previa como una guía, no como una garantía.
Cómo funciona Vista previa SERP
El ancho del texto se mide en tu navegador con CanvasRenderingContext2D.measureText() usando Arial: 20 px para el título y 14 px para la descripción, igual que la tipografía de escritorio de Google. Si el título supera los 600 px (descripción: 920 px, unas dos líneas), se busca mediante búsqueda binaria el prefijo más largo que cabe junto con " ..." y se corta en un límite de palabra cuando hay uno cerca. La URL se muestra como host › segmentos de ruta.
Casos de Uso Comunes
- Acortar el título de un producto hasta que el nombre de la marca deje de cortarse.
- Comprobar que los caracteres anchos (W, M, mayúsculas) no hacen que el título supere el límite.
- Previsualizar las meta descriptions de un conjunto de landing pages.
- Mostrar a un cliente cómo se verá aproximadamente su resultado.
Preguntas Frecuentes
¿Por qué píxeles en lugar de caracteres?
Google recorta por ancho. 60 caracteres estrechos (i, l) caben sin problema, mientras que 50 anchos (W, M) pueden no caber.
¿Google mostrará siempre mi título?
No. Google puede reescribir los títulos demasiado largos, llenos de palabras clave o que no coinciden con la página, y a menudo toma el texto de la descripción del contenido de la página.
¿Simula los resultados en móvil?
Usa los anchos de escritorio. Los resultados en móvil reparten los títulos en más líneas, así que el escritorio es el límite más estricto.