🖥️ Previsualización de & fragmentos de SERP

Vista previa del fragmento de SRP

Escriba el título de su página, meta descripción y URL para ver una vista previa en vivo, pixel-exactitud de su fragmento de resultado de Google en el escritorio y móvil, con advertencias de truncamiento antes de que le cueste clics.

0 caracteres · 0px
0 caracteres · 0px
e
example.com
https://example.com

Cómo usar la vista previa de SERP

Cuatro pasos rápidos a un fragmento que se muestra en su totalidad y gana el clic.

1

Introduzca el título de su página

Escriba la etiqueta de título que planea usar. La actualización de los contadores de caracteres y píxeles en vivo para que pueda ver lo cerca que está del límite de escritorio ~600px de Google.

2

Añadir su URL y meta descripción

Pegue la URL de la página y escriba la meta descripción. La vista previa hace que el pan rallado, el título azul y el fragmento gris sean exactamente como un resultado real.

3

Cambiar entre escritorio y móvil

Conmuta las pestañas Escritorio y Móvil para comprobar ambos diseños, ya que el móvil utiliza una columna más estrecha y envuelve los títulos en más líneas.

4

Fijar las advertencias de truncación

Editar hasta que los chips de advertencia se vuelvan verdes. Recortar cualquier cosa marcada como demasiado ancha para que Google muestra su título completo y la descripción en lugar de una elipsis.

Preguntas de fragmentos de SERP

Google trunca enlaces de título de escritorio a aproximadamente 600 píxeles, no un recuento de caracteres fijo, porque caracteres anchos como W y M toman más espacio que los estrechos como i y l. Esta herramienta mide el ancho real de píxeles renderizados para que pueda ver exactamente dónde se cortará su título.
Google muestra normalmente alrededor de 920 píxeles de meta descripción en el escritorio (unos 155 a 160 caracteres) y menos en el móvil. Cualquier cosa más tiempo se trunca con una elipsis. La vista previa muestra tanto la truncación de escritorio y móvil en vivo como se escribe.
Los resultados móviles utilizan una columna más estrecha y un tamaño de fuente diferente, por lo que los títulos se envuelven en más líneas y descripciones se cortan más corto. Esta herramienta hace que ambos diseños lado a lado para que pueda optimizar para cada uno.
No. La vista previa se ejecuta completamente en su navegador utilizando la API de medición de texto de Canvas. Nada de lo que escriba se carga, registra o almacena, para que pueda probar páginas no publicadas y URLs internas de forma segura.

Para desarrolladores

Esta vista previa SERP ejecuta 100% del lado del cliente — la medición de píxeles ocurre en su navegador, por lo que nada de lo que escriba se carga.

✓ Privado por diseño — no hay servidor ida y vuelta

La truncación se mide de la misma manera que el navegador dibuja texto — con la API de Canvas measureText. Aquí está la idea central que puede introducir en su propia tubería de compilación:

// Measure rendered pixel width like Google does
const ctx = document.createElement('canvas').getContext('2d');
function titleWidth(text, font = '20px arial') {
  ctx.font = font;
  return ctx.measureText(text).width; // > 600 => truncated on desktop
}
console.log(titleWidth('Your page title here'));

¿Necesita esto a escala — comprobar por lotes miles de títulos de su CMS o CI? Una API REST alojada para nuestras herramientas SEO está disponible en planes de pago. Ver planes →